Html Posts
Why developer choose React JSReact

Why developer choose React JSReact
There are a few reasons why developers choose ReactJS and they are :-
- JavaScript XML or JSX
- React use Virtual DOM
- ReactJs Props
- One-Way Data Binding
- Quick Rendering
- SEO Friendly
- Helpful Developer Toolset
JavaScript XML or JSX
It is a markup syntax that describes the appearance of the application's interface. It creates the same syntax as HTML and is used by developers to create feedback elements.
JSX is one of the best features of React JS as it makes it very easy for developers to write building blocks.
React use Virtual DOM
This feature helps speed up the app development process. The algorithm allows the web page to be copied into React's virtual memory.
The original DOM there is represented by a virtual DOM.
ReactJs Props
ReactJS Props allows developers to move custom development data into its specific UI components. This helps in rendering JavaScript components and improving the UI development experience.
One-Way Data Binding
Feedback uses a stream of data that is directionless, forcing developers to use the callback feature to edit components and prevent them from editing directly.
Control of data flow from a single point is achieved with a JS app architecture component called Flux. It really gives developers better control over the application and makes it more flexible and effective.
Quick Rendering
This means that a small edit made at the top level can hit the app UI hard. Thanks to the virtual DOM, it can be tested first to determine the risk level with each change before finalizing all changes.
SEO Friendly
To make any application work well, it is important that the search engine selects it; Two factors are important for applications: fast load time and rendering. If both of these boxes are ticked, your app will rank higher on Google results pages.
React's super-fast rendering feature drastically reduces page load time, enabling businesses to rank their apps on the first page of Google search.
Helpful Developer Toolset
Facebook has included many developer tools in the React JS framework for React and Chrome, and they greatly help developers find parents and child components, observe their hierarchies, and test their current status.
Through self-learning, developers will be able to use emerging technologies in real, live, projects.
So, developers choose ReactJS hope this help.
Best practices for React JS developer part-2React

Best practices for React JS developer part-2React
In the previous article, we learned 5 areas or tips on Best practices for React JS developer.
In this article, we will learn more about areas or tips
- Object Destructuring.
- When pass value in props
- Tags close it self.
- Do not use underscore in any method name.
- Use alt in img tag.
Object distracting
You can use object distracting
Not Good
return (
<>
{user.firstName}
</>
)
Good
const { firstName } = user;
return (
<>
{firstName}
</>
)
When pass value in props
When pass the data between two component that time use camelCase for prop names.
Not Good
<Home
UserName="demo"
phone_number={9898989898}
/>
Good
<Home
userName="demo"
phoneNumber={9898989898}
/>
Tags close it self
Any component in not use children so closing it self
Not Good
<Home userName="demo"></Home>
Good
<Home
userName="demo"
/>
Do not use underscore in any method name
You don't need underscores in any React method.
Not Good
const _onClickHandler = () => {
// Your code
}
Good
const onClickHandler = () => {
// Your code
}
Use alt attribute in img tag
Do use alt attribute in the img tag. and don’t use picture or image name in your alt property.
Not Good
<img src="hello.png" />
Good
<img src="hello.png" alt="This is hero image" />
Understanding CSS Attribute SelectorsCSS

Understanding CSS Attribute SelectorsCSS
In HTML and CSS, an attribute selector is used to select any element with a specific attribute or value. This is a great way to style HTML elements by grouping them based on some specific features, and the feature selector will select elements with similar elements.
In CSS LifeStyle Example: We know that styling HTML elements with their tag names, class names, ID names, etc. This all will apply the changes to all tags or all classes or all ID names within the page. But if I have a situation where I want to apply styles to a tag name but only a few of them we just name their attribute in the indexing bracket. Therefore that it can only apply those changes to matching tag name and attribute name matching elements.
Here are 7 CSS Attribute Selector Syntax:
- [attribute]
- [attribute=value]
- [attribute~=value]
- [attribute|=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
1) [attribute] Selector only used to select HTML elements with the required attribute.
// This will color the tag with a title attribute.
a[title] {
color: yellow;
}
<a href=”” title=””>
2) [attribute=value] Selector used to select HTML elements with required attribute and value.
// This is used to select HTML elements with the required target and _blank.
a[target=”_blank”] {
color: yellow;
}
<a href=”” target=”_blank”>
3) [attribute~=”value”] Selector used to select HTML elements with required attribute value contains a given word anywhere in the selector.
// This will color the tag with title attribute value as a para word.
[title~=para] {
color: yellow;
}
<p title=”hello_para”/>
<p title=”_blank_para”>
4) [attribute|=”value”] Selector used to select HTML elements whose attribute value starting with specified value.
//This will color the tag with class attribute value as starting with the specified value
.
[class!=mango] {
color: blue;
}
<p class=”mango_yellow”/>
<p class=”” title=”mango_red”>
5) [attribute^=”value”] Selector used to select HTML elements whose attribute value begins with the specified value.
// This will color the tag with class attribute value as start with the specified string
.
[class!=”there”] {
color: blue;
}
<p class=”there_yellow” />
<p class=”” title=”there_red” />
6) [attribute$=”value”] Selector used to select HTML elements whose attribute value ends with the specified value.
//This will color the tag with class attribute value as ends with the hello string
.
[class$=”hello”] {
color: blue;
}
<p class=”hi_there_hello” />
<p class=”I_am_hello” />
7) *[attribute=”value”] Selector** used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.
//This will color the tag with class attribute contains specified value anywhere
.
[class*=”am”] {
color: blue;
}
<p class=”gaming”/>
<p class=”games”/>

This blog gives information and different elements of the meta tag.
A meta
is a type of HTML tag.
meta
is the only exit in HTML5. They are usually on the "head" of the page.
It provides search engines with information about a website page. Metadata will not be displayed on the page, but the machine is parsable.
The meta
element is used to specify page description, keywords, author, and other metadata.
HTML introduced a method to let web designers take control over the viewport (the user's visible area of a web page) through the meta
tag.
Note: Metadata is always passing as name/value pairs.
meta keywords
Define keywords for search engines
<meta name="keywords" content="HTML5 meta tag, meta tag important for SEO, meta description, meta keywords, meta author, meta title">
meta description
Define a description of your webpage.
Description Meta tags are coming up that contain web passage information. The description meta tag is the most important tag, your application will be ranked on your page by search engines. The description has relationships between 150 and 160 characters
<meta name="description" content="Meta tag provides search engines with information about a website page.">
Author Name
Author attribute specifies the author of the webpage.
<meta name="author" content="Payal Pansuriya">
http-equiv attribute
HTML meta refresh tag refreshes the page as you mention the time in the content.
<meta http-equiv="refresh" content="10">