ReactJS Tutorial For Beginners From Scratch

ReactJS Tutorial For Beginners 2017 is the course we are covering today. There are many JavaScript Frameworks are there, which you can include in your next big project. Some folks are also stuck with the jQuery, and that is not a bad choice. If your project has any requirement that leaves you to use the Latest JS Frameworks then and then you have to use it otherwise no need in web development to get things more complicated. Today we are focusing on React.js, which is a wildly popular JavaScript library for a web application. It is the front-end framework to build user interfaces. So let us get started Learning ReactJS

Learning Everything In Web Development Is Today’s Necessity. You Can Not Escape It. If You Miss, You Will Soon Be Out Dated.

You do not need to be a sheep follower if, you do not need any Front End Framework or library.  First, analyze the requirement of any web application and if the application seems to be very large then and then you decide to go to Front end Framework or library. If Facebook is using it, then it does not mean we have to use it. Facebook has so many algorithms to manage the data and display it to every user, that is why they are using it.

Why 

Why should I learn ReactJS

If you find your application needs React.js then you use it, but for that, you have extensive knowledge about the framework, and if not then at least basic understanding is necessary. Some developers are learning during the project development face. Here are some honorable reasons to learn React.js.

1. It is only the V or View part of MVC Architecture. While AngularJS is the MVC Framework. So, React.js is depended upon a State of the applications. The state is the actual Data.
2. If you are using React.js with Redux, then you will understand the power of Functional Programming Language. So state modifications are done in an immutable manner and can not change the state of our application directly and also log the application at any given point of time.
3. Once, you are familiar with the JSX syntax then, you need to only worry about state changes and nothing else in the Frontend side, so if you have done programming in JavaScript especially in the ES6 version of it, then it might be easy for you to grasp.

Prerequisites of This Course

1. Beginner’s Guide To Setup ES6 Development Environment. 
2. Beginner’s Guide To Setup ReactJS Environment. 

The second article is optional if you are using create-react-app tool for creating a React.js application.

ReactJS Tutorial For Beginners

Right now, we are not building React.js environment from scratch. We are using one tool called create-react-app to set up the boilerplate. You can find more information in the following Github Link.

• https://github.com/facebookincubator/create-react-app

If you are following this article then, you should have Node.js installed in your local or in your server. So you have access to the NPM and also Yarn. If you are not familiar with Yarn, then stick with NPM.

Step 1: Install the ReactJS Tutorial For Beginners Project.

npm install -g create-react-app

You need to install this dependency as a global so, your terminal must be in Administrator Mode if you are using Windows or in MAC put the sudo before above command.

Then, type the following command to create an application folder.

create-react-app reactjs2017

Do not write project name in capital or any word in capital otherwise NPM will not initiate the process and project will not create.

Go to the project folder by cd command and start the development server by either of the following code.

npm start or yarn start

Development server will start at this URL: http://localhost:3000/

You will see like this: Welcome to React

By default, there are so many configurations handle by our application automatically like,

1. Babel
2. Webpack
3. ESLint

We only focus on code and not the dev. environment. So it is straightforward for us just to code elegantly.

Our React.js version is v15.6.1

Step 2: Modify App.js file inside src folder.

Just replace following code with existing code that comes with the project.

// App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        ReactJS 2017 Tutorials
      </div>
    );
  }
}

export default App;

Every component must be wrapped with one parent element. In most cases, it is div tag, but it can be anything.

Now, when you save the above code gets recompiled automatically and restart the server and page will also automatic refresh, and changes are showing clearly in the browser. So that is the power of the create-react-app tool. If you are violating the ES6 rules then also it will show you the warning the console or terminal.

If you are going to assign an HTML element to a particular class, then please note here that the attribute class name is replaced by className in React.js because of React.js reserve the classkeyword.

Step 3: Creating our own component.

We can create React component in Two ways.

1. Functional Approach
2. Class Approach(Object Oriented Approach)

We are going to use Functional Approach First.

Create one file inside src folder called Dividend.js and put the following code in it.

// Dividend.js

import React from 'react';

const Dividend = () => {
  return (
    <div>
      Dividend Component
    </div>
  )
}
export default Dividend;

Here, I have used ES6 arrow function syntax. This file simply returns the Dividend component.

If you are using Functional approach then your function or component name must start with capital letter.

Now, we need to include this component into the src  >>  index.js file to render the changes in the browser.

Right now, our index.js file looks like this.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

By default, App.js component is rendering in the browser, but we need to change it to the Dividend.js

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Dividend from './Dividend';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dividend />, document.getElementById('root'));
registerServiceWorker();

Now, if you will save the file and switch to the browser then you will see Dividend Component.

So, our component properly renders. So, this is the functional approach. But in real world scenario, this component are less suitable and class approach is more suitable.

We are creating the same component in class or object oriented approach.

// Dividend.js
import React, { Component } from 'react';

class Dividend extends Component {
  render() {
    return (
      <div>
        Dividend Component
      </div>
    );
  }
}

export default Dividend;

Step 4: Composing components in one another.

Now, we have one component called Dividend. If we want to include some dividend paying stocks list then, we surely do and finally, our only one component will render.

Generally, if we have lots of components, then we will create one folder inside src directory but, right now I am not creating any of this and just put all the components inside src directory. So create one component called DividendRow.js inside src folder.

// DividendRow.js

import React, { Component } from 'react';

class DividendRow extends Component {
  render() {
    return (
      <tr>
        <td>{this.props.name}</td>
        <td>{this.props.dividendYield}</td>
      </tr>
    );
  }
}

export default DividendRow;

Here, I have rendered the table rows component, but we have not created the table yet, first we need to create it and pass the data to this DividendRow.js component.

// Dividend.js

import React, { Component } from 'react';
import DividendRow from './DividendRow';

class Dividend extends Component {
  constructor(props){
    super(props);
    this.state = {
      lists: [
        {
          name: 'TCS',
          dividendYield: '0.4'
        },
        {
          name: 'Infosys',
          dividendYield: '0.5'
        },
        {
          name: 'HCL',
          dividendYield: '0.6'
        }]
    }
  }
  render() {
    return (
      <table>
        <thead>
            <tr>
            <td>Name</td>
            <td>DividendYield</td>
            </tr>
        </thead>
        <tbody>
          {this.state.lists.map(list => {
            return <DividendRow name={list.name} dividendYield={list.dividendYield} />
          })}
        </tbody>
      </table>
    );
  }
}

export default Dividend;

Here, I have initialized one state called lists and pass that list as a property or props to the Table Row component and use it. I have already included the DividendRow.js component and use it inside another component called Dividend.js. Finally, Dividend component will be exported and render in the browser.

In real time example, the states are either filled with AJAX data. When the data changes according to that components will react. That is why the library is called React.js.

So this is the really very basic example of ReactJS Tutorial 2017. If you want to learn more then please check out my another post and also stay tuned for my blog. There will be the advance topic of React.js will post soon.