React JS is a JavaScript library for building reusable UI components. It uses a virtual DOM for efficient rendering. Components are the building blocks of React, and can be either functional or class-based. Functional components are simpler while class components can maintain state. Props are passed down from parent to child components while state is local. The virtual DOM improves performance by only updating the real DOM with actual changes.

1. Introduction to React JS

2. • ReactJS is a declarative, efficient, and flexible JavaScript
library 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.
• Most people think it as a Framework But it is just a library
developed by Facebook to solve some problems that we were facing
earlier
• React was created by Jordan Walke, a software engineer at Meta, who
released an early prototype of React called "FaxJS“. It was first deployed on
Facebook's News Feed in 2011 and later on Instagram in 2012. It was open-
sourced at JSConf US in May 2013.
INTRODUCTION

3. React Features
•JSX: -- JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like
syntax used by ReactJS
•Components:- ReactJS is all about components. ReactJS application is made up of multiple
components, and each component has its own logic and controls. These components can be reusable
which help you to maintain the code when working on larger scale projects.
•One-way Data Binding:- ReactJS is designed in such a manner that follows unidirectional data flow
or one-way data binding. The benefits of one-way data binding give you better control throughout the
application
•Virtual DOM:- A virtual DOM object is a representation of the original DOM object. It works like a one-
way data binding. Whenever any modifications happen in the web application, the entire UI is re-
rendered in virtual DOM representation. Then it checks the difference between the previous DOM
representation and new DOM. Once it has done, the real DOM will update only the things that have
actually changed. This makes the application faster, and there is no wastage of memory.

4. Virtual Dom
DOM: DOM stands for ‘Document Object Model’. In simple terms, it is a structured representation of the HTML elements that
are present in a webpage or web-app. DOM represents the entire UI of your application. The DOM is represented as a tree data
structure. It contains a node for each UI element present in the web document.
Updating DOM: We Make use of ‘getElementById()’ or ‘getElementsByClassName()’ methods to modify the content of
DOM. Every time there is a change in the state of your application, the DOM gets updated to reflect that change in the
UI. Like this each time there is a component update, the DOM needs to be updated and the UI components have to be re-
rendered.
Virtual DOM: React uses Virtual DOM exists which is like a lightweight copy of the actual DOM(a virtual
representation of the DOM). So for every object that exists in the original DOM, there is an object for that in
React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the
document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the
screen. So each time there is a change in the state of our application, the virtual DOM gets updated first
instead of the real DOM.
How Virtual DOM actually Works?:When anything new is added to the application, a virtual DOM is created
and it is represented as a tree. Each element in the application is a node in this tree. So, whenever there is a
change in the state of any element, a new Virtual DOM tree is created. This new Virtual DOM tree is then
compared with the previous Virtual DOM tree and make a note of the changes. After this, it finds the best
possible ways to make these changes to the real DOM. Now only the updated elements will get rendered on
the page again.

5. Advantage of ReactJS
1. Easy to Learn and Use
2. Creating Dynamic Web Applications Becomes Easier
3. Reusable Components
4. Performance Enhancement
5.Excellent cross-platform support.

6. Environment Setup
• Install Node js Latest Version
• Install Gitbash Latest Version (It Acts Like a Linux Terminal )
• Install Vs Code code Editor
• To Create a new React App type the Command
• npx create-react-app

7. Components
Components are independent and reusable bits of code. They serve the same
purpose as JavaScript functions, but work in isolation and return HTML.
every application you will develop in React will be made up of pieces called
components. Components make the task of building UIs much easier.
UI broken down into multiple individual pieces called components and work on
them independently and merge them all in a parent component which will be your
final UI.

8. In React, we mainly have two types of components:
• Functional
Components:
• Functional components
are simply JavaScript
functions. We can
create a functional
component in React by
writing a JavaScript
function.
• Syntax:
• const Democomponent=()=>
• {
• return (
• <h1>Hello World </h1>);
• }
Functional Component

9. In React, we mainly have two types of components:
• Class Components:
• The class components are
a little more complex than
the functional
components. The
functional components
are not aware of the other
components in your
program whereas the
class components can
work with each other. We
can pass data from one
class component to other
class components.
• Syntax:
class Democomponent extends
React.Component
{ render(){
return <h1>Helloh1>;
}
}
Functional Component

10. Diff between functional & Class Component
• Functional Component
• Simple functions
• Solution without using logic
• Mainly Responsible for UI
• Stateless/Presentational
• Class Component
• More features
• Maintain their Own private Data
• Stateful
• More Complex Logc

11. State vs Props
• Props
• Props get Passed to the
Component
• Props are immutable
• Props---functional
• This.propsClass Comp
• State
• State is Managed within the
Component
• Variables declared in Functional
Body
• Use StateHook---Functional
• This.state-Class

12. Destructuring of Props
• Destructuring is a characteristic of JavaScript, It is used to take out
sections of data from an array or objects, We can assign them to new
own variables created by the developer.
• In destructuring, It does not change an array or any object, it makes a
copy of the desired object or array element by assigning them in its
own new variables, later we can use this new variable in React (class
or functional) components.
• It makes the code more clear. When we access the props
using this keyword, we have to use this/ this.props throughout the
program, but by the use of restructuring, we can discard this/
this.props by assigning them in new variables.
• This is very difficult to monitor props in complex applications, so by
assigning these props in new own variables we can make a code
more readable.

13. Conditional
Rendering
Your components will often need to display different things depending on different
conditions.
In React, you can conditionally render JSX using JavaScript syntax like
if statements, &&, and ? : operators.