Best practices for Reactjs

Remember you Do Not Need className and Style In Your components

If we need to an create a applications that have a consistent look and feel at all times, remember you should avoid classNames and style in your components. By doing this , you will not have to style your components. Remember You will also not have to know the default set of styles, which is important if you have to know different styles and how they can be applied. Avoiding classNames and styles will be good and useful. You will have less trouble with them in the long run.
The usual way we write
<button type=”button” className=”btn btn-primary”>Click</button>

you can 
<Button primary>Click me!</Button>

Create Tiny Components That Just Do One Thing

Create small components that render specific parts of your page or add a particular new behavior to your UI. 
You’ll be able to think of each piece individually, and you’ll even be able to benefit from performance optimizations like shouldComponentUpdate in a more fine grainded way, or other lifecycle components. Also, they’ll become more reusable across your application.

Keep your render function small and simple.

Separate your state logic into a component that just handles the state and one or several components that handle the presentation, where the state is passed as a property to the child components.

Are you adding behavior to some component via state like hovering, collapsing, expanding, or making it pop over? Move that behavior into separate components that accept a single children which is a function to render, and sets the state via params to that function, like:
<mousehover>
 {mover => <div>{mover ? “your mouse is on me” : “your mouse is not on me”}</div>}
</mousehover>

These are some of the best practices, you will start developing a react apps like a pro before you know it.

Like what you read? Give Muthu Kumar a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.