Scribd
Upload
9 views

Why React-1

Uploaded by

Charul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Why React-1

Uploaded by

Charul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Why React?

What is React?
A JavaScript library for building user interfaces
It's not a mega framework. It's not a full-stack solution that's
going to handle everything from the database to real-time
updates over web socket connections.
We don't actually want most of these pre-packaged solutions

2
React is just the view
React is generally thought of as the view layer in an
application
Just like jQuery manipulates UI elements,React
components change what the user sees.
React fits in our frontend code

3
React is just the view
● We have some application logic that
generates some data.
● We want to render this data to the UI,
● so we pass it to a React component,
● which handles the job of getting the
HTML into the page.
● React appears to be yet another
rendering technology.
4
Simplicity is good

5
Simplicity is good

React is divided into two major APIs.


React DOM - This is the API that's used to perform
the actual rendering on a web page.
React component API - These are the parts of the
page that are actually rendered by React DOM.

6
Simplicity is good
React component, we have the following areas:
● Data: This is data that comes from somewhere (the component
doesn't care where), and is rendered by the component
● Lifecycle: These are methods that we implement that respond to
changes in the lifecycle of the component. For example, the
component is about to be rendered
● Events: This is code that we write for responding to user
interactions
● JSX: This is the syntax of React components used to describe UI
structures
7
Declarative UI structure
● The syntax used by React components is called JSX (JavaScript XML).
● A component renders content by returning some JSX.
● The JSX itself is usually HTML markup, mixed with custom tags for the React
components.
● React components don't require executing steps in an imperative way to render
content.
● This is why JSX is so central to React components.
● The XML-style syntax makes it easy to describe what the UI should look like.
● That is, what are the HTML elements that this component is going to render? This is
called declarative programming, and is very well suited for UI development.

8
Time and data
● React components rely on data being passed into them.
● This data represents the dynamic aspects of the UI.
● For example, a UI element that's rendered based on a Boolean
value could change the next time the component is rendered.
● Each time the React component is rendered, it's like taking a
snapshot of the JSX at that exact moment in time.
● As our application moves forward through time, we have an
ordered collection of rendered user interface components

9
Performance matters
● The declarative approach does present
us with one challenge: performance.
● For example, having a declarative UI
structure is fine for the initial
rendering, because there's nothing on
the page yet.
● So, the React renderer can look at the
structure declared in JSX, and render
it into the browser DOM.

10
Performance matters
● On the initial render, React components and their JSX are
no different from other template libraries.
● Components are declarative for the initial render, and they
stay this way even as they're rerendered.
● It's what React does under the hood that makes re-rendering
declarative UI structures possible.

11
Performance matters

● React has something called the virtual DOM, which


is used to keep a representation of the real DOM
elements in memory.
● It does this so that each time we re-render a
component, it can compare the new content, to the
content that's already displayed on the page.

12
Performance matters

Based on the difference,


the virtual DOM can
execute the imperative
steps necessary to make
the
changes.

13
The right level of abstraction
React doesn't have a lot of it, and yet the abstractions that React
implements are crucial to its success.
React Toast will probably never be a thing, unfortunately.

14
Thanks!
Any questions?

15

You might also like