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

Today we are going to see best practices for React JS developer

1. Passing a boolean variables.
2. Do not define a function within a render
3. Naming of the components
4. Use of the Ternary Operators
5. Don’t Need Curly Braces in string

Passing a boolean variables

Passing boolean variables in to two components.

Not Good

return (
   <Home showTitle={true}/>
); 

Good

return (
   <Home showTitle/>
); 

Do not define a function within a render

Don’t define a function inside render.

Not Good

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>
      Example
    </button>  
)

Good

const submitData = () => dispatch(ACTION_TO_SEND_DATA)
return (
  <button onClick={submitData}>  
    Example 
  </button>  
)

Naming of the components

You can use PascalCase for name of the components and camelCase for name of the instances.

Not Good

import createCard from './CreateCard';
const ReservationItem = <ReservationCard />;

Good

import CreateCard from './CreateCard';
const reservationItem = <ReservationCard />;

Use of the Ternary Operators

Developer how can use ternary operator in React js.

Not Good

const { role } = user;
if(role === 'ADMIN') {
  return <AdminUser />
}else{
  return <NormalUser />
} 

Good

const { role } = user;
return role === 'ADMIN' ? <AdminUser /> : <NormalUser />

Don’t Need Curly Braces in string

When developer passing string props to a children component

Not Good

return(
  <Navbar title={"My Special App"} />
)

Good

return(
<Navbar title="My Special App" />  
)

Hope this helps for React js developer