REACT JS.
Build your next skill.

Getting Started with React

➢ What is ReactJS?

➢ Installation or Setup

➢ Create React App

➢ Advantages of React JS

➢ Workflow of React JS

➢ Node Setup

➢ How to use NPM and its purpose

➢ ES6 Introduction

➢ JS vs JSX vs TS vs TSX

Components

➢ Creating Components

➢ Basic Component

➢ Nesting Components

➢ Higher-Order Components

Overview of JSX

➢ Introduction of Virtual DOM

➢ Difference between JS and JSX

➢ Why use JSX?

➢ JSX Attributes

➢ JSX Styling

Props in React

➢ Introduction

➢ Default Props

➢ PropTypes

➢ Passing down props using the spread operator

➢ Props.children and component composition

➢ Detecting the type of Children components

➢ Props Drilling

State in React

➢ Basic State

➢ Common Antipattern

➢ setState()

➢ State, Events, and Managed Controls

React Component Lifecycle

➢ Component willMount

➢ Component UnMount

➢ Component Update

➢ Lifecycle method calls in different states

➢ React Component Container

Handling Events

➢ Event handling in React

➢ Binding event handlers

➢ Arrow functions vs. regular functions

➢ Primary Events

➢ Sharing the events between components

Communicate Between Components

➢ Child to Parent Components

➢ Parent to Child Components

➢ Not-related Components

Conditional Rendering

➢ Conditional rendering with

if

statements

➢ Conditional Rendering using logical

&&

in JSX

➢ Conditional Rendering using the ternary operator

➢ Preventing Components from Rendering

Lists and Keys

➢ Steps to Create and Traverse React JS Lists

➢ Rendering lists inside Components

➢ Key in React List

ReactJS Keys

➢ What is a key in React?

➢ Assigning keys to the list

➢ Difference between keys and props in React

React Hooks

➢ useState()

➢ useEffect()

➢ useContext()

➢ useRef()

➢ useReducer()

➢ Custom React Hooks

➢ useDispatch(), useSelector, useMemo, useLayoutEffect()

Styling in React

➢ CSS in React

➢ Different approaches for styling (CSS, CSS-in-JS, CSS Modules)

➢ Inline Styles

➢ Styling Libraries

➢ Popular CSS Frameworks (e.g., Bootstrap, Material-UI)

Router

➢ Introduction to React Router

➢ Setting up React Router

➢ Creating Routes

➢ Navigating with React Router

➢ Using Link and NavLink

➢ Nested Routes and Dynamic Routing

➢ Passing Parameters to Routes

➢ Query String, Accessing Current URL

React JS Forms

➢ React Forms

➢ Lists of Form Components

➢ Control Input Elements

➢ Controlled and Uncontrolled Form Components

➢ Adding Forms in React

➢ Handling React Forms

➢ Submitting React Forms

➢ Multiple Input Fields

➢ React JS Form Validations

➢ Custom Validations

State Management with Redux

➢ Introduction to Redux

➢ Understanding the need for state management

➢ Basic Concepts: Actions, Reducers, Store

➢ Setting Up Redux

➢ Installing Redux and Setting up a Store

➢ Creating Actions and Reducers

➢ Connecting React with Redux

➢ Using

connect

to connect components to the store

➢ Dispatching Actions

Asynchronous Programming and API Integration

➢ AJAX and Fetch API

➢ Making HTTP Requests in React

➢ Fetching Data from an API

➢ Async/Await and Promises

Handling Errors in React Application

➢ Error Handling and Debugging

➢ Debugging React Apps

➢ Performance Optimization

➢ Memoization

➢ React.memo and PureComponent

ReactJS Virtual DOM

➢ What is DOM?

➢ Disadvantages of Real DOM

➢ Virtual DOM

➢ How Does Virtual DOM Make Things Faster?

➢ How Virtual DOM Helps React

➢ Virtual DOM Key Concepts

➢ Differences Between Virtual DOM and Real DOM

Unit Testing Overview

Lazy Loading

Code Splitting

Server-Side Rendering

Micro Frontend Overview

Deploying a React Application

Added Features

➢ Resume Preparation

➢ Resume Preparation Tips

➢ Sample Resumes

➢ Soft Copy of Notes for Each Module

➢ 4 Case Studies on Use Case Diagrams

➢ 2 Real-Time Project Specifications

Interview Preparation

➢ Interview Preparation Tips

➢ Sample Interview Questions

➢ How to Clear an Interview