Html Posts

There are a few reasons why developers choose ReactJS and they are :-

1. JavaScript XML or JSX
2. React use Virtual DOM
3. ReactJs Props
4. One-Way Data Binding
5. Quick Rendering
6. SEO Friendly
7. 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.

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

6. Object Destructuring.
7. When pass value in props
8. Tags close it self.
9. Do not use underscore in any method name.
10. 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" />

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">