Today we are going to see best practices for React JS developer
- Passing a boolean variables.
- Do not define a function within a render
- Naming of the components
- Use of the Ternary Operators
- 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
