React Syllabus PDF

Download as pdf or txt
Download as pdf or txt
You are on page 1of 6

Contact No +91 7314853128

Visit – www.scalive.in

React Syllabus 60 hours

 Introduction
 What You Should Know Before Joining This Course ?
 What Is React ?
 What Problem React Solves ?
 What Are SPA’s ?
 Challenges In Developing A SPA
 React Advantages
 Is React A Framework OR Library ?

 Building First React App


 Two Ways To Develop A React App.
 Developing Using CDN.
 Developing Using Create React App.
 Difference between CDN And Create React App.
 Developing The First App
 Creating Function Based React Element
 Creating Siblings
 Creating Nested Components

 JSX
 What is JSX ?
 Why JSX ?
 Characteristics Of JSX ?
 Coding JSX
 Expressions In JSX
 Inserting A Large Block Of HTML
 Summary
 Conditional Rendering
 Different Ways Of Conditional Rendering

 ES6 Refresher
 Modules
 Exports and Imports
 Classes
 Spread & Rest Operators
 Destructuring

 Class Components
 Two Types Of Components
 Class Components
 How To Create Class Components
 Industry Recommended Way Of Structuring A React
Application

 Props
 What are props ?
 Using Props In React
 Some Important Points About Props
 How To Iterate Over Arrays In JSX
 Using map() Method Of Array
 Default props
 Exercises

 Styling
 Styling In React
 Different Ways Of Styling
 External StyleSheet
 Inline Styling
 JS Object Styling
 Exercises
 Create – React - App
 Introduction To CRA
 Installation Of Node Package Manager
 Creating A New Project Using Create-React-App.
 Introduction To CRA
 Installation Of Node Package Manager
 Creating A New Project Using Create-React-App.

 CRA Conventions
 Exercise To Better Understand Request Flow
 CRA Conventions
 How To Load Images In CRA ?
 How To Add CSS Files In CRA ?

 State In React
 What Is State ?
 How It Is Different Than Props ?
 Different Ways Of Initializing State
 Why To Update The State ?
 Correct Way To Update The State
 Points To Remember
 Exercises

 Event Handling
 Event Handling Basics
 How React’s Event Handling Differs From JS ?
 Concept Of Binding
 Passing Arguments To Event Handlers
 Different Ways Of Passing Arguments
 React Keyboard Events
 Getting The Key Pressed
 Examples
 Exercises

 React Design Principles


 React Design Principles
 Recommended Way Of State Updation
 What To Keep In State ?
 Data Flow In State
 Exercises

 Form Handling
 Form Recap
 How Forms Work In React ?
 UnControlled Components V/s Controlled Components
 Adding Multiple Fields
 Creating Dynamic Keys
 Examples
 Exercises

 Mini Project
 Creating A ToDo List App
 Apply All The Concepts Learnt Till Now

 Uncontrolled Components
 UnControlled Components
 Creating Ref
 Accessing Ref
 Examples

 Text – Area & Select


 TextArea In HTML
 TextArea In React
 DropDown List In HTML
 DropDownList In React
 Examples

 Lifecycle Of a Component
 React Component Life Cycle Phases
 React Component Life Cycle Methods
 Mounting Phase Methods
 Updating Phase Methods
 Unmounting Phase Methods

 Fragments
 What Is A Fragment ?
 Need Of A Fragment
 Syntax
 Example
 Local Storage
 Introduction
 What Is localStorage ?
 Methods Of localStorage
 Examples
 Exercise

 Introduction To Hooks
 Introduction To Hooks
 What Exactly Are Hooks ?
 Rules Of Hooks
 Types Of Hooks

 The useState() Hook


 Introduction To useState() Hook
 Syntax Of useState()
 Examples
 Exercise

***Incomplete Syllabus***
Thank You

You might also like