Unit-2: Fundamentals of React.

js

2.1 Overview of React

2.1.1 Concepts of React.
2.1.2 Using React with HTML
2.1.3 React Interactive components: Components within components and Files
2.1.4 Passing data through Props
2.2 Class components
2.2.1 React class and class components
2.2.2 Conditional statements, Operators, Lists
2.2.3 React Events: Adding events, Passing arguments, Event objects

Overview of React.Js
React is an open source, JavaScript library for developing user interface (UI) in web application. React
is developed and released by Facebook. Facebook is continuously working on the React library and
enhancing it by fixing bugs and introducing new features.

ReactJS is a simple, feature rich, component based JavaScript UI library. It can be used to develop
small applications as well as big, complex applications. ReactJS provides minimal and solid feature set
to kick-start a web application. React community compliments React library by providing large set of
ready-made components to develop web application in a record time. React community also provides
advanced concept like state management, routing, etc., on top of the React library.

React versions
The initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released on
October, 2020. The major version introduces breaking changes and the minor version introduces new
feature without breaking the existing functionality. Bug fixes are released as and when necessary.
React follows the Sematic Versioning (semver) principle.

Features
The salient features of React library are as follows −

 Solid base architecture

MS. ESHA PATEL Page 1
 Unit-2: Fundamentals of React.js

 Extensible architecture
 Component based library
 JSX based design architecture
 Declarative UI library

Benefits
Few benefits of using React library are as follows −

 Easy to learn
 Easy to adept in modern as well as legacy application
 Faster way to code a functionality
 Availability of large number of ready-made component
 Large and active community

Applications
Few popular websites powered by React library are listed below −

 Facebook, popular social media application

 Instagram, popular photo sharing application
 Netflix, popular media streaming application
 Code Academy, popular online training application
 Reddit, popular content sharing application

Why learn ReactJS?

 Today, many JavaScript frameworks are available in the market(like angular, node), but still,
React came into the market and gained popularity amongst them. The previous frameworks
follow the traditional data flow structure, which uses the DOM (Document Object Model). DOM
is an object which is created by the browser each time a web page is loaded. It dynamically
adds or removes the data at the back end and when any modifications were done, then each
time a new DOM is created for the same page. This repeated creation of DOM makes
unnecessary memory wastage and reduces the performance of the application.

MS. ESHA PATEL Page 2

 Unit-2: Fundamentals of React.js

 Therefore, a new technology ReactJS framework invented which remove this drawback. ReactJS
allows you to divide your entire application into various components. ReactJS still used the
same traditional data flow, but it is not directly operating on the browser's Document Object
Model (DOM) immediately; instead, it operates on a virtual DOM. It means rather than
manipulating the document in a browser after changes to our data, it resolves changes on a
DOM built and run entirely in memory. After the virtual DOM has been updated, React
determines what changes made to the actual browser's DOM. The React Virtual DOM exists
entirely in memory and is a representation of the web browser's DOM. Due to this, when we
write a React component, we did not write directly to the DOM; instead, we are writing virtual
components that react will turn into the DOM.

React Environment Setup

In this section, we will learn how to set up an environment for the successful development of ReactJS
application.

Pre-requisite for ReactJS

1. NodeJS and NPM
2. React and React DOM
3. Webpack
4. Babel

Ways to install ReactJS

There are two ways to set up an environment for successful ReactJS application. They are given below.

1. Using the npm command

2. Using the create-react-app command

React create-react-app
Starting a new React project is very complicated, with so many build tools. It uses many
dependencies, configuration files, and other requirements such as Babel, Webpack, ESLint before
writing a single line of React code. Create React App CLI tool removes all that complexities and makes

MS. ESHA PATEL Page 3

 Unit-2: Fundamentals of React.js

React app simple. For this, you need to install the package using NPM, and then run a few simple
commands to get a new React project.

The create-react-app is an excellent tool for beginners, which allows you to create and run React
project very quickly. It does not take any configuration manually. This tool is wrapping all of the
required dependencies like Webpack, Babel for React project itself and then you need to focus on
writing React code only. This tool sets up the development environment, provides an excellent
developer experience, and optimizes the app for production.

