React Js Training Program

JavaScript Versions and introduction

Modern Java Script use in React JS

Download and install with VS Code

Node JS Platform Setup for react

Package Manager (npm, pnpm, yarn, bun with vite)

Basic Syntex and Folder Structure

Fundamental of JavaScript XML (JSX) & React DOM

• Conditional rendering in JSX

• Java script Expression in JSX

• Looping in JSX

Components in React

Concept of React Fragment & Render Multiple Elements

Dynamic Values in JSX: Injecting JavaScript into HTML

Import and Export module in React

Props in React

• Passing JSX as props

• React destructuring Props

Error Handling in React

Add CSS Styling in React JS

• Inline CSS and import the external CSS

• Inline css with camelCase convention

• class vs className

• Styled Components in React

• CSS Modules

• Tailwind CSS with React

Conditional Styling for Dynamic layouts

JavaScript Map Method in react

Event Handling in React JS

• Passing events as props

• Event Propagation

Use Bootstrap5 in React

Working of react states

Hooks in React JS

useState Hook

• useState with Objects

• Derived States in React

• Use of useState Hook with applications

• Controlled vs Uncontrolled Components

• Handling Multiple Input Fields with useState

• Form Handling with multiple inputs in React

• Registration Forms or Login Forms in React

• Contact Forms in React

useEffect Hook

• Dependency array in useEffect

• Cleanup Function

API Data in React

Handling Loading and Error States in React

Data Fetching in React: Using Async Await

useRef Hook

• Manage DOM Elements and States

Routers in React

• BrowseRouter and Route

• Create a Navbar using Router

• useParam with routers

useContext

• Provider

• Consumer

• Passing data from one level to another

useCallback

useLocation