MODULE 3: React

React Introduction
 React, sometimes referred to as a frontend JavaScript framework, is a
declarative, efficient, and flexible JavaScript library.
 React is a tool for building reusable UI components.
 It is an open-source, component-based front end library which is responsible only for
the view layer of the application.
 It was initially developed and maintained by Facebook and later used in its products
like WhatsApp & Instagram.
 It was created by Jordan Walke
 A ReactJS application is made up of multiple components, each component
responsible for outputting a small, reusable piece of HTML code.
 ReactJS uses virtual DOM based mechanism to fill data in HTML DOM.
 The virtual DOM works fast as it only changes individual DOM elements instead of
reloading complete DOM every time.
 Why [Link]?
• V(view) of MVC - Solution of View in MVC
• Virtual DOM - Reactjs use the concept of virtual DOM which helps in the performance
• Unidirectional Data Flow - Compare to the 2 way data binding. Reactjs use the concept of Unidirectional data
flow which improve the over all performance.
• UI Components - Reusable and interactive components
• SEO Friendly - Components are client side as well as server side render hence they are SEO friendly and no 3rd
party plugin required
• Coding is simpler because of JSX
• Reactjs own debugger
• React Native is going to be next big thing
• Big minds are backing Reactjs
 Applications of
ReactJS
▶ Instagram is completely based on the ReactJS library
▶ geolocations, Google Maps APIs, search engine

▶ Netflix

▶ Yahoo Mail

▶ Whatsapp uses ReactJS for building user

interfaces
How does ReactJS work?

 React creates a virtual DOM in memory to update the browser’s DOM.

The virtual DOM will try to find the most efficient way to update the
browser’s DOM.
 Unlike browser DOM elements, React elements are simple objects and
are cheap to create. React DOM takes care of updating the DOM to
match the React elements. The reason for this is that JavaScript is
very fast and it’s worth keeping a DOM tree in it to speed up its
processing.
 Although React was designed to be used in the browser, because of
its design allows it to be used on the server with [Link] as well.
Ways to install ReactJS

 There are two ways to set up an environment for successful ReactJS

application. They are given below.
 Using the npm command
 Using the create-react-app command
React create-react-app

 The create-react-app is an excellent tool 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
 To create a React Project using create-react-app, you need to have
installed
 Node version >= 8.10
 NPM version >= 5.6
Installation in
Windows
[Link]/
en
 To check whether yhe node and npm I installed successfully
 node -v
 npm -v
 Steps to install react using CRA
 npm install -g create-react-app //install React using npm package manager
 create-react-app reactproject // create a new React project using create-react-app command.
Or
 npx create-react-app reactproject // combine above two commands into one
 TO START THE SERVER
 cd foldername
 npm start
 Once the command completes, you should have a new folder called
hello world.

 To run this application first navigate inside the project folder cd hello-
world.

cd hello-world
 Now, run the command npm start. The command will open the
browser on localhost port 3000 with your hello world application up
and running.
Features of React
 JSX - JavaScript Syntax Extension
 JavaScript XML or JSX is an XML or HTML like JavaScript syntax extension used by ReactJS. This
allows the HTML-like text to co-exist with JavaScript react code.
 Unidirectional Data Flow
 ReactJS follows unidirectional data flow also known as one-way data binding, which certainly gives
better control to the user throughout the application.
 But it requires additional features, in case the data flow is in another direction. This also increases
the efficiency of the application by making it more flexible.
 Component Structure
 allows developers to create reusable building blocks that can be easily combined to build complex
UIs.
 Virtual Document Object Model (VDOM)
 the library uses a virtual representation of the actual DOM, allowing it to efficiently update the UI
by only re-rendering the changed parts.
 Declarative User Interface
 React provides a simple and intuitive programming model that allows developers to declare what
they want their UI (User Interface) to look like without worrying about how it is implemented.
Features of React
 Performance
 With ReactJS, the user did not write directly to the DOM, but to the virtual DOM thus leading to
smoother and faster performance.
 Simplicity
 ReactJS uses JSX file. This makes the application simple and easy-to-understand. Again the reusable
codes make it more simple to use and learn.
 Extensions
 React supports various extensions for application architecture. It supports server-side rendering, Flux,
