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…
- 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
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
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.