Scribd
Upload
31 views

Introduction To React JS

The document provides an introduction to React JS, covering topics like prerequisites for learning React, what React is, why React is used, single page applications, setting up a local development environment, using Create React App to set up a React project, an overview of new JavaScript features supported by React, basics of React like components, JSX and file structure.

Uploaded by

princetejumola
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Introduction To React JS

The document provides an introduction to React JS, covering topics like prerequisites for learning React, what React is, why React is used, single page applications, setting up a local development environment, using Create React App to set up a React project, an overview of new JavaScript features supported by React, basics of React like components, JSX and file structure.

Uploaded by

princetejumola
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

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

You might also like