React Js Tutorial Startup and Advanced

    React is js library by facebook which is simply awesome for building UI. React is growing day by day and people start using it. One of the biggest advantage of React JS is the virtual DOM. Here Virtual means its behind the scenes for every view so that the reason for React JS performance. So when a view have to rerender something, its render to Virtual DOM and after completion React run its diffing algorithm between actual DOM and virtual DOM, and applies only the changes returned in diffing.

    Let me tell you what I'm trying to explain in this React Tutorial

    • Step 1. React Tutorial for syntax and basics
    • Step 2. React Tutorial for some advanced stuff
    • Step 3. React Tutorial About Flux Architecture
    • Step 4. React Tutorial For A Demo Project

    Initially you think react is difficult and its tricky to learn flux architecture. But please keep in mind what react community says. More you dive into react you will start loving it and that's true.

    Important: First Learn React Then Switch Over to Flux. Flux is bit complete but when you master it its awesome

    Step 1. React Tutorial for syntax and basics:

    React works on the basis of its classes. So to render HTML you need to create a class first which describes what to render. For example:

    var TestComp = React.createClass({
        render: function() {
            return <div>This is my first React Component</div>;

    React.render(new TestComp(), document.body);

    Firstly, we are creating a basic React class, called TestComp. In this class we use single function named render. This function is called when we have to render the HTML in it. You will notice that we have HTML inside this render function. So for this we need JSX Which allows us to write HTML in JavaScript files instead of writing separate template files. And the last line means that we want to render our component inside body tag

    Step 3. React Tutorial About Flux Architecture

    Flux makes easy to maintain data changes in our application. Simply, It removes the burden from component to manage its own state and use a central location for that called as Store in which number of components can share data. Stores helps in the modification or preservation of the data. Advantage of this is that if the data in the Store changes, We know how that change is triggered because store is only place where we can modify data in the application.

    If you have to deal with dynamic data flux will be the first choice for that. Flux is one way data flow architecture. So we will learn about every part step by step