Requirements
The Create React App is maintained by Facebook and can works on any platform, for example,
macOS, Windows, Linux, etc. To create a React Project using create-react-app, you need to have
installed the following things in your system.

1. Node version >= 8.10

2. NPM version >= 5.6

Let us check the current version of Node and NPM in the system.

$ node -v

Run the following command to check the NPM version in the command prompt.

$ npm -v

MS. ESHA PATEL Page 4

 Unit-2: Fundamentals of React.js

Installation
Here, we are going to learn how we can install React using CRA tool. For this, we need to follow the
steps as given below.

Install React
We can install React using npm package manager by using the following command. There is no need
to worry about the complexity of React installation. The create-react-app npm package manager will
manage everything, which needed for React project.

1. C:\Users\javatpoint> npm install -g create-react-app

Create a new React project

Once the React installation is successful, we can create a new React project using create-react-app
command. Here, I choose "reactproject" name for my project.

C:\Users\ javatpoint > create-react-app reactproject

NOTE: We can combine the above two steps in a single command using npx. The npx
is a package runner tool which comes with npm 5.2 and above version.
C:\Users\javatpoint> npx create-react-app reactproject

MS. ESHA PATEL Page 5

 Unit-2: Fundamentals of React.js

The above command will take some time to install the React and create a new project with the name
"reactproject." Now, we can see the terminal as like below.

The above screen tells that the React project is created successfully on our system. Now, we need to
start the server so that we can access the application on the browser. Type the following command in
the terminal window.

MS. ESHA PATEL Page 6

 Unit-2: Fundamentals of React.js

$ cd my-app
$ npm start

NPM is a package manager which starts the server and access the application at default
server http://localhost:3000. Now, we will get the following screen.

In React application, there are several files and folders in the root directory. Some of them are as
follows:

1. node_modules: It contains the React library and any other third party libraries needed.
2. public: It holds the public assets of the application. It contains the index.html where React will
mount the application by default on the <div id="root"></div> element.
3. src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files.
Here, the App.js file always responsible for displaying the output screen in React.
4. package-lock.json: It is generated automatically for any operations where npm package
modifies either the node_modules tree or package.json. It cannot be published. It will be
ignored if it finds any other place rather than the top-level package.

MS. ESHA PATEL Page 7

 Unit-2: Fundamentals of React.js

5. package.json: It holds various metadata required for the project. It gives information to npm,
which allows to identify the project as well as handle the project?s dependencies.
6. README.md: It provides the documentation to read about React topics.

React Environment Setup

Now, open the src >> App.js file and make changes which you want to display on the screen. After
making desired changes, save the file. As soon as we save the file, Webpack recompiles the code, and
the page will refresh automatically, and changes are reflected on the browser screen. Now, we can
create as many components as we want, import the newly created component inside the App.js file
and that file will be included in our main index.html file after compiling by Webpack.

Next, if we want to make the project for the production mode, type the following command. This
command will generate the production build, which is best optimized.

$ npm build

Using React With HTML

React's goal is in many ways to render HTML in a web page.

React renders HTML to the web page by using a function called ReactDOM.render().

The Render Function

The ReactDOM.render() function takes two arguments, HTML code and an HTML element.

The purpose of the function is to display the specified HTML code inside the specified HTML element.

But render where?

There is another folder in the root directory of your React project, named "public". In this folder, there
is an index.html file.

You'll notice a single <div> in the body of this file. This is where our React application will be
rendered.

MS. ESHA PATEL Page 8

 Unit-2: Fundamentals of React.js

Example:
Display a paragraph inside an element with the id of "root":

Const root=ReactDOM.createRoot(document.getElementById(‘root’));

Root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

The result is displayed in the <div id=”root”>element:

<body>
<div id=”root”></div>
</body>

The HTML Code

The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript
code:

Create a variable that contains HTML code and display it in the "root" node:

import React from "react";

