Harshita Maheshwari

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 1
➢ Introduction to ReactJS
➢ Why ReactJS
➢ How to install
➢ Features
➢ Component – Functional and Class
➢ Props
➢ State
➢ Component LifeCycle Methods
➢ Event Handling
➢ Styling with CSS Basic
➢ Conditional Rendering
➢ List Rendering
➢ Fragment
➢ Form Handling
➢ Refs
➢ Error Boundary
➢ Context
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 2
React is a JavaScript library for building fast and interactive
user interface for the web as well as mobile applications.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 3
➢ Open-source

➢ Reusable component-based front-end library

➢ In a model view controller architecture, React is the “View” which is

responsible for how the app looks and feels.

➢ Rich ecosystem

➢ Not a framework

➢ Focus on UI

➢ Created by Jordan Walke, who was a software engineer at Facebook

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 4
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 5
➢ Easy creation of Dynamic web applications
➢ Performance enhancements
➢ Reusable components
➢ Declarative – Tell React what you ant and React will build the
actual UI
➢ Unidirectional Data Flow
➢ Seamlessly Integrate react into any of your Applications.
➢ Portion of your webpage or a complete page or even an entire
application itself.
➢ React Native for mobile Applications.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 6
➢ HTML, CSS and JavaScript Fundamentals
➢ ES6 Features
➢ JavaScript – “this keyword”, filter, map and reducer
➢ ES6 – let & const, arrow function, template literals, default
parameter, destructing assignment, rest and spread operator.

