React

UX Expert
With React Redux
By – Satya Priya Arya

UNIT 1
Refreshing ES6
Frontend v/s Backend v/s Database
The front end is the part of the website users can see
and interact with such as the graphical user interface
(GUI) and the command line including the design,
navigating menus, texts, images, videos, etc.
Examples – HTML, CSS, Java-Script, jQuery, React
The backend, on the contrary, is the part of the
website users cannot see and interact with.
Example – C, C++, Java, Node.JS, C#
The database used to store permanent information
Example – SQL Server, MySQL, MongoDB
What is React
React runs on various platforms (Windows, Linux,
Unix, Mac OS X, etc.)
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
History of React
Before 2009, web browsers used JavaScript.
JS was invented in the 1990 as a scripting language for
adding dynamic features to a web page from an HTML
file.
React is a JavaScript library created by Facebook in
2011
npm, a package manager for the Node.js environment,
was released in January 2010.
Current version is 18.2.0
Why React
Easy to learn
Reusable components
Fast rendering
SEO friendly
Strong community support
Virtual DOM
ES6
ES6 stands for ECMAScript 6
ES6 is also known as ECMAScript 2015
ECMA known as European Computer Manufacturers
Association - non-profit organization that develops
standards in computer hardware, communications,
and programming languages.
React uses ES6
In short ES6 is just some standards for JavaScript.
ES6 Continue…
First we will learn some basic java sript.
Then some new ES6 features
 Classes
 Arrow Functions
 Variables (let, const)
 Array Method (.map())
 Destructuring Arrays
 Modules
 Ternary Operator
 Spread Operator
 Multi line strings
 Default parameters
Sample HTML page with java script
 <html>
 <head>
 <script lang="javascript">
 function loadDoc(){
 document.getElementById("dynamic").innerHTML = "This is dynamic text " + Date();
 }
 </script>
 </head>
 <body>
 <div id="demo">
 <h2>Let Java Script change this text</h2>
 <button type="button" onclick="loadDoc()">Change Content</button>
 </div>
 <div id="dynamic"></div>
 </body>
 </html>
Basics of java script
 Explain basic tags
 HTML
 Title
 Head
 Script
 Function
 Document
 Body
 Id
 H2
 Button
 Console
 Comments
 Operator (+ - * /)
Data types
 Supports 8 data types.
 String
 Number
 Bigint
 Boolean
 Undefined
 Null
 Symbol
 Object
 Supports 3 object data types.
 Object – {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
 Array - [“one”, “two”]
 Date - new Date("2022-03-25")
 All data types are dynamic
Functions
A JavaScript function is a block of code designed to
perform a particular task
Functions often compute a return value. The return
value is "returned" back to the "caller"
var x = Add(40, 13);
function Add(a, b) {
return a + b;
}
Write a program to convert Fahrenheit to Celsius
More statements
IF
Else
Switch
Loop
Write a program to print day name from given 1 to 7
ES6 Classes
 One of the biggest addition of ES6 is classes
 Similar to used in any other languages
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
}
price(){
return 100000;
}
}
const mycar = new Car("Ford");
document.write(mycar.brand);
document.write('<br/>');
document.write(mycar.price());
</script>
</body>
</html>
 Modify above script to print different price according to brand name.
ES6 Classes Inheritance
Use extends keyword to inherit a class.
Use super keyword to call parent constructor
Add following class in previous example and try with
added class
Class Model extends Car {
constructor(name, mod){
super(name);
this.model = mod;
}
show (){
return this.price() + “, is has ” + this.model
}
}
ES6 Arrow Function
It provides a more concise syntax for writing function
expressions by removing the "function" and "return"
keywords.
// ES5
var multiply = function(x, y) {
return x * y;
}
// ES6
const multiply = (x, y) => x * y;
Different styles
 Without parameter - multiply = () =>
 Single parameter - multiply = x =>
 More than one parameter = multiply = (x,y) =>
ES6 Variables
Before ES6 we have only var keyword declaration
ES6 added let and const style of variable declaration
Problem with var is that is has function scope, not a
block scope.
But let has block scope
Const also has block scope. In addition it’s value can
never change.
ES6 Array method .map()
Very useful function of ES6
.map() method allows you to run a function on each
item in the array, returning a new array as the result.
const myArray = ['apple', 'banana', 'orange'];
const myList = myArray.map((item) => <p>{item}</p>)
With index example
list.map((currElement, index) => {});
ES6 Destructuring Arrays
It makes very easy to working with arrays
Old way
 Var fruits = ["Apple", "Banana"];
 Var a = fruits[0]
 Var b = fruits[1]
