Ashwin Goel

What is React

React is a modular Javascript library created by Facebook which helps to make web apps fast and efficient with minimal coding. In this blog, we will make a simple React application that can be used to compare different products. This is what our final application will look like:

Why React

React comes with a wide range of advantages and some of them are as follows:

Easy to learn and easy to use React comes with a good supply of documentation and tutorials. Anyone who does JavaScript can easily understand React and start using it in just a few days.

Reusable components React allows a developer to break the app into smaller components that can be reused later hence minimizing the codebase. We will understand more about components in the next section.

Use of virtual DOM DOM manipulation is one of the most expensive tasks for any framework, especially when the application is big. React solves this issue by using a Virtual DOM, which is basically a lightweight copy of the Real DOM. It is only an in-memory representation and is not rendered on the actual screen. Instead of rendering the whole DOM again, React compares the changes in Virtual DOM and then renders it in the Real DOM accordingly.

Easy to write JSX JSX is just a combination of HTML and Javascript. It makes coding a lot easier and also helps in preventing injection attacks like XSS.

Some Basic Concepts

Before diving a little deeper, let’s understand some basic concepts that will be needed to proceed further.

Component

A component is a building block of every React app; therefore, a group of components makes a React app. In the image below, you can see how a simple web page is made using different components.

Props

Props are a way of making components dynamic by passing properties/data down from one component to another. They are immutable, i.e they cannot be changed. It is simply passing some information by the parent component to the child component.

State

State is a variable in every Class Component which has the capability to store information dynamically. It is similar to a prop apart from the fact that it is private and fully controlled by the component.

We’ll discuss about this more in the next section.

JSX

Precisely JSX is an XML/HTML like syntax. It adds XML/HTML syntax to Javascript.

Types of Components

Functional components(Stateless)

These components are purely presentational(No Functionality, Only output UI items) and can simply be represented by a function. It doesn’t have a state.
```
 const Greeting = () => <h1>Hi, I’m a dumb component!</h1>;
```

Class Components(Stateful)

These components are implemented using a class and have the capability to apply logics, hold state and render accordingly.

 class Greeting extends React.Component {
     render(){
         return <h1>Hi, I’m a smart component!</h1>;
     }
 }

Installation

A GitHub repository is already created which has a basic React app and some images which we will require during the making of our first react app. You can do the installation in two ways: by using the GitHub repository or through a fresh install.

1. Using GitHub Repository

You can simply clone the GitHub repo:

git clone https://github.com/goelashwin36/react-workshop-start.git

Open cmd/terminal and move into the cloned GitHub repository.

Docker

Build the Dockerfile
```
docker build -t reactapp:v1
```

Run Docker Image

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm reactapp:v1

Without Docker

For this, you need to have npm installed. If you have it, skip the first step. Download and install it from the official website.
Install all the node modules necessary to run the application:
```
npm install
```
Start the React server
```
npm start
```

2. Fresh Install

You would need to have npm for this step. Download and install it from the official website.
Create-react-app: 2. Create-react-app: Create React App is an officially supported way to create single-page React applications. It’s one of the NPM packages which generates a basic React app. Configuring a React App manually is a tedious task. If you’re still interested in manual installation, follow these instructions.
```
# Generates a sample react app
npx create-react-app <app-name>
```

Reactstrap: NPM library which is like Bootstrap for React. It makes the app look modular and makes it responsive.

# Installing reactstrap
# Using cmd/terminal, move into the react app created from the above step.
npm install --save bootstrap
npm install --save reactstrap react react-dom

In the src directory, create a folder named assets and in that create another folder named images. Add any five images, named 1.jpg, 2.jpg … 5.jpg.

Note that VS code is one of the most powerful and lightweight source code editors and is available for Windows, macOS, and Linux. Download it from the official website.

Building the Application

The time has come when we’re ready with the basic knowledge and can dive into the implementation.

It’s always a good practice to add all the components in the components folder in the src directory.

Open the project in VSCode.
Add a folder components in the src directory.
Create a file products.js in the components folder. The directory should look like this:

|node_modules
|public
|src
  |assets
    |images
      |1.jpg
      ...
      |5.jpg
  |components
    |products.js
  |App.css
  |App.js
  |App.test.js
  |index.css
  |serviceWorker.js  
|Dockerfile
|package.json
|README.md

The basic structure of a class based component looks like this: Copy this and paste it into the products.js file.

// Import statements comes here.
import React, { Component } from 'react';

// You need to extend the functionality of `Component` to the class created.
class className extends Component {
    constructor() {
        super();

// A state can hold anything dynamically. For example here randomVar is any    variable.
        this.state = {
            randomVar: ""
            }
        }
// This function renders a component
    render() {

        // Whatever is returned is rendered
        return (
            <div>
                <p>Hello World!</p>
            </div>
        )
    }
}

export default className;

Now we have created a component which prints Hello World!. To make sure this component is rendered, open app.js file in src directory. Copy this code and paste it there after deleting the previous code.
```
import React from 'react';
import './App.css';
import Products from './components/products';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <Products />
    </div>
  );
}

export default App;
```
Here we are just importing the Products as a component from the products.js file and rendering it using <Products />.
Let’s test the app. In the terminal, navigate to app directory and type yarn start. Open http://localhost:3000

Let’s start editing products.js file.

In the state variable add this json:

this.state = {
        products: [{ "name": "KTM Duke", "img": "1.jpg", "id": 1, "price": "2 lakh", "engine": "299 cc" },
        { "name": "KTM RC", "img": "2.jpg", "id": 2, "price": "2.2 lakh", "engine": "299 cc" },
        { "name": "Ninja", "img": "3.jpg", "id": 3, "price": "3.7 lakh", "engine": "350 cc" },
        { "name": "BMW S", "img": "4.jpg", "id": 4, "price": "6.8 lakh", "engine": "800 cc" },
        { "name": "Hayabusa", "img": "5.jpg", "id": 5, "price": "9.2 lakh", "engine": "1340 cc" },
        ],
        compare: {
          // The arr variable stores the id of selected components
            arr: []
        }
}

Let’s make a simple Reactstrap component.

Add import statement in the starting to import Reactstrap components.

import { Table, Card, Button, CardTitle, CardText, Row, Col, CardImg } from 'reactstrap';

Inside the return statement add this:

<Row>
     <Col md="2" lg="2">
          <Card body outline engine="primary">
            <img height="120px" width="240px" src={require("../assets/images/1.jpg")} />
             <CardTitle>Title</CardTitle>
              <Button type="button">Button</Button>
          </Card>
     </Col>
</Row>