and Redux extensively in web app development. React Native is a popular framework developed from
React for creating cross-compatible mobile apps.
 Debugging
 Testing React apps is easy due to large community support. Even Facebook provides a small browser
extension that makes React debugging easier and faster
 Community support
 React has a large and active community of developers who contribute to the project and create
complementary tools and libraries.
 Cross-platform compatibility
 Developers use React to build UIs for various platforms, including web, mobile, and desktop
applications.
ReactJS Advantages

 [Link] creates its own virtual DOM. This will improve apps performance since
JavaScript virtual DOM is faster than the regular DOM.
 ReactJS helps to create awesome UI.
 ReactJS is SEO-friendly.
 Component and Data patterns improve readability which helps to maintain larger
apps.
 React can be used with other frameworks.
 React simplifies the complete process of the scripting environment.
 It facilitates advanced maintenance and increases productivity.
 Ensures faster rendering
 The best thing about React is the provision of a script for mobile app development.
 A strong community backs ReactJS.
 React JS comes with a helpful developer toolset
 Both startups and fortune 500 companies use React.
Components of React:

• Components are like functions that

return HTML elements.

• Types

1. Class components
2. Function components
Class
Component
A class component must include the extends
[Link] statement.

This statement creates an inheritance to [Link],

and gives your component access to React. Component's
functions.

It also require render() method, this method returns HTML

Example

class Car extends

[Link] { render()
{
return <h2>Hi, I am a Car!</h2>;
}
}
 Function
Component
A Function component also returns HTML

Behaves much the same way as a Class component

But Function components can be written using much less

code, are easier to understand
Exampl
e
function Car()
{
return <h2>Hi, I am a
Car!</h2>;
}
function FunctionComponent() {
return <h2>This is a function component.</h2>
}
class ClassComponent extends [Link] {
render() {
return <h2>This is a class component.</h2>
}
}
const element = <div>
<FunctionComponent />
<ClassComponent />
</div>;
[Link](element, [Link]('root'));
“Hello World” Application

 expand the hello-world project

 expand the source folder, and edit [Link]
 change the text to hello world and let me save the file.
 When the changes are saved the browser will automatically refresh
and you should see hello world displayed in the browser.
Or
 After saving the file run the command npm start
INTRODUCTION TO JSX

 JSX (JavaScript Syntax Extension or JavaScript XML) is an extension to

JavaScript. It provides an easier way to create UI components in
React.

 Here’s an example of its syntax:

const element = <h1>Hello, World!</h1>;
 What comes after the equals sign isn’t a string or HTML, rather JSX. It
doesn’t render out to HTML directly but instead renders to React
Classes.
Basic Expressions

 JSX is extremely similar to plain HTML and uses the same XML-based
syntax. Here’s the canonical “Hello, World” example to start with:

const element = <h1>Hello, World!</h1>;

[Link](element, [Link]('root'));

 Note how the <h1> element is used directly inside regular JavaScript.
There are no quotes around it, since it’s not a string, but a language
expression.
JSX tag

 Similarly, you can use JavaScript in JSX tags by surrounding them with
curly brackets:

function getGreeting(name) {
return `Hello, ${name}`;
}

const element = <h1>{getGreeting('John')}</h1>;

[Link](element, [Link]('root'));
JSX -Attribute

 JavaScript expressions when specifying attribute values, such as passing an

object containing inline styles in this example. This is useful when you want to
pass a dynamic attribute value:

const styles = {
color: 'red',
fontStyle: 'italic'
}

const element = <h1 style={styles}>Hello, World!</h1>;

[Link](element, [Link]('root'));
Conditional Statements
 JSX does not support standard if statements, but you can use the
ternary operator:

const loggedIn = true;

const element = <div>
<h1>Hello!</h1>
<h2>
{(loggedIn) ? 'Welcome back' : 'Nice to meet you'}
</h2>
</div>;
[Link](element, [Link]('root'));
Loops

 With JSX, you can’t use for loops, but you can iterate over an array using the array
map() method
const items = [
'Bread',
'Milk',
'Eggs'
]
const element = <div>
Grocery list:
<ul>
{[Link](item => <li>{item}</li>)}
</ul>
</div>;

[Link](element, [Link]('root'));