React.js is a library that has been used in the creation of web UIs that have changed the way many people think about applications. It is a one of a kind framework that makes the best interactive applications. It uses reactive, declarative and functional programming in the creation of some of the best applications people are using today. If this is what you have always sought as a web developer, this is a library that will not let you down.
Every front-end app developer has so much to gain from react.js, therefore if it is not one of the tools for front end development you have close to you at all times, you may not be creating some of the best applications. It is a totally new way of doing things with React.js, and it has amazing features that will help you along the way.
As you make this amazing change, you need to learn some of the best practices that will give make using react js. easier and great fun as you create the best apps that you will ever create in year life. Some of the best practices have been discussed here:
a) You Do Not Need className and Style In Your components
If you want to create applications that have a consistent feel and look at all times, you will have to avoid classNames and style in your components. This way, you will not have to style the components needed in order to look the way that you want it to look, which could be a long time hassle. 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 useful in that you can always pass them especially if they do not make any sense and more so if they can break your UI. You will have less trouble with them in the long run.
An Example:
Instead of
<button type=”button” className=”btn btn-primary”>Press me!</button>,
you can have
<Button primary>Press me!</Button>
b) It is easier to create small components with just one mandate
If you want to have a hard time with React.js, you will create big components that will render many things directly. The results of this are usually hard to maintain components. You will also have a hard time whenever you are trying to take advantage of React.js’ optimizations, since you will have to create many elements and take the difference.
Again, such a component with big render methods will be doing quite a bit of work which could slow down the entire process.
What you should do is to split up your components into many little components that will be easy to manage and ones that will work faster.
c) Achieving more in Render
There is much more that you can do in render. Instead of putting so much logic into componentWillReceiveProps for instance or componentWillMount, you can choose to move that logic to render. Again, if what you want is to do preprocessing on props, you can always do that processing in render.
This is a strategy that will help you avoid premature optimizations, avoid bugs and also help you minimize the number of fields in state and props. It can also help you avoid state entirely for the reasons explained below.
d) Avoid State as much as possible
This applies to all programming, including React.js. In as much as you get facilities that allows you to work really well with state in React.js, you should still try as much as you can to avoid it. This is because state will not help you compose very well. The results of the kinds of composition you will make using State are complicated components, component that are convoluted and re-renders that are spurious even when you are using PureRenderMixin.
There are situations where you will need to use state though and in these situations, you will just have to use state when you are sure that it will be encapsulated perfectly by the component.
e) You can use instance properties
Components are supposed to be pure functions of props and in some occasions, a piece of state. However, this should not stop you from using direct instance properties though, becase there is nothing wrong with that. An example: use of this.foo vs this.props.foo. You cannot use them in render though because of the restrictions of PureRenderMixin. They will help when you have a state that will not affect how a particular component renders but one which will determine how a message or event will be dispatched.
f) Try Mixins
Mixins will help you so much in the creation of functionalities that are reusable that you can use in case of multiple components. Good thing about mixins is that they do not override component lifecycle methods; instead, they are called in addition. This means that mixins can do their own setups and clean ups without affecting the host component in any way. They are very useful whenever you want to isolate chunks of functionality that are related to each other.
g) Centralize state
This is meant to make things easy for you in instances when you have a state that is required at that particular moment, one that will not be encapsulated fully and it has to be communicated up to the parent component. What you do in this case is to pull the state out of the hierarchy object into the central state object where it can flow down your components as pure props.
This should mean that your components should always rely primarily on props. This way, you will not have to call setState since your components can easily communicate with a particular central data store either through events, callbacks, streams, callbacks or through direct calling methods.
It is not really hard to fully comprehend React.js and with some of the basic tips at hand and some of the best practices, you will start developing apps like a pro before you know it.
