What do a beginner of React.js should know?

It has been almost 6 months learning and using ReactJS, I do believe that React and React Native will be one of the future tech in the future, and will strongly take the ground of tech.

So, I wrote this post in order to share some points based on my experience for beginners of React…

  1. React is JUST view library

You have to bear in mind that React is not a framework like any MVC framework, it is just a Facebook library helps to render view. So, there is no Model and Controller. If you want, you can combine with other libs. And, React does not have 2 way data binding or Ajax…

2. Always keep your components as small as possible

Every good programmer has to know to keep function/class as small/simple as possible. This will of course be easy to maintain, to test. With React, components will be small, true with principle of ‘Thinking in React’, try to divide components as small as possible in order to reuse and higher performance. How small it should be? Hm… i don’t really sure about this :) Probably, depends on dev team.

This is an example with component to show list of posts

3. Write functional components

There are many ways to write components, you can use React.createClass() or with ES6 or simple with props like this

With big components and need more handles, you should probably use ES6 and React.createClass(). And with components that do not need state, just render from props you should probably use the 3rd way

4. Use less state component

You have to always keep state as simple as possible(stateless component)

Why? Here is some problems…

  • State is difficult for testing
  • State is related to render() views, and need to care about init the state, or state change, or should render() again

State should exist in internal one component with communicate data outside. So, use State when really need, and reveal the “state” of component

5. Use React with Redux

You when learn Redux, probably you hear about Flux, for me, knowing about Flux helps me to pick up Redux faster, but if you do not know about Flux, you do not need to know! It is totally fine to learn Redux without knowing Flux! But the idea of Flux will helps you to know why they have Redux, so just check it out if you are interested :)

React is just View, so it should combines with Redux or Flux or any unidireactional data flow method. You when you get to know Redux, you should go and check one library called Immutable.js, to get the idea of immutable state in Redux

6. ALways use propTypes

It will defines and forces props in react components make the use of components safer

So, why safer? In development environment, if we transfer props which has wrong type, or data or forget to transfer props, React will notice error, and we have to check it, debug it

7. Use JSX, ES6, Babel, Webpack and NPM

This is all React ecosystem. What I do love about React. JSX is xml like syntax extension to ECMAScript , which is a feature of React. With Babel, compile and use ES6 now becomes easy than ever :D. NPM and Webpack helps to bundle and use of libs and packages.

8. Using React and Redux dev tools

Finally, dev tools of React and Redux are so good in using, of course, as the name called, help us in debug and find bugs in app.

React dev tools con inspect the state and props of each component. Redux dev tools is even more interesting. It helps you to see the state of actions, reasons why state is updated, or even back to previous state.

And the coolest thing is about time travel debugging and hot reloading, if you are intested, check out: https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35#.xinaxfwan

There are definitely a lot for beginners, but these are the basics of React for any beginners who want to learn about React. I will end here, and grap coffee to continue with Pro React Book.

Thanks for reading.

Show your support

Clapping shows how much you appreciated Hien Nguyen’s story.