Array Destructuring
 let fruits = ["Apple", "Banana"];
 let [a, b] = fruits;
 console.log(a, b);
Object Destructuring
 let person = {name: "Peter", age: 28};
 let {name, age} = person;
 console.log(name, age);
ES6 Modules
We can keep our JS code into a separate file
Allow us to create modules (modular programming)
Export and import keyword used for this purpose
Below example shows 2 exports saved in a file mymod.js
 export var num = 50;
 export function getData(data) {
 //long calcuation
 };
Use above modules in new file

 import { name, getData } from "./mymod.js";
ES6 Ternary Operator
Simplified version of if/else statement
Exactly same as C language
 Codition ? True : false
ES6 Spread Operator
 One more helpful operator
 Used to quickly copy all or part of an existing array or object into another array or
object
 In old version we use array1.concat(array2) to concatenate 2 arrays.
 Let’s try with new way of ES6
 const numbersOne = [1, 2, 3];
 const numbersTwo = [4, 5, 6];
 Check output of following statements.
 const numbersCombined = [...numbersOne, ...numbersTwo];
 const [one, two, ...rest] = numbersCombined;
 Difference between – Explain with push an element after creating array2 and then
print both array.
 Let array2 = array1
 Let array2 = […array1]
 Difference between – after defining let arr = ['a','b'];
 let arr2 = [arr,'c','d'];
 let arr2 = [...arr,'c','d'];

