Create a Web Page Using React
By: Souvik Paul
Tags: Bootstrap, Reactjs, Reactstrap, Nodejs, Create React App

In this article, we’ll create a simple web page using React library, which will display the information about few famous places of India.

The final look of this mini project is shown in the following video.

Before going into the project part, let’s understand the basics of React.

What is React?

React is an open-source, reusable component-based, front-end JavaScript library used for building interactive UIs.

It was developed at Facebook in 2011.

In an MVC architecture, React is the View, which is responsible for how the application looks and feels.

React uses declarative approach of programming which makes the code more predictable and easier to debug.

Now, let’s understand the meanings of declarative approach and imperative approach of programming.

In imperative approach, the application designer clearly specifies how the work needs to be accomplished or how the application needs to be executed.

Whereas, in declarative approach, the application designer simply specifies what needs to be accomplished and leaves it to the framework to decide how the work is going to be accomplished.

Note — We have to remember that React is not a framework, rather its a library which uses declarative approach of programming.

What is the need of front-end JavaScript libraries / frameworks, if we have HTML, CSS, JavaScript, Bootstrap etc.?

When we need the complex manipulation of the DOM. especially by fetching data from the server and then update the DOM, it becomes very complicated using simple front-end tools like HTML, CSS, JavaScript, Bootstrap etc.

This is where JavaScript libraries / frameworks outshines.

Features of React

JSX — JavaScript Syntax Extension — JSX is a syntax extension to JavaScript. In React, it is used to describe how the UI should look like. With the help of JSX, we can write HTML code in the same file that contains JavaScript code.

— JSX is a syntax extension to JavaScript. In React, it is used to describe how the UI should look like. With the help of JSX, we can write HTML code in the same file that contains JavaScript code. Virtual DOM — React creates a virtual DOM (or VDOM) which is the exact copy of the real DOM, but it is lightweight. Manipulating real DOM is much slower than manipulating the VDOM. For example — when the state of an object changes, i.e., when we render a JSX element, every single VDOM object gets updated. This process is very quick as compared to updating all the objects in the real DOM. Once the VDOM gets updated, React compares the updated VDOM with the VDOM snapshot that was taken right before the update. By comparing them, React figures out exactly which VDOM object has been changed. Finally, React updates only those objects in the Real DOM.

React Components, State and Props

Components

Components are the building blocks of react application, which returns a set of react elements that should appear on screen.

Components are of two types —

Class component — The class component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives our component access to React.Component's functions. The component also requires a render() method, this method returns HTML. An example of class component is given below —

If there is a constructor() function in our component, this function will be called when the component gets initiated.

The constructor function is where we initiate the component’s properties.

In React, component properties should be kept in an object called state .

The constructor function is also where we honor the inheritance of the parent component by including the super() statement, which executes the parent component's constructor function, and our component has access to all the functions of the parent component ( React.Component ).

2. Function component — A Function component also returns HTML, and behaves pretty much the same way as a Class component, but Class components have some additions. An example of function component is given below —

State

React components has a built-in state object. The state object is where we store property values that belongs to the component. When the state object changes, the component re-renders.

The state object is initialized in the constructor and to change a value in the state object, we use the this.setState() method. When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

Props

Props are the arguments passed to React components via HTML attributes. If our component has a constructor function, then props should always be passed to the constructor and also to the React.Component via the super() method.

Now, let’s dive into the project.

Initial setup

First of all, we have make sure that Node.js is installed in our system. If so, we’ll create a directory with name React_Projects and then, we’ll open the terminal and navigate into that directory. There, we’ll run the following command —

npx create-react-app myapp

The above command will set up our development environment so that we can use the latest JavaScript features, provides a nice developer experience, and optimizes our app for production. We’ll need to have Node >= 8.10 and npm >= 5.6 on our machine.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so we can use it with any backend we want. Under the hood, it uses Babel and webpack, but we don’t need to know anything about them.

When we’re ready to deploy to production, running npm run build will create an optimized build of our app in the build folder.

After running the above command, the directory structure will be -

And after customizing it, the final directory structure will look like the following —

Procedure

Step 1: First of all, we’ll create an assests directory inside public . And in assets directory, we’ll create another directory images , where we’ll keep nine images of same dimensions.

Step 2: Then we’ll install Bootstrap 4 using the following command.

npm install bootstrap@4.0.0 --save

Then, we’ll install reactstrap and react-popper using the command —

npm install reactstrap@5.0.0 react-popper@0.9.2

The above two dependencies will enable us to make use of react component-based re-implementation of the various bootstrap JavaScript components.

Step 3: Now, we’ll create a components directory inside src , which will contain three files — greet.js, media.css and menu.js. The codes of these files are given below —

Step 4: Now, we’ll create another folder shared inside src , where we have only one file — places.js.

Step 5: Now, we’ll open App.js file and modify it as follows —

And we’ll also modify the App.css file as follows —

Step 6: Now, we’ll modify the index.js file as follows —

Step 6: At last, we’ll start the development server using command — npm start . It will automatically open a webpage on the system’s default browser rendered by localhost:3000 .

References