Things that every React Developer should know

I have started learning React JS around 6 months before and i love learning it day by day. React JS is a library which is used to build UI.In React JS is that, you build your application UI as a combination of Components. It provides code maintainability and high flexibility to design as whole UI consists of very small components.  Also React JS use virtual DOM to re-render components when any change happen in the Component and it’s blazing fast. In this article i have included concepts which i think React Developer should know.

This post assumes that you are aware of basis of React JS. If you are not familiar with words like Components,Props and states then i would highly suggest you to go through official Getting started and Tutorial for React JS. I am going to discuss very basic things in this blog post. So if you are highly experience React JS Developer you can directly jump over to another article.

  1. It’s Just a view Library : React JS is only a library developed by Facebook developers. It should not be compared with any Framework like Angular JS, Ember JS etc which provides full MVC framework. React JS only provide View i.e V among the MVC pattern.
  2. Every component should be small enough: components are building block in React Js. components in React JS should be small enough so that it contains only single entity. As we can create as many as Components we want and also parent and children components have very seamless integration so it should be created only to fulfil only one function at a time
  3. Make stateless Component whenever possible: React JS allow you to create two types of components i.e Stateless and state full Components. Try to make stateless components only whenever possible because it doesn’t have to keep tracks of all the binding that are there.

  1.  Use Redux : As i already told that it only provides view layer of MVC pattern so in order to work with Full application where i will put my Logic and States? As you already know that Flux is a Pattern/Architecture for building web application mostly using React as UI layer. There are various Framework available based on Flux, but the best one available is Redux.
  2. While building Components always use propTypes: It is highly recommended to use propTypes with all the components. propTypes offers a very easy way to add a bit more type safety to our components.

When in development (not production), if any component is not given a required prop, or is given the wrong type for one of its props, then React will log an error to let you know. This has several benefits:

  • It can catch bugs early, by preventing silly mistakes
  • If you use isRequired, then you don’t need to check for undefined or null as often
  • It acts as documentation, saving readers from having to search through a component to find all the props that it needs

6. Use Shallow Rendering : Testing a React Js component is still not very easy and smooth but it’s getting better day by day. It’s still a evolving area in javaScript development. The best approach that i would be suggesting to test React JS components is Shallow Rendering.

Shallow rendering is nice, because it allows you to render a single component completely, but without delving into any of its child components to render those. Instead, the resulting object will tell you things like the type and props of the children. This gives us good isolation, allowing testing of a single component at a time.

7. Use ES6, JSX, Babel and webpack: JSX is only react specific thing here. It’s just add little bit more complexity which is easily solved by popular JavaScript transpiler Babel. You would surely like to take advantage of new features of ES6/ EcmaScript 2015. Webpack is very convenient Task manager use with React JS.

7. Use React Dev tool : It is highly recommended to all of you to use React Dev tool. You can download it as a Chrome Extension. It’s will show you the actual React specific DOM structure and also shows you the live actions.

Note : If you are intrested in above topics in detail, feel free to explore those on your own.


Leave a Reply

Your email address will not be published. Required fields are marked *