React js is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It allows creating reusable UI components that can be nested to build complex applications. A React component may maintain internal state and re-render when data changes. React uses a declarative paradigm that makes code more predictable and easier to debug. To use React, install Node packages and create a new project using create-react-app. Components let you break up the UI into reusable pieces responsible for rendering HTML. Components can be stateful class components or stateless function components. Components can be created using ES6 class syntax or function syntax and can be nested. Choosing between class and function depends on requirements like using

1. React js
PPT by - Rohit Kumar
Anmol Pandita
Akshit Sodhi

2. | What is Reacts js |
React is a free and open-source front-end JavaScript library for building
user interfaces based on UI components. It is created by Facebook. A React
application is made of multiple components, each responsible for rendering
a small, reusable piece of HTML. Components can be nested within other
components to allow complex applications to be built out of simple
building blocks. A component may also maintain an internal state – for
example, a TabList component may store a variable corresponding to the
currently open tab. React uses a declarative paradigm that makes it easier
to reason about your application and aims to be both efficient and
flexible. It designs simple views for each state in your application, and
React will efficiently update and render just the right component when
your data changes. The declarative view makes your code more predictable
and easier to debug.

3. | How to Use & Environment Setup |
React. js is an open-source JavaScript library that is used for building
user interfaces specifically for single-page applications. It's used for
handling the view layer for web and mobile apps. React also allows us to
create reusable UI components.
Prerequisites: Download Node packages with their latest version.
Example: Create a new React project by using the command below:
Syntax: npx create-react-app app_name
And to run the React app we can use the command “npm start” and it’ll load
the react app in local host i.e. localhost:3000

4. | Components |
React components let you break up the user interface into separate pieces that can
then be reused and handled independently. A React component takes an optional
input and returns a React element which is rendered on the screen.
A React component can be either “stateful” or “stateless.”
“Stateful” components are of the class type, while “stateless” components are of
the function type.

5. | Creating a Simple Component |
In React, you don’t need to create a class or functional-based component
with lines of code just to print "Hello World." The component can be
created with ES6 syntax in a single line, In this example, the ES6 arrow
function has been used. This is the smallest component we can create for a
React app.
In the example on the left hand side, the
component is created in the same file and
consumed within the render() function as
<HelloWorld /> So when you run this
example, the output will be the static
string.

6. | Creating a Class-Based Component |
In React, a component can also be written using ES6 classes syntax, using
the arrow function i.e. “=>” Class-based components are a widely used
approach to creating components in React if an app requires the state to
be used.
Create a class-based component like this:
As you can see in the above
example, Component is being
imported from the package react,
which allows us to convert the
class into the component using ES6
syntax. Apart from
the component keyword, the file
also has an additional section
called render () that is the
function used to render the
various HTML elements into the DOM
once the business logic has been
implemented.
You can embed another class-based
child component into any class-
based component as, explained in

7. | Creating a Function-Based Component |
You can also create a component in React using the function-based approach, which
uses the normal JavaScript function. To use a function-based component, export
the function using the export keyword. The functional component can look like
this:
As you can see in the example, a
function-based component is created
called FunctionComponent, and from
return (), the element is returned just
as it would be from a class-based
component. One thing to notice in the
example is that the arrow function has
been used to create the component;
hence, we can also use the keyword
function, as explained below.
You can choose any one of the options shown
to create a function-based component that
can be exported and consumed into other
components.

8. | Choosing Component |
Well, it completely depends on your
structural requirements, but there
are advantages to each. Use a class
component if you want to use local
state, different lifecycle hooks,
multiple event handlers, or dynamic
state values based on user activity.
Use a function component when you
don’t need to write business logic
and just need to render specific UI
elements based on the props value,.
Using hooks, you can use state into
the function component as well.
| Conclusion |
In this part, you have learned that what a component is and
how to create a component using the class-based approach and
the function-based approach. You can choose either of those
two options to create a component based on the business
requirements of your ReactJs app.

9. | Introducing Hooks |
Hooks are a new addition in React 16.8. They let you use state and other React
features without writing a class. This new function useState is the first “Hook”
we’ll learn about.
No Breaking Changes
Before we continue, note that Hooks are:
• Completely opt-in. You can try Hooks in a
few components without rewriting any
existing code. But you don’t have to learn
or use Hooks right now if you don’t want
to.
• 100% backwards-compatible. Hooks don’t
contain any breaking changes.
• Available now. Hooks are now available
with the release of v16.8.0.
There are no plans to remove classes from
React.
Hooks let you use more of React’s features
without classes.

10. Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a
more direct API to the React concepts you already know: props, state, context,
refs, and lifecycle. As we will show later, Hooks also offer a new powerful way
to combine them.
With Hooks, you can extract stateful logic from a component so it can be tested
independently and reused. Hooks allow you to reuse stateful logic without
changing your component hierarchy. This makes it easy to share Hooks among many
components or with the community.
In many cases it’s not possible to break components into smaller ones because the
stateful logic is all over the place. It’s also difficult to test them. This is
one of the reasons many people prefer to combine React with a separate state
management library. However, that often introduces too much abstraction, requires
you to jump between different files, and makes reusing components more difficult.
To solve this, Hooks let you split one component into smaller functions based on
what pieces are related (such as setting up a subscription or fetching data),
rather than forcing a split based on lifecycle methods. You may also opt into
managing the component’s local state with a reducer to make it more predictable.
| Hooks |

11. | Advantages Of Hooks |
For React developers, Hooks convey ample benefits as follows:
• It revolutionizes the way you write components
• You can write concise and clearer code.
• Hooks are simpler to work with and test. Code would appear cleaner and easier to read.
• A related logic could be tightly coupled inside a custom hook.
• It simplifies how to make code more composable and reusable.
• Unlike HOCs, they don’t create another element in DOM.
• Hooks would work more efficiently with the future React optimizations. For example, it would work
ahead of time compilation as well as components folding.
• Components folding may be implemented in the future. It suggests that for code elimination at
compile-time, hooks are simple to reuse the stateful logic.

12. | State and Props |
State
The state is an updatable structure that is used to contain data or information about the component and
can change over time. The change in state can happen as a response to user action or system event. It is
the heart of the react component which determines the behaviour of the component and how it will render.
A state must be kept as simple as possible. It represents the component's local state or information. It can
only be accessed or modified inside the component or by the component directly.
Props
Props are read-only components. It is an object which stores the value of attributes of a tag and work
similar to the HTML attributes. It allows passing data from one component to other components. It is similar
to function arguments and can be passed to the component the same way as arguments passed in a
function. Props are immutable so we cannot modify the props from inside the component.

13. | State |

14. | Props |

15. | Redux |
React Redux is the official React binding for Redux. It allows React components to
read data from a Redux Store, and dispatch Actions to the Store to update data.
Redux helps apps to scale by providing a sensible way to manage state through a
unidirectional data flow model. React Redux is conceptually simple. It subscribes
to the Redux store, checks to see if the data which your component wants have
changed, and re-renders your component.
Now Redux is basically a global store. It doesn’t matter where you push things in
to the Redux store as you can see in the above picture you have access to it
everywhere you can access this from every single component so its actually two
way communication you can push anything into the global store at any point and
you can also pull things from that global store at any point.
Why is Redux good with React?
This is because React was designed with the concept of states and lifecycles.
And in React, state can also not be modified directly, it can only be done
via the function setState. This makes it easier for Redux concepts to be
applied because they share they same understanding and behavior of a state
object.

16. | Redux |

17. How Redux works?
The way Redux works is simple. There is a central store that holds the entire state of
the application. Each component can access the stored state without having to send
down props from one component to another.
There are three core components in Redux — actions, store, and reducers.
What are Redux actions?
Simply put, Redux actions are events. They are the only way you can send data from
your application to your Redux store. The data can be from user interactions, API
calls, or even form submissions. Actions are plain JavaScript objects that must have a
type property to indicate the type of action to be carried out, and a payload object
that contains the information that should be used to change the state. Actions are
created via an action creator, which in simple terms is a function that returns an
action. And actions are executed using the store.dispatch() method which sends the
action to the store.
What are Redux reducers?
Reducers are pure functions that take the current state of an application, perform
an action, and return a new state. The reducer handles how the state (application
data) will change in response to an action. “A pure function is a function that
will always return the same value if given the same parameters. i.e. the function
depends on only the parameters and no external data.” It is based on the reduce
function in JavaScript, where a single value is calculated from multiple values
after a callback function has been carried out.

