React JS

• ReactJS :
• React is an open source JavaScript Library
• Used for creating dynamic and Interactive User Interfaces.
• ReactJS effectively handles Views(UI) Layer of web and mobile application.
• ReactJS History :
• React was created by Jordan Walke, a software engineer at Facebook.
• On April 2007, Facebook announced React Fiber.
• React Fiber is a new core algorithm of react Library for building User Interfaces (UI).
• 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,
• ReactJS Benefits :
• 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

• ReactJS Application :
• 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
Features of ReactJS :
Virtual DOM :
• Virtual DOM keeps
• a virtual representation of UI in the memory
• and sync it with real DOM using the reconciliation process.
• Reconciliation process consist of 3 main steps:
1. Rendering the entire UI into
Virtual DOM when there’s
a change in UI.
2. Calculating the difference
between previous and current
Virtual DOM representations.
3. Updating the real DOM with
the changes.
JSX :
• JSX stands for JavaScript XML.
• It is a markup syntax similar to HTML
• It is used to describe the appearance of an application’s UI.
• Syntax used by developers to create React components, makes writing the
building blocks of Reactjs effortless and simple for the developers and
gives them an easy way out.
One Way Data Binding :
• Reactjs uses a unidirectional data flow.
• Means the developers cannot edit any component directly.
• They have to utilize the callback function (then(), resolve()) in order to make
changes in the components. This process is called one-way data binding.

• A unidirectional data flow helps Reactjs developers to gain better control

over the web or mobile application.
Component Based Architecture :
• ReactJS is made up of multiple components, in which each component has its logic
and controls.
• The components are reusable that helps in maintaining the code when working on
large scale projects.
• Performance
• ReactJS have the concept of managing virtual DOM.
• The DOM deals with HTML, XML, and XHTML.
• The DOM entirely exists in memory.
• So whenever we create a component, we did not write them directly to the DOM
• We just write the virtual components that turn into the DOM. This leads to
smoother and faster performance.
• Simplicity
• ReactJS uses JSX file which makes the application simple and to code as well as
understand.
• As ReactJS is a component-based approach which makes the code reusable as per
your need. This makes it simple to use and learn.
• ReactJS –Installation :

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

application.

1.Using the npm command

2. Using the create-react-app command

Using the npm command
• Install NodeJS and NPM
• NodeJS and NPM are the platforms need to develop any ReactJS
application.
• Install React and React DOM
• Create a root folder with the name reactApp on the desktop or where
you want.
• create a package.json file.
• Install Webpack : Webpack is used for module packaging,
development, and production pipeline automation.
• Install Babel : Babel is a JavaScript compiler and transpiler used to
convert one source code to others. It compiles React JSX and ES6 to
ES5 JavaScript which can be run on all browsers.
Using the npm command

• To complete the installation process, you need to add index.html, App.js,

main.js, webpack.config.js and, .babelrc files in your project folder.
• Configure webpack : You can configure webpack in the webpack.config.js file
• App.jsx and main.js is the first React Component.
• Create a file with name .babelrc
• After completing the installation process and setting up the app, you can start
the server
Using the create-react-app command
• Install NodeJS and NPM
• Install React using the npm package manager
npm install –g create-react-app
• Create a new React project using command
create-react-app reactproject

• We can combine above two command using npx

npx create-react-app reactproject
(npx is package runner tool which comes with npm 5.2 and above
version)
• After complete installation, now start the server
npm start
Folder and File Structure :
Folder and File
Structure :
• node_modules
• This folder will contain all react
js dependencies.
• You will never need to go in this
folder
• .gitignore
• This file is used by source control
tool to identify which files and
folders should be included or
ignored during code commit
• Node_module folder which is a
large folder so will be excluded
from being tracked by Git.
• package.json
• This file contains name of app,
version of nodeJS, dependencies
and scripts required for the
project.
Folder and File Structure :

• README.md
• is a markdown file that includes a lot of helpful tips and links that can help you
while learning to use Create React App.
• public
• It is a folder that we can use to store our static assets, such as images, svgs, and
fonts for our React app.
• Package-lock.json
• It contain exact dependency tree to be installed in /node_modules.
• It helps while a team is working on private apps to ensure that they are working on
the same version of dependencies and sub-dependencies.
• It also maintains a history of changes done in package.json
Folder and File Structure :
• Src folder
• src is one of the main folder in react project.
Folder and File Structure :
• Src folder
• src is one of the main folder in react project.
• Index.js
• index.js is the file that will be called once we will run the project.
Folder and File Structure :
• App.js
• App.js is a component that will get loaded under index.js file. If we do any
change in app.js file HTML component and save, it will reflect in
localhost://3000
First React Project Setup :
• Step 1 :
• Import the react packages :
• Import React from ‘react’;
• Import ReactDom from ‘react-dom’;
• Save the file as index.js in src folder

