React Tutorial: Complete Guide Step by Step

5
93
ReactJS Tutorial For Beginners 2017 From Scratch

There are many JavaScript Frameworks are there, which you can include in your next big project. Some folks are also stuck with jQuery, which is not wrong. If your project has any requirement that leaves you to use the Latest JS Frameworks, you have to use it; otherwise, there is no need in web development to get things more complicated.

We focus on React, a wildly popular JavaScript library for web applications. It is the frontend framework to build user interfaces. So let us get started Learning React.

Learning Everything In Web Development Is Today’s Necessity. But, unfortunately, 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 need any Front End Framework or library. First, analyze the requirement of any web application, and if the application seems to be very large, you decide to go to Frontend Framework or library.
If Facebook is using it, 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 should I learn React?

If you find your application needs React.js, 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. At the same time, Angular is the MVC Framework. So, React.js is dependent upon the state of the applications. The state is the actual Data.
  2. If you are using React with Redux, you will understand the power of Functional Programming Language. So state modifications are done imminently 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, you need to only worry about state changes and nothing else on the Frontend side, so if you have done programming in JavaScript, especially in the ES6 version, 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 use the create-react-app tool for creating a React.js application.

React Tutorial

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

If you follow this article, you should have Node.js installed locally or on 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 React 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 MAC, put the sudo before the above command.

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

create-react-app reactjs
Do not write the project name in capital or any word in the capital; otherwise, NPM will not initiate the process, and the project will not create.

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

npm start or yarn start

The 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 handled 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 to code elegantly.

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

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

// App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        React Tutorial
      </div>
    );
  }
}

export default App;
Every component must be wrapped with one parent element. It is a div tag in most cases, but it can be anything.

Now, when you save the above code gets recompiled automatically and restart the server, and the page will also automatically refresh, and changes are showing clearly in the browser.

So that is the power of the create-react-app tool. If you violate the ES6 rules, it will also show you the warning to the console or terminal.

If you assign an HTML element to a particular class, please note that the attribute class name is replaced by className in React.js because React.js reserves the class keyword.

Step 3: Creating our component.

We can create the React component in Two ways.

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

We are going to use the Functional Approach First.

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

// Dividend.js

import React from 'react';

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

Here, I have used the ES6 arrow function syntax. Therefore, this file returns the Dividend component.

If you are using a Functional approach, your function or component name must start with a 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, the App.js component is rendering in the browser, but we need to change it to 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();

If you save the file and switch to the browser, you will see the Dividend Component.

So, our component correctly renders. So, this is the functional approach. But in real-world scenarios, this component is less suitable, and the 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, we indeed do, and finally, our only one component will render.

Generally, we will create one folder inside the src directory if we have many components. Still, I am not creating any of this and just putting all the components inside the src directory. So create one component called DividendRow.js inside the 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;

I have rendered the table rows component here, but we have not created the table yet. So, 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 passed that list as property or props to the Table Row component and used it. I have already included the DividendRow.js component and used it inside another component called Dividend.js. Finally, the Dividend component will be exported and rendered in the browser.

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

So this is a really, very basic example of React Tutorial. Please check out my other post and stay tuned for my blog if you want to learn more. There will be the advanced topic of React that will post soon.

That’s it.

5 Comments

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.