export default function App() {
return (
<div>
<table>
<thead>

MS. ESHA PATEL Page 9

 Unit-2: Fundamentals of React.js

<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John </td>
</tr>
<tr>
<td>Elsa </td>
</tr>
</tbody>
</table>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Output:

MS. ESHA PATEL Page 10

 Unit-2: Fundamentals of React.js

The Root Node

The root node is the HTML element where you want to display the result.

It is like a container for content managed by React.

It does NOT have to be a <div> element and it does NOT have to have the id='root':

Example:
The root node can be called whatever you like:

<body>

<header id=”root”></header>

</body>

Display the result in the <header id=”root”> element:

Const root=ReactDOM.createRoot(document.getElementById(‘root’));

Root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);
MS. ESHA PATEL Page 11
 Unit-2: Fundamentals of React.js

React Components
Components are like functions that return HTML elements.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will
concentrate on Function components.

In older React code bases, you may find Class components primarily used. It is now suggested to use
Function components along with Hooks, which were added in React 16.8. There is an optional section
on Class components for your reference.

Create Your First Component

When creating a React component, the component's name MUST start with an upper case letter.

Class Component
A class component must include the extends React.Component statement. This statement creates an
inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

Example:
Index.html :
<!DOCTYPE html>
<html lang="en">
<head>

MS. ESHA PATEL Page 12

 Unit-2: Fundamentals of React.js

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-react-app"/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js :
import React, { Component } from 'react'

export default class App extends Component {

MS. ESHA PATEL Page 13

 Unit-2: Fundamentals of React.js

render() {
return (
<div>
<h1>React Class Component</h1>
</div>
)
}
}
Output :

Function Component
Here is the same example as above, but created using a Function component instead.

A Function component also returns HTML, and behaves much the same way as a Class component, but
Function components can be written using much less code, are easier to understand.

Example:
Index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-react-app"/>
MS. ESHA PATEL Page 14
 Unit-2: Fundamentals of React.js

<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js :
import React from 'react'
export default function App() {
return (
<div>
<h1>React Function Component</h1>
</div>

MS. ESHA PATEL Page 15

 Unit-2: Fundamentals of React.js

)
}
Output :

Difference between functional and class components

No Functional components Class components
1 A functional component is just a A class component requires you to extend from React.
plain JavaScript pure function that Component and create a render function that returns
accepts props as an argument and a React element.
returns a React element(JSX).
2 There is no render method used in It must have the render() method returning JSX (which
functional components. is syntactically similar to HTML)
3 Functional component run from top The class component is instantiated and different life
to bottom and once the function is cycle method is kept alive and is run and invoked
returned it can’t be kept alive. depending on the phase of the class component.
4 Also known as Stateless components Also known as Stateful components because they
as they simply accept data and implement logic and state.
display them in some form, they are
mainly responsible for rendering UI.
5 React lifecycle methods (for example, React lifecycle methods can be used inside class
componentDidMount) cannot be components (for example, componentDidMount).
used in functional components.
6 Hooks can be easily used in It requires different syntax inside a class component
functional components to make to implement hooks.
them Stateful.
example: constructor(props) {
example: const [name,SetName]=
super(props);
React.useState(‘ ‘)
this.state = {name: ‘ ‘}

MS. ESHA PATEL Page 16

 Unit-2: Fundamentals of React.js

7 Constructors are not used. Constructor is used as it needs to store state.

Rendering a Component
Now your React application has a component called Car, which returns an <h2> element.

To use this component in your application, use similar syntax as normal HTML: <Car />

Example:
Display the Car component in the "root" element:

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

Components in Components
We can refer to components inside other components:

Example:
Use the Car component inside the Garage component:

import React from "react";

function Car() {

MS. ESHA PATEL Page 17

 Unit-2: Fundamentals of React.js

return (

<div>

<h2>I am a Car!</h2>

</div>

);

export default function Garage() {

return (

<div>

<h1>Who lives in my Garage?</h1>

<Car />

</div>

);

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

MS. ESHA PATEL Page 18

 Unit-2: Fundamentals of React.js

</React.StrictMode>

);

Output:

Components in Files
React is all about re-using code, and it is recommended to split your components into separate files.

To do that, create a new file with a .js file extension and put the code inside it:

Note that the filename must start with an uppercase character.

Example:
This is the new file, we named it "App.js":

import React from "react";

function App() {

return (

<div>

<h2>I am a Car!</h2>

MS. ESHA PATEL Page 19

 Unit-2: Fundamentals of React.js

</div>

);

export default App;

To be able to use the Car component, you have to import the file in your application.

Example:
Now we import the "App.js" file in the application, and we can use the App component as if it was
created here.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

MS. ESHA PATEL Page 20

 Unit-2: Fundamentals of React.js

React Props
props stands for properties.

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

props help make components more dynamic

props in a component are read only and cannot be changed

React Props are like function arguments in JavaScript and attributes in HTML.

Props are immutable

React Props
React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes:

Example:
Add a "brand" attribute to the Car element:

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

MS. ESHA PATEL Page 21

 Unit-2: Fundamentals of React.js

<React.StrictMode>

<App brand="Ford"/>

</React.StrictMode>

);

The component receives the argument as a props object:

Use the brand attribute in the component:

import React from 'react';

export default function App(props) {

return (

<div>

<h1>I am a {props.brand} !</h1>

</div>

Output:

Pass Data

MS. ESHA PATEL Page 22

 Unit-2: Fundamentals of React.js

Props are also how you pass data from one component to another, as parameters.

Example:
Send the "brand" property from the Garage component to the Car component:

import React from 'react';

function Car(props) {

return <h2>I am a { props.brand }!</h2>;

export default function Garage() {

return (

<div>

<h1>Who lives in my garage?</h1>

<Car brand="Ford"/>

</div>

);

Output:

MS. ESHA PATEL Page 23

 Unit-2: Fundamentals of React.js

Note: React Props are read-only! You will get an error if you
try to change their value.

React Class Components

Before React 16.8, Class components were the only way to track state and lifecycle on a React
component. Function components were considered "state-less".

With the addition of Hooks, Function components are now almost equivalent to Class components.
The differences are so minor that you will probably never need to use a Class component in React.

Even though Function components are preferred, there are no current plans on removing Class
components from React.

This section will give you an overview of how to use Class components in React.

React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML via a render() function.

Components come in two types, Class components and Function components, in this chapter you will
learn about Class components.

Create a Class Component

When creating a React component, the component's name must start with an upper case letter.

The component has to include the extends React.Component statement, this statement creates an
inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

Example:

MS. ESHA PATEL Page 24

 Unit-2: Fundamentals of React.js

Create a App component called App

import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<h2>Hi, I am a Car!</h2>;
</div>
)
}
}

Now your React application has a component called App, which returns a <h2> element.

To use this component in your application, use similar syntax as normal HTML: <Car />

Example:
Display the App component in the "root" element:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

MS. ESHA PATEL Page 25

 Unit-2: Fundamentals of React.js

React Conditional Rendering

In React, you can conditionally render components.

There are several ways to do this.

if Statement
We can use the if JavaScript operator to decide which component to render.

Example:
We'll use these two components:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}

Example:
Now, we'll create another component that chooses which component to render based on a condition:

import React from 'react';

function MissedGoal() {
return (
<div>
<h1>MISSED!</h1>
</div>

MS. ESHA PATEL Page 26

 Unit-2: Fundamentals of React.js

)
}
function MadeGoal() {
return (
<div>
<h1>Goal!</h1>
<MissedGoal />
</div>
)
}
export default function abc() {
const isGoal =false;
if (isGoal) {
return <MissedGoal />;
}
return <MadeGoal />;
}
Output:

Try changing the isGoal attribute to true:

import React from 'react';

MS. ESHA PATEL Page 27

 Unit-2: Fundamentals of React.js

function MissedGoal() {
return (
<div>
<h1>MISSED!</h1>
</div>
)
}
function MadeGoal() {
return (
<div>
<h1>Goal!</h1>
<MissedGoal />
</div>
)
}
export default function abc() {
const isGoal =true;
if (isGoal) {
return <MissedGoal />;
}
return <MadeGoal />;
}
Output:

MS. ESHA PATEL Page 28

 Unit-2: Fundamentals of React.js

Logical && Operator

Example not understand so later on set
Another way to conditionally render a React component is by using the && operator.

Example:
We can embed JavaScript expressions in JSX by using curly braces:

function Garage(props) {

const cars = props.cars;

return (

<>

<h1>Garage</h1>

{cars.length > 0 &&

<h2>You have {cars.length} cars in your garage.</h2>

</>

);

MS. ESHA PATEL Page 29

 Unit-2: Fundamentals of React.js

const cars = ['Ford', 'BMW', 'Audi'];

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage cars={cars} />);

If cars.length is equates to true, the expression after && will render.

Try emptying the cars array:

Example:
const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

Ternary Operator
Another way to conditionally render elements is by using a ternary operator.

condition ? true : false

We will go back to the goal example.

Example:
Return the MadeGoal component if isGoal is true, otherwise return the MissedGoal component:

import React from "react";

function MissedGoal() {

return (

<div>

<h1>MISSED!</h1>

MS. ESHA PATEL Page 30

 Unit-2: Fundamentals of React.js

</div>

);

function MadeGoal() {

return (

<div>

<h1>Goal!</h1>

<MissedGoal />

</div>

);

export default function Goal() {

const isGoal=false;

return (

<div>

{isGoal ? <MadeGoal /> : <MissedGoal />}

</div>

Output:

MS. ESHA PATEL Page 31

 Unit-2: Fundamentals of React.js

React Lists
In React, you will render lists with some type of loop.

The JavaScript map() array method is generally the preferred method.

Example:
Let's render all of the cars from our garage:

import React from "react";

function Car(props) {

return <li>I am a {props.brand}!</li>;

export default function Garage() {

const cars = ["Ford", "BMW", "Audi"];

return (

<div>

<h1>Who lives in my garage?</h1>

<ul>

MS. ESHA PATEL Page 32

 Unit-2: Fundamentals of React.js

{cars.map((car,i) => (<Car brand={car} key={i} /> ))}

</ul>

</div>

);

}
Output:

When you run this code in your create-react-app, it will work but you will receive a warning that there
is no "key" provided for the list items.

Keys
Keys allow React to keep track of elements. This way, if an item is updated or removed, only that item
will be re-rendered instead of the entire list.

Keys need to be unique to each sibling. But they can be duplicated globally.

Generally, the key should be a unique ID assigned to each item. As a last resort, you can use the array
index as a key.

Example:
Let's refactor our previous example to include keys:

MS. ESHA PATEL Page 33

 Unit-2: Fundamentals of React.js

import React from "react";

function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
Output:

MS. ESHA PATEL Page 34

 Unit-2: Fundamentals of React.js

React Events
Just like HTML DOM events, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover etc.

Adding Events
React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot} instead of onClick="shoot()".

React:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
Example:
Put the shoot function inside the Football component:

import React from 'react';

MS. ESHA PATEL Page 35

 Unit-2: Fundamentals of React.js

export default function Football() {

const shoot = () => {

alert("React Adding Event");

return (

<button onClick={shoot}>Click Me</button>

);

}
Output:

Passing Arguments
To pass an argument to an event handler, use an arrow function.

Example:
Send " React Passing Event " as a parameter to the shoot function, using arrow function:

import React from 'react';

export default function Football() {

MS. ESHA PATEL Page 36

 Unit-2: Fundamentals of React.js

const shoot = (a) => {

alert(a);

return (

<button onClick={() => shoot("React Passing Event")}>Click Me</button>

);

Output:

React Event Object

Event handlers have access to the React event that triggered the function.

In our example the event is the "click" event.

Example:
Arrow Function: Sending the event object manually:

import React from 'react';

export default function Football() {

const shoot = (a,b) => {

MS. ESHA PATEL Page 37

 Unit-2: Fundamentals of React.js

alert(b.type);

/*

'b' represents the React event that triggered the function,

in this case the 'click' event

*/

return (

<button onClick={(event) => shoot("Goal!", event)}>Click Me</button>

);

Output:

MS. ESHA PATEL Page 38