By | October 2, 2016

React.Js is an emerging programming thing for developers. This is the language which makes hard stuff as easy as easy stuff, but sometime it makes easy stuff as hard as hard stuff, which you do by using simple jQuery or Javasript. Many documentations are available online by using then you can set your environment and can start working with React.JS. but before starting big things you have to know some basics. I learnt some react.JS. sharing my points:

  • First thing you have to be clear, 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. So always keep this thing in mind otherwise 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 you code to the other developers. So always make your components as small as possible.

Example:

screen-shot-2016-10-02-at-2-47-04-pm

Here I have created a carousal for my Testimonial Section. Simple and small component. <DIV> with only one rendering element – <Slider>.

 

  • Third point is, we should write functional components. There were two types of defining react components :
    • Using ES6 Class:screen-shot-2016-10-02-at-2-36-19-pm
  • Using React.createClass():

screen-shot-2016-10-02-at-2-36-12-pm

But now new update React 0.14 has new ways to define the components:

screen-shot-2016-10-02-at-2-36-26-pm

  • Next most Important thing is we should always use At the time of development when you are a required Prop, It will show an error and which will benefit to you, Catches bugs by preventing silly mistakes. Use of isRequired makes you free from bugs like undefined OR null.

ProTykes look like this :

screen-shot-2016-10-02-at-2-29-29-pm

  • The main and only react specific thing is JSX. JSX is a no-brainer over manually calling createElement. Use of this gives you an disadvantage – it will add some amount of build time complexity.

But this will be solvable usinf 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, and NPM for package management, and we’re now fully JavaScript buzzword compliant 🙂

  • React DEV tools are awesome. We can set up hot module replacement with webpack, so that our page updates as soon as we save our code – no browser refresh required.
  • As in above points I have discussed about ‘V’- views, so the question is where we’ll put our state and logic? So the Answer is here : We all know about Flux ?

Flux is a style for designing web applications. So for the same thing here we’ll use Redux.JS.

You can know more about Flus: https://facebook.github.io/flux/

And Abour Redux.JS: http://redux.js.org/

So I how this will give you a head start on React. Follow the rules/ ricks and tips and create your React application.  🙂

One Reply to “Some Basics React.js beginner should know”

  1. Pingback: Some Basics React.js beginner should know – dailycodebook – ReactJS News

Leave a Reply

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