• Step 2 :
• Write simple code to display “Hello, Welcome to ReactJS”
ReactDOM.render(
<h1>Hello, Welcome to ReactJS</h1>
Document.getElementById(‘root’)
);
• ReactDOM.render will add the <h1> tag to the element with id root.
First React Project Setup :
• HTML file :
<!DOCTYPE html>
<html>
<head>
<title>ReactJS Program</title>
</head>
<body>
<div id=“root”></div>
</body>
</html>
First React Project Setup :
• Step 3 :
• Compile code to get the output in browser :
• Folder Structure :
reactproj/
node_module/
src/
index.js
package.json
public/
index.html
• Add command in package.json to compile the final file :
“scripts”:{
“start”:”react-scripts start”
},
• To compile final file give command
npm run start
Step 4:
The URL http://localhost:3000 will open in browser once code get compiled and display message.
React Element:
• React element is an object describing DOM node and its desired
properties.
• It contains information about the component type, its properties and
child component inside it.
• React element and DOM element are not same. React element are
converted to DOM element using the Render function.
• Syntax of react element : suppose we are creating react element,

React.createElement(“h1”, null, “Web_Computing”);

Here, h1 is type of element
null is property of element
Web Computing is text to be printed or define the child
component
Render Function :
• Rendering is a function of transforming your React components into
DOM nodes, that your browser can understand and display on the
screen.
• React renders a React element, including its child to the DOM via a
ReactDOM.render
• ReactDOM is a package used to access DOM in order to render React
elements in browser.
React JSX:
• React JSX is an extension to JavaScript.
• It enables developer to create virtual DOM using XML syntax.
• It compiles down to pure JavaScript (React.createElement function
calls).
• Since it compiles to JavaScript, it can be used inside any valid
JavaScript code.
• Assign to a variable
var greeting = <h1>Hello React!</h1>
• Assign to a variable based on a condition.
var canGreet = true;
if(canGreet) {
var greeting = <h1>Hello React!</h1>
}
React JSX:
• Can be used as return value of a function.
function Greeting() {
return <h1>Hello React!</h1>
}
var greeting = Greeting()
• Can be used as argument of a function.
function Greet(message) {
ReactDOM.render(message, document.getElementById('react-app’)
}
Greet(<h1>Hello React!</h1>)
React JSX:
• Expressions :
• Expression has to be enclosed inside the curly braces, { }.
• Expression can contain all variables available in the context, where
the JSX is defined.
• Example :
<script type="text/babel">
var cTime = new Date().toTimeString();
ReactDOM.render(
<div><p>The current time is {cTime}</p></div>,
document.getElementById('react-app') );
</script>
• Here, cTime used in the JSX using expression
• Output
The Current time is 21:19:56 GMT+0530(India Standard Time)
React JSX:

• Attributes :
• All HTML tags and its attributes are supported.
• Attributes has to be specified using camelCase convention (and it
follows JavaScript DOM API) instead of normal HTML attribute name.
• For example, class attribute in HTML has to be defined as className.
htmlFor instead of for
tabIndex instead of tabindex
onClick instead of onclick
React JSX:
• Attributes :
• Example :
<style>
.red { color: red }
</style>
<script type="text/babel">
function getCurrentTime() {
return new Date().toTimeString();
}
ReactDOM.render(
<div>
<p>The current time is <span className="red"> {getCurrentTime() }
</span></p>
</div>,
document.getElementById('react-app') );
</script>

• Output
The Current time is 22:36:55 GMT+0530(India Standard Time)
React JSX:
• Expressions in Attributes :
• In attributes, double quote should not be used along with expression. Either
expression or string using double quote has to be used.
<style>
.red { color: red }
</style>
<script type="text/babel">
function getCurrentTime() {
return new Date().toTimeString();
}
var class_name = "red";
ReactDOM.render(
<div>
<p>The current time is <span className={class_name}>
{getCurrentTime()}</span></p>
</div>,
document.getElementById('react-app') );
</script>
ReactJS Component :
• Component is a piece of
code that can be reuse like
function but most
powerful than functions.
• React component is the
self-contained, reusable
code block of a React
application.
• A React component divide
the UI into smaller pieces.
• Buttons, forms, dialog, and
so on can all be expressed
as components.
ReactJS Component :
Creating React Component :
• React library has two component types.

• The types are categorized based on the way it is being created.

• Stateless Functional component

• Stateful Class component

Creating React Component :
• Function components
• These types of components do not have a state of their own and only
possess a render method.
• They may derive data from other components by using props
(properties).
• Its only requirement is to return a React element.
function Hello() {
return '<div>Hello</div>’
}
Creating React Component :
• Class Components :
• These types of components hold and manage their unique state.
Use of constructor in components :
Example of Constructor :
ReactJS Props :
• Props are the arguments passed to the React component.
• Props are usually passed via HTML attributes to the components, they
are used by both class and functional components.
• They are used to render data from the parent component to child
component. Hence flow of data in react is unidirectional.
• Props are immutable, that is their value can not be changed.
ReactJS Props :
Ways to write Props :
Props with class based component :
• Props are useful when a component is receiving data from its parent
component.

• What should we use in case if we have to store component data?

• For such requirement make a use of states.

ReactJS States :
• React uses an object called state, to observe the changes made to the
component and guide the component to behave accordingly.
• States are variable declared within the class component which holds
some information that may change over the lifetime of component.
• They are mutable as they hold the data that change over time and
controls the behaviour of the component after each change.
• They are generally updated by event handler and are modified using
setState() method.
• Working of States :
Difference between states and props :