Scribd
Upload
7 views

How React WorksN

react

Uploaded by

Smit Patel
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
7 views

How React WorksN

react

Uploaded by

Smit Patel
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/ 38

Web Application Development

How React Works


 When you work with React, it’s more than likely that
you’ll be creating your apps with a syntax called JSX.
JSX is a tag-based JavaScript syntax that looks a lot
like HTML.

 To truly understand React though, we need to


understand its most atomic units:
 React elements.
 React components.
 Fiber and how React makes efficient choices about
rendering and reconciliation.

09/11/2024 Web Application Development 2


Page Setup
 Inorder to work with React in the browser, we need to
include two libraries:
 React and
 ReactDOM.

 React is the library for creating views.


 ReactDOM is the library used to actually render the UI
in the browser.
 Both libraries are available as scripts from the unpkg
CDN.

09/11/2024 Web Application Development 3


HTML Document Setup with React
 setting up an HTML document:
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>React Samples</title>
 </head>
 <body>
 <!-- Target container -->
 <div id="root"></div>
 <!-- React library & ReactDOM (Development Version)-->
 <script
 src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
 <script src="https://unpkg.com/[email protected]/umd/react-
 dom.development.js"></script>
 <script>
 // Pure React and JavaScript code
 </script>
 </body>
 </html>

09/11/2024 Web Application Development 4


requirements for working with React
in the browser
 These are the minimum requirements for working with
React in the browser.
 You can place your JavaScript in a separate file, but it
must be loaded somewhere in the page after React has
been loaded.
 We’re going to be using the development version of
React to see all of the error messages and warnings in
the browser console.
 You can choose to use the minified production version
using react.production.min.js and react-
dom.production.min.js which will strip away those
warnings.

09/11/2024 Web Application Development 5


React Elements
 HTML is simply a set of instructions that a browser
follows when constructing the document object model,
or DOM.
 The elements that make up an HTML document
become DOM elements when the browser loads HTML
and renders the user interface.
 To construct an HTML hierarchy for a recipe. A possible
solution for such a task might look something like this:

09/11/2024 Web Application Development 6


HTML hierarchy for a recipe
 <section id="baked-salmon">
 <h1>Baked Salmon</h1>
 <ul class="ingredients">
 <li>2 lb salmon</li>
 <li>5 sprigs fresh rosemary</li>
 <li>2 tablespoons olive oil</li>
 <li>2 small lemons</li>
 <li>1 teaspoon kosher salt</li>
 <li>4 cloves of chopped garlic</li>
 </ul>
 <section class="instructions">
 <h2>Cooking Instructions</h2>
 <p>Preheat the oven to 375 degrees.</p>
 <p>Lightly coat aluminum foil with oil.</p>
 <p>Place salmon on foil</p>
 <p>Cover with rosemary, sliced lemons, chopped garlic.</p>
 <p>Bake for 15-20 minutes until cooked through.</p>
 <p>Remove from oven.</p>
 </section>
 </section>

09/11/2024 Web Application Development 7


 In HTML, elements relate to each other in a hierarchy
that resembles a family tree.
 We could say that the root element (in this case a
section) has three children:
I. a heading,
II. an unordered list of ingredients,
III. and a section for the instructions.

 The DOM API is a collection of objects that JavaScript


can use to interact with the browser to modify the DOM.
 If you have used document.createElement or
document.appendChild, you have worked with the DOM
API.
09/11/2024 Web Application Development 8
 React is a library that is designed to update the browser
DOM for us.

 We no longer have to be concerned with the


complexities associated with building high-performing
SPAs because React can do that for us.

 With React, we do not interact with the DOM API


directly. Instead, we provide instructions for what we
want React to build and React will take care of
rendering and reconciling the elements that we have
instructed it to create.

09/11/2024 Web Application Development 9


React Elements
 The browser DOM is made up of DOM elements.
Similarly, the React DOM is made up of React
elements.
 DOM elements and React elements may look the
same, but they are actually quite different.
 A React element is a description of what the actual
DOM element should look like.
 React elements are the instructions for how the browser
DOM should be created.

09/11/2024 Web Application Development 10


 We can create a React element to represent an h1
using React.createElement:

React.createElement("h1", { id: "recipe-0" }, "Baked


Salmon");

The first argument defines the type of element that we


wish to create. In this case, we want to create an h1
element.

The second argument represents the element’s


properties. This h1 currently has an id of recipe-0.

09/11/2024 Web Application Development 11


The third argument represents the element’s children, any
nodes that are inserted between the opening and closing
tag, in this case just some text.

During rendering, React will convert this element to an


actual DOM element:

<h1 id="recipe-0">Baked Salmon</h1>

09/11/2024 Web Application Development 12


 The properties are similarly applied to the new DOM
element:
 the properties are added to the tag as attributes, and
the child text is added as text within the element.

 A React element is just a JavaScript literal that tells


React how to construct the DOM element.
 If you were to log this element, it would look like this:
 {
 }
 $$typeof: Symbol(React.element),
 "type": "h1",
 "key": null,
 "ref": null,
 "props": {id: "recipe-0", children: "Baked Salmon"},
 "_owner": null,
 "_store": {}

09/11/2024 Web Application Development 13


 This is the structure of a React element.
 There are fields that are used by React: _owner, _store,
$$typeof. The key and ref fields are important to React
elements.

09/11/2024 Web Application Development 14


The type and props fields
 The type property of the React element tells React what
type of HTML or SVG element to create.

 The props property represents the data and child


elements required to construct a DOM element.

 The children property is for displaying other nested


elements as text.

09/11/2024 Web Application Development 15


CREATING ELEMENTS
 use the React.createElement function.

ReactDOM
Once we have created a React element, we’ll want to see
it in the browser.
ReactDOM contains the tools necessary to render React
elements in the browser.
ReactDOM is where we will find the render method.

09/11/2024 Web Application Development 16


 We can render a React element, including its children,
to the DOM with ReactDOM.render.

 The element that we wish to render is passed as the


first argument and the second argument is the target
node, where we should render the element:

const dish = React.createElement("h1", null, "Baked


Salmon");

ReactDOM.render(dish,document.getElementById("root"))
;

09/11/2024 Web Application Development 17


 Rendering the title element to the DOM would add an
h1 element to the div with the id of root, which we would
already have defined in our HTML. We build this div
inside the body tag:

<body>
<div id="root">
<h1>Baked Salmon</h1>
</div>
</body>

09/11/2024 Web Application Development 18


 Anything related to rendering elements to the DOM is
found in the ReactDOM package.

 In versions of React earlier than React 16, you could


only render one element to the DOM. Today, it’s
possible to render arrays as well.

const dish = React.createElement("h1", null, "Baked


Salmon");
const dessert = React.createElement("h2", null, "Coconut
Cream Pie");
ReactDOM.render([dish, dessert],
document.getElementById("root"));
09/11/2024 Web Application Development 19
 This will render both of these elements as siblings
inside of the root container.

09/11/2024 Web Application Development 20


How to use props.children.
 Children
 React renders child elements using props.children. In
the previous section, we rendered a text element as a
child of the h1 element, and thus props.children was set
to Baked Salmon.
 We could render other React elements as children too,
creating a tree of elements.
 The tree has one root element from which many
branches grow.

09/11/2024 Web Application Development 21


 Example:
consider the unordered list that contains ingredients:
 <ul>
 <li>2 lb salmon</li>
 <li>5 sprigs fresh rosemary</li>
 <li>2 tablespoons olive oil</li>
 <li>2 small lemons</li>
 <li>1 teaspoon kosher salt</li>
 <li>4 cloves of chopped garlic</li>
 </ul>

09/11/2024 Web Application Development 22


 the unordered list is the root element, and it has six
children.
 We can represent this ul and its children with
React.createElement:

React.createElement(
"ul",
null,
React.createElement("li", null, "2 lb salmon"),
React.createElement("li", null, "5 sprigs fresh rosemary"),
React.createElement("li", null, "2 tablespoons olive oil"),
React.createElement("li", null, "2 small lemons"),
React.createElement("li", null, "1 teaspoon kosher salt"),
React.createElement("li", null, "4 cloves of chopped garlic")
);
09/11/2024 Web Application Development 23
 Every additional argument sent to the createElement
function is another child element.

 React creates an array of these child elements and sets


the value of props.children to that array.
 Inspect the resulting React element, we would see each
list item represented by a React element and added to
an array called props.children.
 If you console log this element:

09/11/2024 Web Application Development 24


const list = React.createElement(
"ul",
null,
React.createElement("li", null, "2 lb salmon"),
React.createElement("li", null, "5 sprigs fresh rosemary"),
React.createElement("li", null, "2 tablespoons olive oil"),
React.createElement("li", null, "2 small lemons"),
React.createElement("li", null, "1 teaspoon kosher salt"),
React.createElement("li", null, "4 cloves of chopped garlic")
);
console.log(list);

09/11/2024 Web Application Development 25


 The result will look like this:
{
"type": "ul",
"props": {
"children": [
{ "type": "li", "props": { "children": "2 lb salmon" } … },
{ "type": "li", "props": { "children": "5 sprigs fresh rosemary"} … },
{ "type": "li", "props": { "children": "2 tablespoons olive oil" } … },
{ "type": "li", "props": { "children": "2 small lemons"} … },
{ "type": "li", "props": { "children": "1 teaspoon kosher salt"} … },
{ "type": "li", "props": { "children": "4 cloves of chopped garlic"} … }
]
...
}
}

09/11/2024 Web Application Development 26


 each list item is a child

 To create this using React, we’ll use a series of


createElement calls:

09/11/2024 Web Application Development 27


 React.createElement(
 "section",
 { id: "baked-salmon" },
 React.createElement("h1", null, "Baked Salmon"),
 React.createElement(
 "ul",
 { className: "ingredients" },
 React.createElement("li", null, "2 lb salmon"),
 React.createElement("li", null, "5 sprigs fresh rosemary"),
 React.createElement("li", null, "2 tablespoons olive oil"),
 React.createElement("li", null, "2 small lemons"),
 React.createElement("li", null, "1 teaspoon kosher salt"),
 React.createElement("li", null, "4 cloves of chopped garlic")
 ),
 React.createElement(
 "section",
 { className: "instructions" },
 React.createElement("h2", null, "Cooking Instructions"),
 React.createElement("p", null, "Preheat the oven to 375 degrees."),
 React.createElement("p", null, "Lightly coat aluminum foil with oil."),
 React.createElement("p", null, "Place salmon on foil."),
 React.createElement(
 "p",
 null,
 "Cover with rosemary, sliced lemons, chopped garlic."
 ),
 React.createElement(
 "p",
 null,"Bake for 15-20 minutes until cooked through."
 ),
 React.createElement("p", null, "Remove from oven.")
 )
 );

09/11/2024 Web Application Development 28


CLASSNAME IN REACT
 Any element that has an HTML class attribute is using
className for that property instead of class.
 Since class is a reserved word in JavaScript, we have
to use className to define the class attribute of an
HTML element.
 This sample is what pure React looks like. Pure React
is ultimately what runs in the browser.
 A React app is a tree of React elements all stemming
from a single root element.
 React elements are the instructions that React will use
to build a UI in the browser.

09/11/2024 Web Application Development 29


CONSTRUCTING ELEMENTS WITH
DATA
 The major advantage of using React is its ability to
separate data from UI elements.
 Since React is just JavaScript, we can add JavaScript
logic to help us build the React component tree.
 For example, ingredients can be stored in an array, and
we can map that array to the React elements.

09/11/2024 Web Application Development 30


CONSTRUCTING ELEMENTS WITH
DATA CONTD.
 Example:
the unordered list
React.createElement(
"ul",
null,
React.createElement("li", null, "2 lb salmon"),
React.createElement("li", null, "5 sprigs fresh rosemary"),
React.createElement("li", null, "2 tablespoons olive oil"),
React.createElement("li", null, "2 small lemons"),
React.createElement("li", null, "1 teaspoon kosher salt"),
React.createElement("li", null, "4 cloves of chopped garlic")
);

09/11/2024 Web Application Development 31


CONSTRUCTING ELEMENTS WITH
DATA CONTD
 The data used in this list of ingredients can be easily
represented using a JavaScript array:

const items = [
"2 lb salmon",
"5 sprigs fresh rosemary",
"2 tablespoons olive oil",
"2 small lemons",
"1 teaspoon kosher salt",
"4 cloves of chopped garlic"
];

09/11/2024 Web Application Development 32


CONSTRUCTING ELEMENTS WITH
DATA CONTD
 We want to use this data to generate the correct
number of list items without having to hard code each
one.
 We can map over the array and create list items for as
many ingredients as there are:

React.createElement("ul",
{ className: "ingredients" },
items.map(ingredient => React.createElement("li", null,
ingredient))
);

09/11/2024 Web Application Development 33


CONSTRUCTING ELEMENTS WITH
DATA CONTD
 This syntax creates a React element for each ingredient
in the array.
 Each string is displayed in the list item’s children as
text.
 The value for each ingredient is displayed as the list
item.
 When running this code, you’ll see a console warning:

09/11/2024 Web Application Development 34


CONSTRUCTING ELEMENTS WITH
DATA CONTD
 When we build a list of child elements by iterating
through an array,

 React likes each of those elements to have a key


property. The key property is used by React to help it
update the DOM efficiently.

 You can make this warning go away by adding a


unique key property to each of the list item elements.

 We can use the array index for each ingredient as that


unique value:

09/11/2024 Web Application Development 35


CONSTRUCTING ELEMENTS WITH
DATA CONTD
React.createElement(
"ul",
{ className: "ingredients" },
items.map((ingredient, i) =>
React.createElement("li", { key: i }, ingredient)
)
);

 adding this to each list item will clear the console


warning.

09/11/2024 Web Application Development 36


Adjusted code
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>React Samples</title>
 </head>
 <body>
 <!-- Target container -->
 <div id="root"></div>

<!-- React library & ReactDOM (Development Version) -->
 <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
 <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<script>
 const items = [
 "2 lb salmon",
 "5 sprigs fresh rosemary",
 "2 tablespoons olive oil",
 "2 small lemons",
 "1 teaspoon kosher salt",
 "4 cloves of chopped garlic"
 ];

const list = React.createElement(
 "ul",
 { className: "ingredients" },
 items.map((ingredient, i) =>
 React.createElement("li", { key: i }, ingredient)
 )
 );

ReactDOM.render(list, document.getElementById("root"));
 </script>
 </body>
 </html>

09/11/2024 Web Application Development 37


Output in the Browser

09/11/2024 Web Application Development 38

You might also like