IP - Chapter No 6-React JS-SH 2022-Prepared by Reshma Koli

Internet Programming(CSDO501)-Notes(Branch: Computer Engg/Sem:V/Revised: 2019 SH 2022
cdChapter No 6: React JS
➢ React JS
➢ React Features
➢ Hello World application
➢ Introduction to JSX
➢ Simple Application using JSX
React JS and Features

React Introduction
Reference Link
You Tube Link:

What Is React (React js) & Why Is It So Popular? - YouTube
• It's used for building interactive user interfaces and web applications quickly and
efficiently with significantly less code.
• React, sometimes referred to as a frontend JavaScript framework, is a JavaScript
library for building user interfaces created by Facebook.
• React is a tool for building reusable UI components and then composed these all
components together and develop your app
• React is used to build single-page applications.
1 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

• Every react application should have at least one component, which is called as root
component, which consist of other child components, so every react app is tree of
components.
• Example

• At the top there is a application, which consist of nav bar, profile, trends, feed
(which consist of tweet, like components).
• These components build separately and then merged together.
• Each component typically implemented as JavaScript class.

• Render method consist of React elements which is simple plain JavaScript

element which represents DOM elements in memory.
• React keep light weight representation of DOM in memory; which is called
virtual DOM. These virtual DOM is cheap to create unlike real DOM.
• When we change state of react element, we get new react element. React check this
element and child with previous one, and identify what is different and update Real
DOM to keep in sink with virtual DOM.

React Features
1. A huge amount of libraries
React combines the power of JavaScript with HTML to make it robust. In other words,
we can also call it JSX. And because it uses JavaScript, there are millions of third-
party JavaScript libraries that make web development a breeze.
2. Virtual DOM
React creates a VIRTUAL DOM in memory.
Instead of manipulating the browser's DOM directly, react creates a virtual DOM in
memory, where it does all the necessary manipulating, before making the changes in the
browser DOM.
When the page is loaded, the DOM – the object model – is created. Any changes to the
properties of individual elements make it necessary to load the entire HTML structure.
However, not with React.js.
Virtual DOM is a representation that remains loaded all the time. This means that when a
web app is updating, you have the ability to interact with it. And none of the components
would suffer.
Also, Virtual DOM speeds the loading of web pages substantially, which provides a greater
experience to the users.
3. Reusable components
Components are React’s most standout feature, which makes it so prominent.
The even better part is that they are totally reusable. This means that you only need to
define a component once and use it multiple times.

It speeds up the development process and also increases productivity tremendously. When
you are responsible for producing a website on a large scale, you will feel relieved to use
the same components in a different way.
For example, let’s assume that we want to create a basic menu containing two identical
buttons. Let’s start by creating one of these buttons. In a simplified version, it could look
like this:
const MyButton = () => {

return <div>
<button> Click me! </button>

</div>
}
We do not have to write this code twice to create the second button – just paste MyButton
in the component serving as the menu, as presented below.
const MyMenu = () => {

return <div>
<h1> Not that useful menu </h1>

<MyButton />
<MyButton />
</div>
}
What makes reusability a great solution is that such ready-made, once-created components
can be used whenever you want. So that the time saved on repetitive work is a resource for
completing more challenging tasks.
On the other hand, thanks to the independence of the components, the Internet is bursting
with individual components and entire frameworks ready to use.

4. Update friendly
Facilitation is clear data flow practices. In React, data always flows from the parent
component to the child files nested within it. This happens via the props object.
For example, let’s assume you want to upgrade a chat-bot on your site, in case you did not
use any ready solution, and render it to contain a specific text in an input area. Then drop:
class App extends React.Component {

render () {
return (
<div className=”App”>
<h1>Conversational UI</h1>
<Chat placeholder={“Type here…”} width={400}></Chat>
</div>
);
}
}
Whether you use React-Native to develop mobile applications or just ReactJS for websites,
you will appreciate the quick refresh feature. Quick Refresh runs as soon as you save your
React file in the code editor, so you don’t have to click the refresh button every time you
want to see changes to your site.
This is extremely helpful when you are working on the details of your website. Every time
you make a small change to the code, you can immediately see the results in your browser.
Moreover, the bugs reported by the React compiler are descriptive and easy to understand,
so you don’t need to scratch your head on a bug that barely makes sense to you.

Where to use ReactJS
Although ReactJS was initially intended to be used exclusively inside Facebook, it was
quickly released from custody. In 2013, it was made available as open-source, and it was a
breakthrough moment.
Which solutions are based on this technology? Some examples are listed below:
• social media (Facebook)

• video platforms (Netflix)
• e-learning platforms (Udemy)
• SaaS solutions (Asana)
• communicators (Skype)
React.JS History
Current version of React.JS is V17.0.2 (August 2021).
Initial Release to the Public (V0.3.0) was in July 2013.
React.JS was first used in 2011 for Facebook's Newsfeed feature.
Facebook Software Engineer, Jordan Walke, created it.
Current version of create-react-app is v4.0.3 (August 2021).
create-react-app includes built tools such as webpack, Babel, and ESLint.
React is unique in complementing the JavaScript programming language. You can

supplement the code with HTML elements directly. Therefore, it is possible to
simplify the code and shorten it significantly.
To use React in production, you need npm which is included with Node.js.
To get an overview of what React is, you can write React code directly in HTML.
But in order to use React in production, you need npm and Node.js installed.
Hello World Application using React
React Installation
You Tube Link: https://www.youtube.com/watch?v=tg73NsiQOUE
Node.js is an open-source, cross-platform, back-end JavaScript runtime

environment that runs on a JavaScript Engine (i.e. V8 engine) and executes JavaScript
code outside a web browser, which was designed to build scalable network applications.
Node.js lets developers use JavaScript to write command line tools and for server-side
scripting—running scripts server-side to produce dynamic web page content before the
page is sent to the user's web browser.

Step 1: Install Node JS and NPM
➢ Download Node JS using google
You can download LTS (Long Term Support Version)


After downloading install it
Open Command prompt and check installation of node js
Command is : node -v

When we install Node Js, it will automatically installed NPM (Node Package Manager)
Enter command: npm -v

Step 2: Install Visual Studio Code
You Tube Link:

https://www.youtube.com/watch?v=4vgthtnjnOQ&list=PLwGdqUZWnOp3aROg4wypcRhZ
qJG3ajZWJ&index=3





Go to extension icon of VS code and install Babel Javascript

If we install babel js , it will highlight our js code


Step 3: Install React from Terminal
Command is: npm install -g create-react -app
Check below screenshots for same

Enter command: create-react-app --version

Now create react app using below command
Enter command: mkdir reacttutorial

Now create React project inside it
Command is: create-react-app reactproject

To create react app it will take minimum 10 to 12 mins
Success full React Js installation
Now go to VS Code and open created react js app (here i have created ReactTutorial)


And to launch our react app here it is reactproject
Go to command prompt and Type here npm start

It will take some time
Open react app (type localhost:8080)

Go to index.js (VS code)

And refresh localhost:3000

Steps: Simple Hello world Application using React JS
You tube link: https://www.youtube.com/watch?v=Y2pA6pz-

ffM&list=PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ&index=6
✓ Open VS code
✓ Open folder of react app
✓ Click on index.html
✓ Right click index.html-copy path
✓ And past path in command prompt
✓ Start npm

Type below command
cd reacttutorial
cd reactproject

Start npm server
Go to VS code and Do changes in index.js

Open browser: localhost:3000

JSX and React App Using JSX
What is JSX?
JSX stands for JavaScript + XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM without
any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
Example:
index.js
import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Heading from './Heading';
import Para from './Para';
import List from './List';
import Form from './Form';
const root= ReactDOM.createRoot(document.getElementById('root'))

root.render(
<>
<Heading></Heading>
<Para></Para>
<List></List>
<Form></Form>
<h1>React Js without using components</h1>

<p>This is paragraph 1</p>

<p> This is paragraph 2</p>

</>,
document.getElementById('root')
);
Heading.jsx
import React from "react";
function Heading(){
return <h1>React Js Using Components</h1>;
}
export default Heading;
Para.Jsx
function Para(){
return <p>First React App</p>;
}
export default Para;
List.Jsx
function List(){
return (
<ol>
<li>TE COMP Div C</li>
<li>TE COMP Div D</li>
</ol>
);
}
export default List;

Form.Jsx
function Form(){
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
export default Form;
How to create React Element:
React Components in Hindi | Functional Component in React JS Hindi in 2020 #18 - YouTube

IP - Chapter No 6-React JS-SH 2022-Prepared by Reshma Koli

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IP - Chapter No 6-React JS-SH 2022-Prepared by Reshma Koli

Uploaded by

Copyright:

Available Formats

Internet Programming(CSDO501)-Notes(Branch: Computer Engg/Sem:V/Revised: 2019 SH 2022

React JS and Features

You Tube Link:

1 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

2 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

3 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

• Render method consist of React elements which is simple plain JavaScript

4 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Components are React’s most standout feature, which makes it so prominent.

5 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

const MyButton = () => {

<button> Click me! </button>

const MyMenu = () => {

<h1> Not that useful menu </h1>

6 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

class App extends React.Component {

7 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Where to use ReactJS

• social media (Facebook)

Current version of React.JS is V17.0.2 (August 2021).

Initial Release to the Public (V0.3.0) was in July 2013.

React.JS was first used in 2011 for Facebook's Newsfeed feature.

Facebook Software Engineer, Jordan Walke, created it.

Current version of create-react-app is v4.0.3 (August 2021).

create-react-app includes built tools such as webpack, Babel, and ESLint.

React is unique in complementing the JavaScript programming language. You can

Hello World Application using React

You Tube Link: https://www.youtube.com/watch?v=tg73NsiQOUE

Node.js is an open-source, cross-platform, back-end JavaScript runtime

9 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Step 1: Install Node JS and NPM

➢ Download Node JS using google

You can download LTS (Long Term Support Version)

10 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

11 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

After downloading install it

Open Command prompt and check installation of node js

12 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Enter command: npm -v

13 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Step 2: Install Visual Studio Code

You Tube Link:

14 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

15 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

16 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

17 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

18 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Go to extension icon of VS code and install Babel Javascript

19 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

If we install babel js , it will highlight our js code

20 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

21 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Step 3: Install React from Terminal

Command is: npm install -g create-react -app

Check below screenshots for same

22 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Enter command: create-react-app --version

23 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Now create react app using below command

Enter command: mkdir reacttutorial

24 Prepared by, Mrs. Reshma Koli/Assistant Professor/Computer Engineering

Now create React project inside it