Front End Web Technologies

Prepared By
C Vikas
ReactJS

Unit - 2
Objectives
• This Course will help the student to comprehend and apply the concepts of
HTML,CSS and Bootstrap

• The student would be able to gain knowledge and implement the component-
based architecture

• The Student will be able to demonstrate the application

 ReactJS
A JavaScript Library for building user interfaces
Pic courtesy:peerbits.com
 React and Virtual DOM

• The visual part of the HTML code, called

DOM (Document Object Model - a tree
of objects), is usually redrawn each
time a user makes certain changes
within the page (e.g. scrolls it down)

• The redrawing operation is quite

resource intensive it isn’t optimized the
right way
Contd..
• In the case of ReactJS, instead of regular DOM, its lightweight copy—Virtual DOM—is
used. It doesn’t redraw the whole tree from scratch, only the nodes that were
changed

• As a result, from the user perspective, we get an almost immediate reaction to any
manipulation
React Components
• React allows us to create reusable UI components.
• A component is nothing but a piece of code/UI which is independent, isolated and
reusable
With these components we build complex user interfaces in React
• Every react application has one main component which is the root component
which represents the tree of components.

So, if we want to build an app we can split the page into many components (like
news, weather, …)
Something like this
 Making of components or elements- Render method

• The output of render method is react element

• React element is nothing but a JS object which maps with the DOM Element in
memory
React keeps a virtual representation of DOM in memory called the virtual DOM
Virtual and Real DOM in detail
Before any change

Some
change
occurred

When we change a component

we get a new react element,
react compares this element
and its children with the
previous one , sees what is
changed and will change only
that part of the real DOM to
keep it in sync with the virtual
DOM
We no longer have to think about
DOM manipulations

We simply change the state of the component and REACT will update the DOM
So, basically react , reacts to state changes.
Rendering HTML in React
• We use ReactDOM to render HTML in React.
• ReactDOM.render() function (usually) takes two arguments, HTML code and an
HTML element.
Let us create few elements using React

Even though all of this could easily fit on one line, it's generally a good idea to add line breaks to your
arguments for ReactDOM.render()
Now that we know how to render stuff, let's make our
app a little more complex by introducing child elements
Adding a child element

Let's add a sibling. We'll create a paragraph element and then pass it as another child to our
container children.
The code now is becoming a little more complex.
But then to create each element the way we did, is a hassle.

Lets see the easier way

JSX to rescue!
But what is JSX?
JSX - JavaScriptXML
• What
– JSX allows us to write HTML in React.
– Basically JSX generates HTML
– JSX makes it easier to write and add HTML in React.
– It allows us to use XML like syntax in JS
• How?
– JSX transformer converts each element in JSX to an HTML function call
• Where?
– Most projects use Babel (compiler) to convert JSX to JavaScript
• Anyone else does the same?
– TypeScript compiler also converts JSX to JavaScript. So, if you use Type Script you don’t have to
use Babel
In short..
• JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that
XML/HTML-like text can co-exist with JavaScript/React code.
• Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML
into JavaScript.
This is how an XML file looks like
React’s createElement on left, in JSX on right

Syntax of JSX is similar to HTML but not same.

A tool is used to convert JSX to React, we use the tool Babel.
Babel specializes in converting one syntax to other
Babel!
Check how babel works, in babel.io, click on ‘Try it Out’

Select , react and type JSX text in left box, you will see react text
on right
 React – process flow

• Babel tool converts JSX into React and ReactDOM library converts React JS to html for the browser
to render.

• Notice the difference in jsx and html – className and class, input element too is different.

• This is the main feature of React but this is not the essence of it. There is more to react.
comparison

If the sum element had any children they would be passed as the 3rd parameter
Sum element wrapped in H1 element
HTML elements are passed as strings (‘h1’)

H1 element has no
Parameters/attributes so
null is being passed.
But how do we get Babel to work for our code.
Where do we add the compiler
We add it as a library using the script tag
And how shall we say that a piece of code needs to be
converted from JSX to JS?
• Instead of the regular script tag add type attribute
Now that we know how JSX works, let us look at
an example
Is the below code ReactJS or JSX?

Where do I want to render this to?

Let us say to an element whose id is root .

How shall I do it?

Let us understand the DOM
• Let us create a simple app, one without react and one with react and see the
difference ourselves!
Create 3 files
• index.html
• script.js
• styles.css
• For us to update the html file with react and non-react code , we need two divs.
Lets add these two divs to the index.html page
• In the same index.html add 3 script tags and one link tag 2 script libs and one
custom js and then add link to styles.css
Libraries

• One is react core library and one is react DOM library.

• React DOM library will give react the ability to interact with the
browser
• The crossorigin attribute sets the mode of the request to an HTT
P CORS Request.
• CORS stands for Cross-Origin Resource Sharing
Styles.css
• Add a split class to the css as shown

• We have referenced this in html file

Let us now write code for dates
open script.js
• Add code to get both divs from html page
• then add code to render date
• Then call this render function
from setInterval function, which takes function name
And time interval
• Here it is 1000=1000ms=1s
• Now launch in browser and
check
You should see the date time ticker
it should be updated every second
In the render function , lets do the same using react

First argument is the html element we

want created

Second element is the object

containing the attributes that the
element needs
(Notice, we use classname for class ,
similar to CSS but a little different)

Thirdly, an input element and a

paragraph to display date

This does look like a lot of code when we compare it with vanilla java script. But then
the advantage that we get is far better!
What advantage?
• At first glance both implementations seem same
The advantage!
• For this page, check tools- elements tab in the browser.
• You will see that the dateJS div is updated every second in the browser
• Where as the reactJS is not updated every second
• Also, the other big advantage, try typing something in the input field of the JS
version, we will not be able to as the div keeps refreshing!
• Whereas in the react version we will be able to type without any problem, even
though we asked react to update every second
• React is smart enough to update only what’s necessary!
 The Element tree
• React does not use html directly, it uses a tree of JS
objects to define the UI.
• We are writing HTML in JS! Unlike how we are used to
writing since ages, in HTML page!
The policy of react
• Policy of React, one way binding, is what is different about React when compared
to other libraries
• There are some libraries out there that use 2 way binding, but React simply renders
the UI from the object tree every time it needs updating. This smart way is called
Tree reconciliation.
• As only p element is changed React instructs the renderer to redraw only that
element. Once this is done, react disposes the old tree
References
• https://react.dev/
• https://www.w3schools.com/REACT/DEFAULT.ASP
• https://legacy.reactjs.org/docs/getting-started.html