To make code easy to read and maintain, we should follow some best practices.
In this article, we’ll look at some best practices we should follow to make everyone’s lives easier.
One Function Type for Function Components
We can stick with one function type for function components.
We can either write a regular or an arrow function.
For instance, we can write:
const Foo = function (props) {
return <div>{props.content}</div>;
};
or:
const Foo = (props) => {
return <div>{props.content}</div>;
};
Arrow functions are slightly shorter.
So we may want to just use that for all components.
Boolean Attributes Notation in JSX
If we have a boolean prop and we want to set it to true , we don’t have to write out the value.
For instance:
const Foo = <Bar personal />;
is the same as:
const Foo = <Bar personal={true} />;
We can just stick with the short way.
Spaces Inside of Curly Braces in JSX Attributes and Expressions
We can specify spaces in JSX attributes and expressions explicitly.
For instance, we can write:
<div>
hello
{' '}
<a>world</a>
</div>
We put the space string in curly braces to make it explicit.
Closing Bracket Location in JSX
We can put closing brackets in a logical location with our JSX code.
For instance, we can write:
<Greeting firstName="jane" lastName="jones" />;
or:
<Greeting
firstName="jane"
lastName="jones"
/>;
They’re both aligned logically.
Closing Tag Location in JSX
We should put closing tags in a location that makes it neat.
For instance, we can write:
<Greeting>
james
</Greeting>
or:
<Greeting>james</Greeting>
to make it neat.
No Unnecessary Curly Braces in JSX Props and/or Children
We don’t need curly braces for string props on children.
For instance, the braces are redundant in the code below:
<Greeting>{'hello'}</Greeting>;
<Greeting prop={'hello'} attr={"foo"} />;
We can clean them up by writing:
<Greeting>hello</Greeting>;
<Greeting prop='hello' attr='foo' />;
Linebreaks in Curly Braces in JSX Attributes and Expressions
We should write curly braces in a neat manner.
For example, we can write:
<div>
{ bar }
</div>
or:
<div>
{
bar
}
</div>
They’re both symmetrical.
Spaces Inside of Curly Braces in JSX Attributes and Expressions
We should have an even amount of spaces at each end of the expression.
For instance, instead of writing:
<Greeting name={ firstname} />;
<Greeting name={firstname } />;
We write:
<Greeting name={firstname} />;
Spaces Around Equal Signs in JSX Attributes
We don’t need spaces around the equal signs in JSX attributes.
For instance, we can write:
<Greeting name={firstname} />;
Position of the First Prop
We can put the first prop inline or below the tag name.
For instance, we can write:
<Hello
foo
/>
or:
<Hello foo />
Shorthand or Standard form for React fragments
Fragments are components that don’t render an element and can be used as a wrapper component.
It has a long and short form.
The long-form is <React.Fragment>...</React.Fragment> and the short form is <>...</> .
For instance, we can write:
<React.Fragment><Foo /></React.Fragment>
or:
<><Foo /></>
The long-form can have props and the short form can’t.
Event Handler Naming Conventions in JSX
Event handler prop names should start with on and the function for handling the event should start with handle .
For instance, we can write:
<Foo onChange={this.handleChange} />
or:
<Foo onChange={this.props.onBar} />
The prop names start with on and the handler method starts with handle .
JSX Indentation
We need some indentation in our JSX code.
For instance, we can write:
<App>
<Foo />
</App>
to have 2 spaces for indentation.
It’s easy to read and type.
Props Indentation in JSX
We can use 2 spaces for indenting props as well.
For instance, we can write:
<Greeting
firstName="james"
/>
Add Key Prop to List Items
For React to keep track of list items properly, we need a unique value for each item as the key prop’s value.
This way, React can identify the items properly no matter where it’s located.
For instance, instead of writing:
data.map(x => <Hello>{x.name}</Hello>);
We write:
data.map(x => <Hello key={x.id}>{x.name}</Hello>);
Conclusion
We should remember to add the key prop for list items.
Good spacing and indentation make reading code easier.
We can use strings with spaces to make spaces explicit.
