Introduction to React JS

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Agenda
● Prerequisites
● What is React?
● Why React?
● Single Page Applications
● Local Setup
● Create React App
● Next Generation JavaScript
● Basics of React

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Prerequisites
● HTML
○ Basic Tags
○ Ex: <div>, <span>, etc
● CSS
○ Basic Styling
○ Selectors
● JavaScript
○ Objects
○ Functions
○ Control Flow
○ DOM Manipulation
■ Select
Proprietaryand
content. Manipulate, Events
©Great Learning. All Rights etc use or distribution prohibited
Reserved. Unauthorized
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.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Why React?
● Alternatives of React :- Angular.js.
● More control over the flow of application.
● Reusing the components(optimization).
● Easy to learn.
● Trusted by some leading companies - Facebook, Netflix, PayPal, Tesla etc.
● More job opportunities.
● Mainly used for single page application.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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
● Saves a lot of time, bandwidth, etc.
● Improves performance.
● Some SPA are Gmail, Facebook, Twitter etc.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Local Setup

1. Download and Install NodeJS

Npm or Yarn (Helps to manage JS

packages) Node JS
Development Server

2. Download and Install Any Editor

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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.
● Giving a head start thus saving a lot of time.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What if we didn’t use this tool?

Webpack (Bundle,Minify, Compile)

Compiler (JSX - JS)

Create React App

Node Package Manager

Development Server

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Getting Started
With
Create React App

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Step #1
Open Node.js command prompt.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Step #2
Run this command on the terminal to install create react app globally.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Step #3
Navigate to path where we want to create our app.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Step #4
Run the create-react-app command along with project name.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Step #5
Navigate to the project and run npm start command.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Next Gen. JavaScript

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Let Keyword

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Block scope of Let

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Let Declaration

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Constant Keyword

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Const Keyword
Const Reference and value though property can be changed.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Functions

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Function-Declaration & Expression

Loads at Compile Time Loads at Runtime

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Arrow Function

Problem associated with This keyword are

resolved by Arrow function i.e no binding is req.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Export

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

With Default: Without Default:

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Import

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

With Default: Without Default:

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Class
Class c_name{
constructor()
CLASS(Methods & }
Properties)

Const x = new
c_name();
Object(Instance of Class)

super()
Inheritance(Inheriting
Methods & Properties)

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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(...).

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Rest

● Rest operator is used with functions.

● Rest operator forms an array of arguments passed to the function.
● Represented as (…).

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Destructuring

Destructuring is a way with which we can extract few elements from the array or few
properties from the object.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Basics of React

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Package.json Folder

Dependencies created by Create-React-App

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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
● In the div with id root and displayed on the browser.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Source Folder
This is our react application.
All the script files are added in the source folder.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Files After Removal
Remove the logo, css and make changes to App.js and index.js file.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Functional Component
● To render anything to DOM, we require React file from react library.
● Functional Component is created.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Class Component
In class based component render method is used to return html element
to DOM which can rendered to the browser .

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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).

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Thank You

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited