React is a library that helps to create web UIs that has revolutionized the way we think about apps. As a developer its really important to keep your skills updated and know the best practices will help you to develop the application in a clean, understandable and reusable way. Here are the 5 best practices every react developer should know about it.
Make your component as small as possible
The react components are like a function and, you can split a function into many and compose or combine in any way you want, and still achieve the same result.
Splitting your components or make it small helps in reusability of the components which is easy to maintain.
keep your render function small and simple. You can split the render function into several functions in the same component, but if it makes sense try splitting those render function into separate components.
You can keep your styling and layout in a separate component and make it configurable.
Avoid class name and style in your components
If you want your application look consistent avoid using className and styles in your components instead keep the style in a separate component in a configurable way.
Example :
Here is an example showing the success, failure and duplicate messages which need to be shown in different color for the users in green, red and yellow respectively in a form submission like sign up or sign in.
Code
<div className=”notification notification-success”>
Successfully logged a ticket.
</div>
In the above code, notification defines the styling property of the div and notification-success, notification-failure, notification-duplicate are the class names used to differentiate the notification messages in different colors.
Clean Code
<Notification type=’success’>
A good notification
</Notification>
class Notification extends React.Component {
render() {
const className = `notification ${this.props.type}`;
return (
<div className={className}>
Successfully logged a ticket.
</div>
)}
}
// CSS
.notification{
background-color: azure;
}
.success{
color: green;
}
.failure{
color: red;
}
.duplicate{
color: yellow;
}
Make use of extension
ESLint is an open source tool static analysis tool for identifying and reporting on patterns found in ECMAScript/JavaScript code and it uses to check the quality of the code. There are a lot of other tools available for free.
Prettier formater - Code formatting may not be the most important thing but I have seen how it creates problems in large codes. Prettier is very opinionated and does all for you. It works rather well with ES2017, JSX and Flow.
Prop type checking
React has some built-in type checking abilities.
PropTypes exports a range of validators that can be used to make sure the data you receive is valid. In this example, we’re using PropTypes.string. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes is only checked in development mode.
// Code
import PropTypes from 'prop-types';
class Notification extends React.Component {
render() {
const className = `notification ${this.props.type}`;
return (
<div className={className}>
Successfully logged a ticket.
</div>
)}
}
Notification.propTypes = {
type: PropTypes.string.isRequired
};
Use destructuring
ES6 introduced the concept of destructuring, which really is your best friend. Destructuring allows you to “pull apart” properties of an object or elements of an array.
var student = {
name: ’John’,
age: 20,
gender: ’male’
};
//ES6 destructuring
const { name, age, gender } = studnet;