Software Requirements:-
[Link] and NPM should be installed in your System
[Link] Editor – (Notepad, Notepad++ or any IDE(visual studio code
etc)

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 7
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 8
 src/ - Contains all of our react codebase.

[Link] - Base react component.

[Link] – contains dependencies

and scripts required for project.

Node_modules – contains all dependencies

Files which you have installed.

[Link]- Only HTML file as we are creating

SPA(single Page Application)

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 9
➢JSX

➢Virtual DOM

➢Performance

➢One Way Data Binding

➢Extensions

➢Debugging

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 10
➢JSX is a syntax extension to JavaScript. It is used with React to describe
what the UI should look like.
➢By using JSX, we can write HTML structure in the same file that contains
JavaScript Code.
➢JSX helps in making the code easier to understand and debug as it avoids
usage of JS DOM structure which are rather complex.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 11
React keeps a lightweight representation of he Real DOM in the memory,
and that is known as the Virtual DOM

Manipulating Real DOM is much slower than manipulating virtual DOM,

because nothing gets drawn onscreen.

When the state of an abject changes, virtual DOM changes only that object
in the Real DOM instead of updating all the objects.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 12
React uses Virtual DOM that makes the web apps fast.

Complex User Interface is broken down into individual

components allowing multiple users to work on each
component simultaneously.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 13
React’s one way data binding keeps everything modular
and fast.

A unidirectional data flow means that when designing a

React app you often nest child components within
parent components.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 14
➢ React goes beyond simple UI and has many extensions for
complete application architecture support.

➢ It provides server-side rendering.

➢ Supports mobile app development.

➢ Extended with flux and Redux ,among others.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 15
➢ React applications are extremely easy to test due to a large
developer community.

➢ Facebook even provides a small browser extension that makes

React debugging faster and easier

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 16
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 17
➢ Components are the building blocks of any React app.
➢ It allow us to split the UI into independent and reusable pieces.

A component is combination of
1. Template using HTML
2. User Interactivity using JS
3. Applying Styles using CSS

Note: Always start component names with a capital letter. React treats
components starting with lowercase letters as DOM tags.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 18
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 19
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 20
[Link]- const Employee=(data)=> {
return <div><p>Name : {[Link]}</p>
<p>Salary : {[Link]}</p></div>;
}

In [Link] -
<Employee name="Smith" Salary="20000" />
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 21
class Employee extends Component
{
render(){
return <div> <h2>Employee Details...</h2>
<p> <label>Name : <b>{[Link]}</b></label> </p>
<Department Name={[Link]}/> </div>;
}}
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 22
Functional Class

Simple Function More feature rich

Use Func components as much as Maintain their own private data-

possible state

Absence of ‘this’ keyword Complex UI logic

Solution without using state Provide LifeCycle Hooks

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 23
➢ Props is short for properties, that allow us to pass argument or data to
components.
➢ Props are passed to components in the way similar to the HTML tag
attributes.
For Example-
➢ They are used to – [Link]- const Employee=(props)=> {
 Pass custom data to your return <div><p>Name : {[Link]}</p>
component <p>Salary : {[Link]}</p></div>;
}
 Trigger state changes

In [Link] -
<Employee
name="Smith" Salary="20000" />

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 24
➢ State of a component is an object that holds some data that may
change throughout the component lifecycle..
➢ We define initial state and
then we just have to notify
that the state is changed and
the react will automatically
Render those changes on the
Front end behind the scenes.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 25
props state

Props get passed to the State is managed within the

component component
Functional parameters Variable declared in the function
body
Props are immutable States can be changed

props – functional components useState Hook – Functional

[Link] – class components Components
[Link] – Class Component

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 26
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 27
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 28
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 29
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 30
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 31
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 32
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 33
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 34
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 35
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 36
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 37
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 38
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 39
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 40
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 41
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 42
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 43
➢ Just like HTML, React can perform actions based on user events.
➢ React has the same events as HTML: click, change, mouseover
etc.
➢ React events are written in camelCase syntax.
➢ React event handlers are written inside curly braces.
➢ For methods in React, the this keyword should represent the
component that owns the method.
➢ That is why you should use arrow functions. With arrow
functions, this will always represent the object that defined the
arrow function.

. Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 44
class App extends Component {
clickHandler = () => { alert(“Button Clicked”); }
render() {
return (
<button onClick={[Link]}>Click Me</button>
);
}
}

export default App

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 45
Passing Arguments : -
 Make an anonymous arrow function
<button onClick={() => [Link](“Hello")}>
Click Me!!</button>
 Bind the event handler to this
<button onClick={[Link](this, “Hello")}>Click
Me!!</button>

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 46
 CSS Stylesheets
 Inline Styling
 CSS Modules
 CSS in JS Libraries (Styled Component)

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 47
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 48
The CSS inside a module is available only for the component
that imported it.
Create the CSS module with the .[Link].
For Example : -
[Link] [Link]

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 49
Conditional rendering is a term to describe the ability to render different user interface (UI)
markup if a condition is true or false. In React, it allows us to render different elements or
components based on a condition. This concept is applied often in the following scenarios:
➢ Rendering external data from an API.
➢ Showing or hiding elements.
➢ Toggling application functionality.
➢ Implementing permission levels.
➢ Handling authentication and authorization.

Conditional Rendering Approaches:

1. If/else
2. Element Variables
3. Ternary conditional operator
4. Short Circuit Operator

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 50
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 51
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 52
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 53
Short circuit evaluation is a technique
used to ensure that there are no side
effects during the evaluation of
operands in an expression. The
logical && helps you specify that an
action should be taken only on one
condition, otherwise, it would be
ignored entirely.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 54
Using array index:

[Link]():

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 55
Now we will see example of having an array with key-value pair in each array having
multiple values:

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 56
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 57
When we fetch list in sub-component then we will find there are errors related to keys in console.
It will show a warning related to keys as each child in a list should have a unique key prop. This error
can be resolved by defining the key to each list item generated using JSX. The key defined should
not be the same for any list item.

The important point that needs to be kept in mind when using key prop is that key prop cannot be
used in child component.
Importance of key prop:
➢ Key prop helps to easily identify which item is added, updated or removed.
➢ Key prop helps in updating user interface efficiently.
➢ Keys provide stable identity to elements.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 58
We know that we make use of the render method inside a component whenever we want
to render something to the screen. We may render a single element or multiple elements,
though rendering multiple elements will require a ‘div’ tag around the content as the
render method will only render a single root node inside it at a time.

when we are trying to render more than one root element we have to put the entire
content inside the ‘div’ tag which is not loved by many developers. So in React 16.2
version, Fragments were introduced, and we use them instead of the extraneous ‘div’ tag.

Syntax:
<[Link]> Shorthand Fragment :
<h2>Child-1</h2> <>
<p> Child-2</p> <h2>Child-1</h2>
</[Link]> <p> Child-2</p>
</>

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 59
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 60
React offers a stateful, reactive approach to build a form. The
component rather than the DOM usually handles the React form. In
React, the form is usually implemented by using controlled components.
There are mainly two types of form input in React.

➢ Uncontrolled component: Where form data is handled by the DOM

itself. We will use ref to get the input values and Perform Operations
using this data.

➢ Controlled component: An input form element whose value is

controlled by React in this way is called a “controlled input or
Controlled Component”.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 61
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 62
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 63
To write an uncontrolled component, you need to use a ref to get form values from the DOM.
In other words, there is no need to write an event handler for every state update. You can use a
ref to access the input field value of the form from the DOM.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 64
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 65
Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute
which makes it possible to store a reference to particular DOM nodes or React elements.
When to Use Refs:
➢ Refs can be used in the following cases:
➢ When we need DOM measurements such as managing focus, text selection, or media
playback.
➢ It is used in triggering imperative animations.
➢ When integrating with third-party DOM libraries.
➢ It can also use as in callbacks.

When to not use Refs:

➢ Its use should be avoided for anything that can be done declaratively. For example,
instead of using open() and close() methods on a Dialog component, you need to pass
an isOpen prop to it.
➢ You should have to avoid overuse of the Refs.
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 66
Refs can be created by using [Link]().

How to access Refs:

const node = [Link];

Refs current Properties:

➢ The ref value differs depending on the type of the node:
➢ When the ref attribute is used in HTML element, the ref created
with [Link]() receives the underlying DOM element as its current property.
➢ If the ref attribute is used on a custom class component, then ref object receives
the mounted instance of the component as its current property.
➢ The ref attribute cannot be used on function components because they don't
have instances.

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 67
it gives more control when the refs are set and unset. Instead of
creating refs by createRef() method.

<input type="text" ref={element => [Link] = element} />

It can be accessed as below:

[Link]

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 68
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 69
A class component that implements either one or both the life cycle methods
getDerivedStateFromError or componentDidCatch becomes an error boundary.

The static method getDerivedStateFromError method is used to render a fallback UI after

an error is thrown and the componentDidCatch method is used to log the error
information.

Error boundaries do not catch errors inside event handlers.

Error boundaries do not catch errors also for:
• Any Asynchronous code we write (e.g. setTimeout )
• For Server side rendering code
• For Errors thrown in the error boundary component class itself (rather than its children)

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 70
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 71
Context allows passing data through the component tree without passing props down
manually at every level.
In React application, we passed data in a top-down approach via props. Sometimes
it is inconvenient for certain types of props that are required by many components in
the React application. Context provides a way to pass values between components
without explicitly passing a prop through every level of the component tree.

There are three main steps to use the React context into the React application:
➢ Create context
➢ Setup a context provider and define the data which you want to store.
➢ Use a context consumer whenever you need the data from the store

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 72
The React Context API is a component structure, which allows us to share data across all levels of
the application. The main aim of Context API is to solve the problem of prop drilling (also called
"Threading"). The Context API in React are given below.

➢ [Link] :
const MyContext = [Link](defaultValue);
➢ [Link]
<[Link] value={/* some value */}>
➢ [Link]
<[Link]>
{value => /* render something which is based on the context value */}
</[Link]>
➢ [Link]

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 73
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 74
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 75
Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 76
 Thank you !!

Infoway Technologies Pvt. Ltd., 3rd Floor Commerce Centre, Rambaug Colony, Paud Road Pune 411038 77