- First thing you have to be clear about is that React.JS is not an MVC Framework or any other kind of framework. React JS is just a library, which renders your views. If you are a MVC guy, you should only have in your mind ‘V’ – Views, nothing else. Thus, always keep this thing in mind, else, you will end-up with your awesome react code.
- Second thing, you have to be clear on your all components. Always make them small. This is simple and easy to understand. Thus, always make your components as small as possible.
Here, I have created a carousel for my Testimonial section, which isa simple and small component. <DIV> can be used with only one rendering element <Slider>.
- We should write the functional components. There are two types to define React components.
- ES6 Class can be used, which is given below-
- React.createClass() is used, which is given below-
Now, new update React 0.14 has new ways to define the components, which are given below-
- Most important thing is we should always use propTypes. At the time of development, when you require a Prop, it will show an error and will benefit you, as it catches bugs by preventing silly mistakes. Use of isRequired makes you free from the bugs like undefined or null.
PropTypes looks, as shown below-
- The main and only React specific thing is JSX. JSX is a no-brainer over manually calling React.createElement. Use of this gives you a disadvantage – it will add some amount of build time complexity.
This will be solvable using Babel.
ES6 features are also important like constants, arrow functions, default arguments, array and object destructuring, spread and rest operators, string interpolation, iterators and generators, a decent module system etc.
- React DEV tools are awesome. We can set up the hot module replacement with Webpack, so that our page updates, as soon as we save our code and no Browser refresh is required.
- In the points mentioned above, I have discussed about 'V’- views, so the question is where will we put our state and logic? Thus, the answer is we all know about Flux.
Flux is a style for designing the Web Applications. Thus, for the same thing, we’ll use Redux.JS.
You can learn more about Flux and about Redux.JS.
Thus, this article tells how this will give you a head start on React. Follow the rules/ tricks, tips and create your React Application.