ReactJS Developer Course 

Module 1: Introduction To ES5 & ES6 

• ES5 ES6 
• ES5 VS ES6 
• ES5 VS ES6 Syntax Difference   
• ES6 Advantages 

Module 2: Introduction To React JS 

• Introduction to React JS 
• History of web development History of React 
• DOM (Document Object Model) DOM Manipulation 
• Virtual DOM 
• How does React use Virtual DOM Virtual DOM vs Real DOM 
• Thinking in React 
• React one - way data binding React two - way data binding One way vs two-way data 

• binding 
• Difference b/n one - way data binding & two - way data binding 
• Server-side Rendering 
• Advantages of using server-side rendering 
• Advantages of React.JS 
• When to use React JS? And when to opt for alternatives? 
• Applications of React.js 

Module 3: Installation and Setup 

• Installation Setup React JS React JS environment Setup 
• Using the Create-react-app Command Node Package Manager 
• Default vs Named Exports 
• Lets Start Coding Hello World Program 
• React vs Angular vs Vue 
• How to Connect React JS with NodeJS 

Module 4: Building Blocks of React.JS 

• Core Building Blocks of React Components 
• State and Props Rendering 
• Conditional Rendering What is JSX 
• Example Why JSX 
• Advantages of JSX Expressions in JSX 

• Internal Implementation of JSX 
• Hands-on: Creating a react component with jsx 

Module 5: Elements & Functions in React JS 

• Rendering Elements in React.JS 
• Hands-on: How does render function work and update DOM  
• Hands-on: Styling and CSS 

Module 6: Components in React JS 

• What are Components in React JS Types of Components 
• Functional component Class Component 
• Functional component vs Class Component Creating Class Components 
• Creating Functional Components 
• Converting Functional Components to Class Components 

Module 7: Programming in React JS 

• What are Props 
• Lets Practice Props 
• What is State in React JS 
• ReactJS(Diff Props vs State) Why Props are Read-only 
• Composition of React Components Stateless Component 
• Stateful Component 
• When would you use a stateless Component  

• When would you use a stateful Component 
• Stateful Component vs Stateless Component 

Module 8: Composition of ReactElement 

• Composition of ReactComponents 

Module 9: Understanding Lifecycle Methods 

• What are lifecycle Methods and what are the uses of it Constructor 
• Render 
• Should component update Render 
• ComponentDidUpdate 

Module 10: Programming in ReactJS 

• Passing props to child components 
• Updating state of React JS component 
• What is the significant of SetState function 

Module 11: Event Handling 

• Events 
• Event Handling 

Module 12: Conditional Rendering 

• Conditional Rendering in React JS Logical && Operator 
• Switch case operator 
• Conditional Rendering with enums 

Module 13: Conditional Rendering 2 

• Switch case operator continuation  
• Conditional Rendering with enums 

Module 14: Preventing Rendering 

• Preventing component from rendering How to connect ReactJS with Node JS Backend Setup 
• propTypes 
• getDefaultProps 
• Binding the context( Inline) 
• UI without ReactJS & Problem 
• How the ReactJS solving the problem  
• Binding the context( Inline) 

Module 15: List & Keys 

• References 
• When to use Refs 
• When not to use Refs How to Create Refs 
• How to access Refs 

Module 16: Controlled vs Uncontrolled Components 

• Controlled component 
• UnControlled component 
• Controlled vs Uncontrolled components in React JS 

Module 17: Composition vs Inheritance 

• Inheritance 
• Using composition in React with Example Practice on Composition & Inheritance 
• Difference b/n Composition & Inheritance 

 Module 18: Advance Topics in React JS 

• What is context API? 
• When to use the context API How to use the Context API Fragments 
• Why we use Fragments? Fragments short Syntax Keyed Fragments 
• Higher-order components 

Module 19: Redux Overview 

• Redux Overview Flux 
• Flux Elements Dispatcher Stores 
• Views Actions Flux Pros 
• Connecting Redux and React What is Redux? 
• Why use Redux with React. js? Redux Architecture? 
• Redux Principles Redux Components What is Redux Store 
• Action Middleware 
• What is a Reducer? 

Module 20: Router 

• Router 

• Advantages of Router Router Setup 

Live sessions include demonstrations of real-time industrial projects to help trainees gain hands-on working experience. 

Project 01 - Data Read and Write – Parsing Data - Login & Register - Auth 

Concept of user authentication, with registration using Routing. 

Functionalities: 

• Form Validations Data Writing 
• Data Reading into Json Verifying Login Auth 
• CRUD Operations 

Project 02 - Fetch Live News with Routing 

A React & react-router-powered implementation of Hacker News using its Firebase API. 

Functionalities: 

• Hacker News Firebase API 

Project 03 - A counter-App using React.js 

This application is like the shop cart products adding to cart. 

Functionalities 

• Adding, 
• Removing, Deleting, 
• Resetting products 

Which reflects in the total number of products into our shopping cart.  

This is an the app, useful to understand the 

• React Components, States, 
• Data Flow, 
• Parent to child etc. 

Project 04 - Working on Image Compressor for Gallery Showcase 

A simple image compressor built with react and browser-image-compression. 

Functionalities: 

• Compress Image By Reducing Resolution and Size 
• Offline Compression 

Built With: 

• ReactJS 
• React Bootstrap 
• Browser Image Compression