18. What is Redux Store?
The store is a “container” (really a JavaScript object) that holds the application
state, and the only way the state can change is through actions dispatched to the
store. Redux allows individual components connect to the store and apply changes to
it by dispatching actions. It is highly recommended to keep only one store in any
Redux application. You can access the state stored, update the state, and register
or unregister listeners via helper methods.
Redux middleware
Redux allows developers to intercept all actions dispatched from components before
they are passed to the reducer function. This interception is done via middleware.
Building on the example login component discussed in the last section, we might want
to sanitize the user’s input before it reaches our store for further processing. This
can be achieved via Redux middleware. Technically, middleware are functions that call
the next method received in an argument after processing the current action. These
are called after every dispatch.
Why use Redux?
When using Redux with React, states will no longer need to be lifted up. This makes
it easier for you to trace which action causes any change. As you can see in the
example above, the component does not need to provide any state or method for its
children components to share data among themselves. Everything is handled by Redux.
This greatly simplifies the app and makes it easier to maintain. This is the primary
reason why you should use Redux, but it’s not the only benefit. Take a look at the
list below for a summary of what you stand to gain by using Redux for state
management.

19. | Firebase |
It is a mobile application development platform from Google with powerful features
for developing, handling, and enhancing applications. Firebase is a backend
platform for building web and mobile applications.
Firebase is fundamentally a collection of tools developers can rely on, creating
applications and expanding them based on demand.
Firebase aims to solve three main problems for developers:
• Build an app, fast
• Release and monitor an app with confidence
• Engage users,
Developers relying on this platform get access to services that they would have to
develop themselves, and it enables them to lay focus on delivering robust
application experiences.
Some of the Google Firebase platform’s standout features include databases,
authentication, push messages, analytics, file storage, and much more.
Since the services are cloud-hosted, developers can smoothly perform on-demand
scaling without any hassle. Firebase is currently among the top app development
platforms relied upon by developers across the globe.

20. | Advantages |
1. Free to start
2. Development speed
3. End-to-end app development platform
4. Powered by Google
5. Developers can focus on frontend development
6. It’s serverless
7. It offers machine learning capabilities
8. Generates traffic to your apps
9. Error monitoring
10.Security
1. It’s not Open-Source
2. Vendor Lock-In
3. Firebase does not work in many countries
4. Only NoSQL databases are available
5. Slow Queries
6. Not all services are free to start
7. It’s not cheap and pricing is difficult to forecast
8. Runs only on Google Cloud
9. Dedicated Servers & Enterprise Support are not an option
10.Does not provide GraphSQL APIs
| Limitations |

21. Firebase Privacy
Firebase Privacy Policy supports GDRP – General Data Protection Regulation from
European Union and CCPA- California Consumer Privacy act. Also, Firebase complies
with multiple ISO and SOC certifications, including 27001, 27017, 27018, SOC1,
SOC2, and SOC3. Firebase feeds service data to Google for non-Firebase services.
This option is selected by default; to avoid it; users must uncheck the box.
Firebase Build Features
Build is an expansive feature set of Firebase with various components that enable
developers to stay on top of their application development requirements.
Authentication is a Firebase feature offering ready-to-use UI libraries, backends,
and convenient SDKs for user application authentication. Authentication is
supported through phone numbers, passwords, and providers such as Google, Twitter,
Facebook, and others. Authentication enjoys integration with different Firebase
services, and it makes use of OpenID Connect and OAuth 2.0 and allows custom
backend integration.
Hosting Firebase has various scalable and agile hosting features for Microservices,
web apps, and several other content types. Content can be hosted across different
categories, and users have the ability to avail SSL protection and single-click
rollbacks. (34)

22. | Advantages of React JS|
•Intuitive
ReactJS is extremely intuitive to work with and provides interactivity to the layout of any
UI. Plus, it enables fast and quality assured application development that in turn saves
tome for both - clients and developers.
•Declarative
ReactJS enables significant data changes that result in automatic alteration in the selected
parts of user interfaces. Owing to this progressive functionality, there is no additional
function that you need to perform to update your user interface.
•Provides Reusable Components
ReactJS provides reusable components that developers have the authority to reuse and create
a new application . Reusability is exactly like a remedy for developers. This platform gives
the developers the authority to reuse the components build for some other application having
the same functionality. Thereby, reducing the development effort and ensuring a flawless
performance.
•JavaScript library
A strong blend of JavaScript and HTML syntax is always used, which automatically simplifies
the entire process of writing code for the planned project. The JS library consists several
functions including one that converts the HTML components into required functions and
transforms the entire project so that it is easy to understand.
•Components Support
ReactJS is a perfect combination of JavaScript and HTML tags. The usage of the HTML tags and
JS codes, make it easy to deal with a vast set of data containing the document object model.
During this time, ReactJS works as a mediator which represents the DOM and assists to decide
which component needs changes to get the exact results.

23. THANK YOU!