Introduction to React JS

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Agenda
● Prerequisites
● What is React?
● Why React?
● Single Page Applications
pearlyjaleco19@gmail.com
YWU6ZOAHE3 ● Local Setup
● Create React App
● Next Generation JavaScript
● Basics of React

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Prerequisites
● HTML
○ Basic Tags
○ Ex: <div>, <span>, etc
● CSS
○ Basic Styling
pearlyjaleco19@gmail.com
YWU6ZOAHE3
○ Selectors
● JavaScript
○ Objects
○ Functions
○ Control Flow
○ DOM Manipulation
■ Select
Proprietaryand
This filecontent. Manipulate,
©Greatfor
is meant Learning. Events
All Rights
personal use Reserved. etc use or distribution prohibited
Unauthorized
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 What is React?
● JavaScript library for building user interfaces.
● Library is a pre-written code that is developed already and is
readily available.
● Ex: math.js, day.js etc.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Why React?
● Alternatives of React :- Angular.js.
● More control over the flow of application.
● Reusing the components(optimization).
● Easy to learn.
pearlyjaleco19@gmail.com
YWU6ZOAHE3
● Trusted by some leading companies - Facebook, Netflix, PayPal, Tesla etc.
● More job opportunities.
● Mainly used for single page application.

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Single Page Application

● Single request to server.

● HTML, CSS and JS as response from the server.
● Virtual DOM is created then any further requests are handled by React.
● React only updates that object in actual DOM
pearlyjaleco19@gmail.com
YWU6ZOAHE3
● Saves a lot of time, bandwidth, etc.
● Improves performance.
● Some SPA are Gmail, Facebook, Twitter etc.

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Local Setup

1. Download and Install NodeJS

Npm or Yarn (Helps to manage JS

pearlyjaleco19@gmail.com
YWU6ZOAHE3

packages) Node JS
Development Server

2. Download and Install Any Editor

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Create React App
● Create React App is the best practise to create single-page React applications.
● Don’t need install or configure tools.
● We don’t require Webpack or Babel.
● Built by developers at Facebook.
pearlyjaleco19@gmail.com
● Giving a head start thus saving a lot of time.
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 What if we didn’t use this tool?

Webpack (Bundle,Minify, Compile)

pearlyjaleco19@gmail.com
YWU6ZOAHE3 Compiler (JSX - JS)
Create React App

Node Package Manager

Development Server

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Getting Started
pearlyjaleco19@gmail.com
YWU6ZOAHE3 With
Create React App

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Step #1
Open Node.js command prompt.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Step #2
Run this command on the terminal to install create react app globally.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Step #3
Navigate to path where we want to create our app.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Step #4
Run the create-react-app command along with project name.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Step #5
Navigate to the project and run npm start command.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Next Gen. JavaScript
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
pearlyjaleco19@gmail.com
YWU6ZOAHE3 Let Keyword

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Block scope of Let

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Let Declaration

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Constant Keyword
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Const Keyword
Const Reference and value though property can be changed.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
pearlyjaleco19@gmail.com
YWU6ZOAHE3 Functions

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Function-Declaration & Expression

Loads at Compile Time Loads at Runtime

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Arrow Function

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Problem associated with This keyword are

resolved by Arrow function i.e no binding is req.
Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Export

Export keyword helps us to use one JavaScript file in another JavaScript file.

With Default:
pearlyjaleco19@gmail.com Without Default:
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Import

To include the exported file we use “Import” keyword in the destination JS file.

pearlyjaleco19@gmail.com
YWU6ZOAHE3 With Default: Without Default:

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Class
Class c_name{
constructor()
CLASS(Methods & }
Properties)

pearlyjaleco19@gmail.com Const x = new

YWU6ZOAHE3 c_name();
Object(Instance of Class)

super()
Inheritance(Inheriting
Methods & Properties)

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Spread
● Spread operator is used with arrays or objects .
● Spread operator is used to retrieve all values or properties from one array/object
into other.
● Represented by three dots(...).
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Rest

● Rest operator is used with functions.

● Rest operator forms an array of arguments passed to the function.
● Represented as (…).
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Destructuring

Destructuring is a way with which we can extract few elements from the array or few
properties from the object.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
pearlyjaleco19@gmail.com
YWU6ZOAHE3
Basics of React

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Package.json Folder

Dependencies created by Create-React-App

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Public Folder
● In this folder we will always have single html file (index.html) which
runs on the server and we will edit this file.
● All the components are rendered on index file
YWU6ZOAHE3● In the div with id root and displayed on the browser.
pearlyjaleco19@gmail.com

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Source Folder
This is our react application.
All the script files are added in the source folder.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Files After Removal
Remove the logo, css and make changes to App.js and index.js file.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Functional Component
● To render anything to DOM, we require React file from react library.
● Functional Component is created.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Class Component
In class based component render method is used to return html element
to DOM which can rendered to the browser .

pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 JSX
● Everything written lowercase is treated as JSX which looks like HTML
but is JavaScript with syntax extension.
● Alternatively you can use React.createElement(...) with at least 3
arguments (element,config,text).
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
 Summary
● Introduction to React
● Single Page Applications like Facebook, Gmail, etc
● Local Setup and steps involved in Create React App
● Next Generation JavaScript ( Let, const, etc)
● Basics of React
pearlyjaleco19@gmail.com
YWU6ZOAHE3

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.
pearlyjaleco19@gmail.com
YWU6ZOAHE3
Thank You

Proprietary
This filecontent. ©Greatfor
is meant Learning. All Rights
personal useReserved. Unauthorized use or distribution prohibited
by pearlyjaleco19@gmail.com only.
Sharing or publishing the contents in part or full is liable for legal action.