Introduction to React JS

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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Prerequisites
●
○
○
●
○
○
●
○
○
○
○
■
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What is React?

●
●

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

●
●
●
●
●
●
●

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

●
●
●
●
●
●
●

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

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

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

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

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

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

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

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

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

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

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

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
●
●

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

●
●
● …

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

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

●
●

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

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

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

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

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

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