Some Basics React.js Beginners Should Know

React.Js is an emerging programming concept for developers. This is the language, which makes difficult things easy, but sometimes it make easy things difficult, which happens by using simple jQuery or JavaScript. Many documentations are available online, using which you can set your environment and can start working with React.JS but before starting big things, you have to know some basics. I learned some React.JS and am sharing my points, given below-

• 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.
  
  Example
  
  
  

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.
  
  We round things out with Webpack for bundling our code, NPM for package management and we're now fully using JavaScript buzzword compliant :)
  
  
• 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.