Post by Srdjan Nezic 
October 13, 2021 | 
It is okay for web developers to make mistakes, write “ugly” code, hard for debugging when creating user interfaces. Therefore, every React developer needs to know React best practices to make his code cleaner.
As we know, React.JS is a free, open-source, front-end javascript library created by Facebook for building user interfaces.
Here is a list of some of the most important React practices :
1. Use Fragments
Fragments are important to keep your code clean.
Bad
return (
<div>
<FirstComponent />
<SecondComponent />
<ThirdComponent />
</div>
)Good
return (
<>
<FirstComponent />
<SecondComponent />
<ThirdComponent />
</>
)2. Don’t use JavaScript inside JSX
A common mistake for new React developers, that makes the code much harder for debugging:
Bad
return (
<>
{users.map((user) => (
<a onClick={event => {
console.log(event.target); //bad
}} key={user.id}>{user.name}
</a>
))}
</>
);Good
const onClickHandler = (event) => {
console.log(event.target);
}
return (
<>
{users.map((user) => (
<a onClick={onClickHandler} key={user.id}> {user.name} </a>
))}
</>
);3. Ternary Operators
Ternary operators require fewer code lines and it is much more practical.
Bad
const { role } = user;
if(role === ADMIN) {
return <Admin />
}else{
return <User />
} Good
const { role } = user;
return role === ADMIN ? <Admin /> : <User />4. CSS in JavaScript
Bad
// CSS FILE
.header {
height: 80px;
}
//JSX
return <div className='header'></div>Good
const headerStyle = {
height: "80px"
}
return <div style={headerStyle}></div>5. Template Literals
Keeps your code nice and clean.
Bad
const userDetails = user.name + "'s gender is" + user.gender
return (
<div> {userDetails} </div>
)Good
const userDetails = `${user.name}'s gender is ${user.gender}`
return (
<div> {userDetails} </div>
)6. Naming
For components use PascalCase and camelCase for instances and props
Bad
import accountInfo from './AccountInfo';
const AccountInfo = <AccountInfo />;Good
import AccountInfo from './AccountInfo';
const accountInfo = <AccountInfo />;7. JSX Shorthand
Shorthands keep the code clean and save coding time.
Bad
return (
<Header showLogin={true} />
);Good
return(
<Header showLogin />
)8. Object literals
Makes code more readable and saves coding time.
Bad
const {date} = dates
switch(date){
case "Sunday":
return 0;
case "Monday":
return 1;
case "Tuesday":
return 2;
}Good
const {date} = dates
const components = {
Sunday: 0,
Monday: 1,
Tuesday: 2
};
const Component = components[date];9. Quotes
Use double quotes for JSX attributes and single quotes for all other javascript attributes.
Bad
<Component type='horizontal' />
<Component style={{ height: "20px" }} />
Good
<Component type="horizontal" />
<Component style={{ height: '20px' }} />10. Self-Closing Tags
When the component doesn’t have children, use shorthands.
Bad
<Component></Component>Good
<Component/>Being a programmer is an everyday learning process. Therefore, when you run into some bumps on the road while coding try to look at them as an opportunity to learn. In the end, these are the moments when you grow and develop new skills. Until our next blog also check out our Top 5 VueJs tips for developers and remember to enjoy the process of learning. 🙂