ES6 Multi line strings
We can can create multi-line strings by using back-
ticks(`)
let greeting = `Hello World,
 Greetings to all,
 Keep Learning and
 Practicing!`
ES6 Default parameters
Default parameters simplified in ES6
In ES5
Var output = Add(a, b) {
 a = a || 100
 b = b || 200
}
In ES6
Var output = Add(a = 100, b = 200) {
}
Iterators
 A process that is repeated more than one time by applying the same logic is called an
Iteration.
 The following values are iterable:
 Arrays
 Strings
 Maps
 Sets
 If the loop is executed 6 times continuously, then we could say the particular block
has iterated 6 times.
 An iterator is an object that can access one item at a time from a collection while
keeping track of its current position
 It just requires that you have a method called next() to move to the next item to be a
valid iterator
 The result of next() is always an object with two properties –
 Value: The value in the iteration sequence
 Done: true | false
Iterator example
 Old way
 let ranks = [1,2,3,4,5];
 for (let index = 0; index < ranks.length; index++) {
 console.log(ranks[index]);
 }
 New way
 let ranks = [1,2,3,4,5];
 for (let key in ranks) {
 console.log(key);
 }
 The Symbol.iterator is a special-purpose symbol made especially for accessing an object's internal
iterator
 let ranks = [1,2,3];
 let iterator = ranks[Symbol.iterator]();
 console.log(iterator.next());
 Validate the output of above function
Generators
Generators are a special type of function in JavaScript
that can pause and resume state.
A Generator function returns an iterator, which can be
used to stop the function in the middle, do something,
and then resume it whenever.
Generator functions are written using the function*
syntax
function *generator() { // ... }
yield is an operator with which a generator can pause
itself
Generator example
function* stringGenerator() {
 yield 'hi 1';
 yield 'hi 2';
 yield 'hi 3';
}
 const strings = stringGenerator();
 console.log(strings.next());
Validate the output of above function
UNIT 2
Getting started React
Practical Application
 We have lots of applications created in React
 Few examples are:
 Facebook
 Netflix
 Yahoo Mail
 BBC
 Cloudflare
 Trello
 Skyscanner
 Codecademy
 Dropbox
 Flipboard
 Scribd
 Asana
Why need React
 React is Easier to Learn Compared to Angular
 React is an elementary and lightweight library that only deals with the view layer of a
web page.
 It has an easy learning curve
 If you have a functional understanding of HTML-CSS and a basic understanding of
programming concepts, you can quickly start working with React.
 There are extensive documentation available online that will help you with everything
related to ReactJS.
 React Has a Large Development Community
 React is an open-source library
 It has amassed a massive following of JavaScript developers who develop new solutions
and tools regularly.
 A lot of user-developed applications have been included in the official library.
 You can get access to a large community of experts to solve any problems.
 React has more than 201K stars on Github and around 10 million npm
downloads weekly.
Why need React
 React Offers Reusable Components
 Components in ReactJS are independent, reusable bits of code.
 You can use them as a primary JavaScript function or a class component
 Each React component that you have developed can be reused in other parts of the app
 Virtual DOM
 Document Object Model or DOM is an interface that represents HTML and XML code
into trees.
 A web browser creates a DOM-like model to render output, treating each object/element
of the HTML code as a node in the DOM tree.
 Whenever a change occurs in the HTML code, either by user interaction or value updates,
the DOM tree has to be rendered again, leading to a lot of time and power consumption.
 ReactJS use of Virtual DOMs.
 React simply creates a copy of the DOM, maintaining a cache memory of sorts. Every time a
change is made, it examines the Virtual DOM and pinpoints exactly which tree nodes and
components need to be updated.
 With just a small change in the DOM, the tree can be updated quickly and efficiently. This
saves developers a ton of time and makes the application remarkably fast and responsive.
Why need React
 JSX increases the performance and efficiency of ReactJS
 JSX or JavaScript XML is a syntax extension for JavaScript.
 Facebook developed it to extend the functionalities of HTML structures
into JavaScript.
 With JSX, there is no requirement for separate HTML and JS codes.
 JSX, along with the Virtual DOM, increases the performance and
efficiency of ReactJS apps.
 React Hooks
 Hooks is an independent feature introduced in ReactJS 16.8 that enables
JavaScript developers to write states and other features in function
components.
 You don’t need to deal with the complicated classes anymore. Using
Hooks, you can easily manage state logic between components and share
data with components without props and classes.
How React Works
 When the app first starts, there is nothing in the Virtual DOM and the real DOM.
 As a result, the set of instructions supplied to ReactDOM must include instructions for
creating everything from the start.
 However, when we interact with the user interface, such as by clicking a button, the
application state is modified.
 The state variable is changed programmatically to include specific new or altered entries.
 However, in the further steps, the importance of the Virtual DOM becomes more
prominent.
 When a Component’s state value changes, React calls the Component’s render() function
again.
 Similarly, as previously, invoking render() will produce a tree of Elements.
 This time, the tree will incorporate a new Element to symbolize the new objects.
 React now has an old tree that describes what it currently looks like and a new tree that
represents how the updated page should look.
 React must now compare these two trees and provide ReactDOM with instructions to sync
anything that has changed, which results in adding items to the UI.
 This is How React works.
Leveraging Virtual DOM
 DOM
 The DOM represents the UI of your application. Every time there is a change in the state of your application UI, the DOM
gets updated to represent that change. Now the catch is frequently manipulating the DOM affects performance, making it
slow.
 Why DOM manipulation slow
 The DOM is represented as a tree data structure. Because of that, the changes and updates to the DOM are fast. But after the
change, the updated element and it’s children have to be re-rendered to update the application UI. The re-rendering or re-
painting of the UI is what makes it slow.
 Virtual DOM
 The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual
DOM gets updated instead of the real DOM.
 Why Virtual DOM faster
 When new elements are added to the UI, a virtual DOM, which is represented as a tree is created. Each element is a node on
this tree. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared with the
previous virtual DOM tree.
 Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures
that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.
 In React every UI piece is a component, and each component has a state. When the state of a component changes, React
updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the
virtual DOM with the previous version of the virtual DOM. Once React knows which virtual DOM objects have
changed, then React updates only those objects, in the real DOM. This makes the performance far better when
compared to manipulating the real DOM directly. This makes React standout as a high performance JavaScript library.
Setting up React
Install Node.JS from (It provides JavaScript runtime)
https://nodejs.org/
Install Visual Studio Code from
https://code.visualstudio.com/download
npx create-react-app reactapp
cd reactapp
Npm start
UNIT 3
JSX
What is JSX
JSX stands for JavaScript XML.
It allows us to write HTML in a React application.
JSX allows us to write HTML elements in JavaScript.
If you are familiar with HTML, then its very easy to
learn JSX.
We can create React application without JSX also, but
JSX makes it very easy to write React code.
JSX is an extension of the JavaScript language based on
ES6, and is translated into regular JavaScript at
runtime.
Code without JSX
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = React.createElement('h1', {}, 'I am
not using JSX!');
const root =
ReactDOM.createRoot(document.getElementById('ro
ot'));
root.render(myElement);
Code with JSX
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = <h1>I am using JSX!</h1>;
const root =
ReactDOM.createRoot(document.getElementById('ro
ot'));
root.render(myElement);

React

Uploaded by

Copyright:

Available Formats

React

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React

Uploaded by

Copyright:

Available Formats

UX Expert

With React Redux

By – Satya Priya Arya

Use above modules in new file

 const [one, two, ...rest] = numbersCombined;

 let arr2 = [...arr,'c','d'];

You might also like