Tech 3 minutes read

React.JS Best Practices

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.

React best practices

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. :)