Now, lets fetch the details from the state variable and re build the `Reactstrap component

To write a js code inside html elements use {} brackets.

<Row>
 {this.state.products.map((product, index) => (
     <Col key={product.id}  md="2" lg="2">
         <Card body outline engine="primary">
             <img height="120px" width="240px" src={require("../assets/images/" + product.img)}/>
             <CardTitle>{product.name}</CardTitle>
             <Button type="button" id={product.id} onClick={this.handleClick}>Button</Button>
         </Card>
     </Col>
 ))}

</Row>

We need to define the handleClick function. Before that, We need to bind the handleClick function to the class because we want to access the state variable inside this function.

To do this add this.handleClick = this.handleClick.bind(this); after the state variable is declared.
Outside the constructor let’s define the function now.

// e is the event. For example here the event is `click`. This variable has some information like: name, id etc. of the component which fired it.
handleClick(e) {
     // Creating a duplicate of arr variable of state
     let temparr = this.state.compare.arr;
     // e.target.id returns the id of the button which fired the event.
     //This helps us in identifying the component
     let id = temparr.indexOf(e.target.id)
     //Checking if the component is already present in the arr variable or not
     if (id != -1) {
       //If present then remove it
         temparr.splice(id, 1)
     }
     else {
       //else push the id to the temparr
         temparr.push(e.target.id)
     }
     //setState function helps in changing the state. It can't be done manually
     this.setState({ compare: { arr: temparr } });
 }

The last thing left is to make the compare table.

For that we have the id of all the items to be compared in the compare.arr in the state. We need a way to figure out how to render.

So, we’ll iterate in the compare.arr and then create a new array: temp which has the objects which we have to compare. It looks similar to products array.

let temparr = this.state.compare.arr

let temp = []  // Array of objects which we need to compare
// Iterating in temparr
for (var i = 0; i < temparr.length; i++) {
  // x is the object from `this.state.products` which has the required id
    let x = this.state.products.find(prod => prod.id == temparr[i]);
    temp.push(x)
    }

Create the final Table which takes values from the temp variable above and maps it to make a table exactly the same way we made the card.

Place the table just after the Card Component.

<Table>
 <thead>
     <th width="33.33%">Name</th>
     <th width="33.33%">Price</th>
     <th width="33.33%">Engine</th>
 </thead>
 {temp.map((product) => (
     <tbody>
         <tr>
             <td width="33.33%">{product.name}</td>
             <td width="33.33%">{product.price}</td>
             <td width="33.33%">{product.engine}</td>
         </tr>
     </tbody>
 ))}
 </Table>

And now our app is complete. Save and refresh the browser.

The final products.js file looks like this:

import React, { Component } from 'react';

import { Table, Card, Button, CardTitle, CardText, Row, Col, CardImg } from 'reactstrap';

class Product extends Component {
    constructor() {
        super();

        this.state = {
            products: [{ "name": "KTM Duke", "img": "1.jpg", "id": 1, "price": "2 lakh", "engine": "299 cc" },
            { "name": "KTM RC", "img": "2.jpg", "id": 2, "price": "2.2 lakh", "engine": "299 cc" },
            { "name": "Ninja", "img": "3.jpg", "id": 3, "price": "3.7 lakh", "engine": "350 cc" },
            { "name": "BMW S", "img": "4.jpg", "id": 4, "price": "6.8 lakh", "engine": "800 cc" },
            { "name": "Hayabusa", "img": "5.jpg", "id": 5, "price": "9.2 lakh", "engine": "1340 cc" }
            ],
            compare: {
                arr: []
            }
        }
        this.handleClick = this.handleClick.bind(this);


    }
    handleClick(e) {
        let arrnew = this.state.compare.arr;
        let temp = arrnew.indexOf(e.target.id)
        if (temp != -1) {
            arrnew.splice(temp, 1)
        }
        else {
            arrnew.push(e.target.id)
        }
        // console.log(event)
        this.setState({ compare: { arr: arrnew } });
    }
    render() {

        let temparr = this.state.compare.arr
        let temp = []
        let Compare;
        for (var i = 0; i < temparr.length; i++) {
            let x = this.state.products.find(prod => prod.id == temparr[i]);
            temp.push(x)
        }

        return (
            <div>
                <Row>
                    {this.state.products.map((product, index) => (
                        <Col key={product.id}>
                            <Card body outline engine="primary">
                                <img height="120px" width="240px" src={require("../assets/images/" + product.img)} alt={product.name} />
                                <CardTitle>{product.name}</CardTitle>
                                <Button type="button" id={product.id} onClick={this.handleClick}>{(this.state.compare.arr.indexOf(product.id) < 0) ? "Compare" : "Remove"}</Button>
                            </Card>
                        </Col>
                    ))}
                </Row>

                <Table>
                    <thead>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Engine</th>
                    </thead>
                    {temp.map((product) => (
                        <tbody>
                            <tr>
                                <td>{product.name}</td>
                                <td>{product.price}</td>
                                <td>{product.engine}</td>
                            </tr>

                        </tbody>

                    ))}
                </Table>

            </div >
        )
    }
}

export default Product;

Kudos! You just created your first react app.

The final application should look like this: https://github.com/goelashwin36/react-workshop-final.

What We Learned

What React is, and its advantages.
Some basic concepts of React, including methodology, state, components, props, JSX.
Type ofcomponentsand it’s usage.
Usage of state variable.
How to use JSX and render HTML based on logics implemented using js.
Using Reactstrap to create modular and responsive components.