Building User Interfaces with React [A How-To Guide]

Building user interfaces is also now possible using a JavaScript library named React. It is a tool that we can use to build UI components. It is especially for creating single-page applications.

Why React?

React is an Open-source JavaScript library.

It allows us to create reusable components.
React is fast, easy and scalable.
React has one-way data binding.
It provides an in-memory data structure cache.
Easy to test.
By using, react we can create large applications that can change the data without reloading the page.

See the below image for better understanding:

React has the capability to render the change or affected components without disturbing the other component, that means instead of rendering the whole page again it will render only change part For eg If you are changing the h1 tag in the react component then after saving it, you can see the whole page is rendered on each change. But in reality, the react library only renders components that actually change.

Entities involved in React:

Component:

Components are the declarative code for reusable UI. One component can interact with other components via props to create complex UI. A component can be a class component or functional component

State:

The state represents the current state of the application.State is private to the class component and it is fully controlled by that component. The functional component doesn't contain state.

Props:

Props are the values or arguments that can be passed from higher components to lower components.

Let’s start with creating a react application:

For creating a react application, you need to have node and npm installed on your machine.

Then, Install the dependencies:

npm install -g create-react-app

create-react-app is an environment for learning React and is a good way to start building a new single-page application.

It sets up the development environment so that we can use the latest JavaScript features.

You may choose one of the following methods, to create a new app :

npx

npx create-react-app my-app

(npx is a package runner tool. It comes with npm 5.2 and higher)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

yarn

yarn create react-app my-app

yarn create is available in Yarn 0.25+

After the creation of react-app, it will create a directory called my-app[that is your application name]

Inside that directory, it will generate the basic initial project structure and install the dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

Different Way to render the component and page:

1. How we can render HTML single component:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
const element = <h1>Hello, world</h1>;
ReactDOM.render(element,document.getElementById('root'));
serviceWorker.unregister();

Let’s say there is a <div> present inside the index.html file in a public folder like this:

<div id="root"></div>

We call this a “root” DOM node. Everything inside the root DOM will be managed by React DOM.

The main thing in React is that applications built usually have a single root DOM node.

To render a React element into a root DOM node, pass both [that is element and root]to ReactDOM.render() .You can check how I have passed in above e.g

So in the react application whatever you are displaying it is going in that root DOM node and from that DOM, the browser will display us the data.

You can see the DOM structure through the developer console by running your application.

How it looks in the browser:

2. You can also store the data in one variable and then you can render the data in DOM.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
const name = 'snehal narkar';
const element = <h1>Hello ,{name}</h1>
ReactDOM.render(element,document.getElementById('root'));
serviceWorker.unregister();

In the above example, I am storing the name ‘Snehal Narkar’ in the name variable and then I am passing that variable in element variable by using <h1>element and then finally I am passing the element variable on root DOM node using ReactDOM.render().

3. How to render the page in index.js:

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();

You just have to import the file and return it inside ReactDOM.render().

So it will render the data in the root DOM node and you can see the content of the page on the browser.

4. How to render one component inside another component:

In this example, I am passing one component into another. I have the First.js component which I am passing in the App.js component. You can check the following code :

App.js

import React from 'react';
import './App.css';
import First from './components/first';
function App() {
return (
<div className="App">
<header>
<p>Render App.js page</p>
</header>
<First />
</div>
);
}
export default App;

First.js

import React from "react";
function First() {
return (
<div className="App">
<h1>My first page</h1>
</div>
);
}
export default First;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();

5. How to create routes for different components or pages:

When you create multiple components at that time create one folder in src give it name as components and then store all your different components. It is a good practice to keep components in a separate folder.

Now will see how we can create routes for multiple pages.

For creating routes we need to install react-router-dom

npm i react-router-dom — save

react-router-dom is a package that allows us to configure routes.

For E.g:

First.js

import React from "react";
function First() {
return (
<div className="App">
<h1>My first page</h1>
</div>
);
}
export default First;

Second.js

import React from "react";
function Second() {
return (
<div className="App">
<h1>My second page</h1>
</div>
);
}
export default Second;

App.js

import React from 'react';
import './App.css';
import First from './components/first';
import Second from './components/second';
import { Route, BrowserRouter as Router } from 'react-router-dom'
function App() {
return (
<Router>
<div>
<Route exact path="/">
<h1>Welcome to the app</h1>
</Route>
<Route path="/first" component={First} />
<Route path="/second" component={Second} />
</div>
</Router>
);
}
export default App;

Now, its time to run our application:

We can run our application by using a script file from package.json

npm start

Our application running on http://localhost:3000

For a complete app, you can check my GitHub repository.

Happy Coding 😃