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?
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.
Features of React
- 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 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.Componentstatement, 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
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 (
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 —
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.
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 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
Now, let’s dive into the project.
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
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
After running the above command, the directory structure will be -
And after customizing it, the final directory structure will look like the following —
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 email@example.com --save
Then, we’ll install reactstrap and react-popper using the command —
npm install firstname.lastname@example.org email@example.com
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
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