React And Redux Essentials - Part One

Introduction

This series will allow you to learn ReactJS and Redux thoroughly in a steady manner.

It will cover the following things,

• Definition – Brief Concepts
• Implementation - Create a react sample app
• Implementation - How to store and access state
• Implementation – Call one component from other

Definition – Brief Concepts

What is React?

It's a component-based library which gets used to develop interactive UI.

It is currently one of the most popular JavaScript front-end libraries along with a large community supporting it.

Why React?

Below are the features which make ReactJS more prominent and useful.

Virtual DOM

1. Like actual DOM, virtual DOM is also a node tree that provides the elements and their attributes as objects and their properties.
2. Render function creates a node tree out of the React components.
3. Then, it updates the tree in reply to the changes done in data model caused by either by the user or by the system.

Easy to test

React views are like functions of the state so we easily manipulate the state of the component and then pass to view to check the output which makes it very to easy to test and debug.

Data-Binding

• It follows one-way data binding.
• The major benefit of one-way data binding is that throughout the application the data flows in a single direction which gives us better control.
• Here, application’s state is contained in specific stores which therefore makes components loosely coupled.
• It allows our application more flexibility, leading to increased efficiency.

Learning Curve

Easy to learn as it requires the knowledge of HTML and JavaScript only

Implementation – Create a react sample app

Here, we will create a react sample app using the following commands.

Example –

npx create-react-app my-app
cd my-app
npm install
npm start

Output

 

 

Implementation – Life Cycle – Important Method Only

Here, we will not talk about the whole life cycle but only the most important part of it; i.e., ComponentDidMount () – this is called after the page loads, for example, if we need to change the page title, we can use this, use document.title = "" within this method

For this, we would use the existing app created in step-1 and replace this code in app.js file.

Example

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
   componentDidMount() {
   document.title = "Gourav"
   }
render() {
   return (<div><h1>Gourav-1</h1></div>);
   }
}
export default App;Copy-paste code here to remove the line numbers.

Output

Implementation – How to store and access state

If we make the state in the app, then it’s called stateful component.

Here, we will create a component, ‘App’, and create a state with the dummy data and see the usage of state; i.e., storing and accessing the state.

Example

Create a state in the component and access it within the render method,

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
   constructor() {
      super();
      this.state = {
      data: [
      {
         id: "1",
         Name: "Gourav"
      },
   {
      id: "2",
      Name: "Gourav-2"
   }
   ]
};
}
render() {
   return (
      <div>
         <table border={1}>
            <tbody>
               {this.state.data.map((student, i) => (
                  <tr>
                     <td>{student.id}</td>
                     <td>{student.Name}</td>
                  </tr>
               ))}
            </tbody>
         </table>
      </div>
      );
   }
}
export default App;

Output

 

Implementation – Call one component from other

Here, we will create a couple of components – ‘App’ and ‘Header’ and we will call one component ‘Header’ from the other component; i.e., ‘App’

Example 1

Create a ‘Header’ component and call it in the main ‘App’ component,

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
         {
            id: "1",
            Name: "Gourav"
         },
      {
         id: "2",
         Name: "Gourav-2"
      }
      ]
    };
}
render() {
   return (
      <div>
         <Header />
      </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return <div>Header-1111</div>;
      }
   }
export default App;

Output

 

Example 2

Create a ‘Row’ component which will render the rows and pass props in it (skip the concept of props for now) and will call it from the main ‘App’ component under the loop,

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
      constructor() {
      super();
         this.state = {
         data: [
      {
         id: "1",
         Name: "Gourav"
      },
   {
      id: "2",
      Name: "Gourav-2"
   }
]
};
}
   render() {
      return (
         <div>
            <table border={1}>
               <tbody>
                  {this.state.data.map((student, i) => (
                  <Row key={i} data={student} />
                  ))}
               </tbody>
            </table>
         </div>
         );
      }
   }
class Row extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.Name}</td>
         </tr>
         );
      }
   }
export default App;

Output

 

Stay tuned for the next article which will have more concepts of ReactJS.

Happy learning!

Next Part >>>