React with Redux Toolkit

React with Redux Toolkit

Prerequisites for this course
Intermediate level of knowledge in HTML, CSS & JavaScript

Quick recap of some topics in JavaScript

Strict mode

Template literals

setTimeout, setInterval & clearInterval

Arrow functions

Useful methods of Array

Spread operator & rest parameter

Destructuring

Primitive vs Reference

Export and Import module

Getting started
Basics of Command Prompt

Installation of Node.js

node, npm, npx

Vite

Explain Application Structure

Main Concepts
Rendering Elements

Writing Markup with JSX

JSX: Putting markup into JavaScript

The Rules of JSX

Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 1
 React with Redux Toolkit
JavaScript in JSX with Curly Braces

Use a JSX Converter

Create Function Component

Passing props to a component

Pass props to the child component

Read props inside the child component

Specifying a default value for a prop

Forwarding props with the JSX spread syntax

Passing JSX as children

Fragments

Working with multiple Components

Event handling

Manage State using useState

Lists and Keys

Conditional Rendering

Component Lifecycle using useEffect

Showing image

Working with Inline CSS

Apply CSS classes using className

Updating style at runtime

CSS module

Using Bootstrap CDN

Forms

Controlled Components

Uncontrolled Components
Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 2
 React with Redux Toolkit
Form Validation

Type checking with prop-types

Debugging React App

Deploy React App

Hooks
Introducing Hooks

Rules of Hooks

Basic Hooks

useState

useEffect

useContext

Additional Hooks

useReducer

useCallback

useMemo

useRef

useDeferredValue

useTransition

Building Your Own Hook

Extracting a Custom Hook

Using a Custom Hook

React Routing and Navigation

Introduction to Routing

Setting Routes in React App

Setting Up Links for Navigation

Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 3
 React with Redux Toolkit
Passing Route Parameters

Navigating Programmatically

Working with Navigate

Router hooks

useNavigate

useParams

useLocation

Consume API in React

Ways of HTTP Request in React

Methods of HTTP Request

Introducing JSON

JSON.stringify, JSON.parse

Consume API using fetch

Consume API using axios

Work with axios with below HTTP methods

GET

POST

PUT / PATCH

DELETE

Work with the following APIs

Random user generator

JSON placeholder

MockAPI

OpenWeather API

FakeStoreAPI / DummyJSON
Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 4
 React with Redux Toolkit
Work with async/await

Bonus Contents
Create database in Firebase

CRUD operations

Authentication using google account

JWT (JSON Web Tokens)

Redux
Introduction

Redux Libraries and tools

React-Redux

Redux Toolkit

Redux DevTools Extension

Redux Terms and Concepts

Redux Toolkit
Introduction

Install Redux Toolkit and React-Redux

Create a Redux Store

Provide the Redux Store to React

Redux Slices

Create a Redux State Slice

Creating Slice Reducers and Actions

Add Slice Reducers to the Store

Rules of Reducers

Reducers and Immutable Updates

Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 5
 React with Redux Toolkit
Use Redux State and Actions in React Components

Read data from the store with useSelector

Dispatch actions using useDispatch

global state, local state

Writing Async Logic with Thunks

Introduction to TypeScript
Get Started

Installing & using TypeScript

Exploring the Base Types

Working with Array & Object Types

Understanding Type Inference

Using Union Types

Generics

React + Typescript

Working with Components & TypeScript

Working with Props & TypeScript

Managing State & TypeScript

Introduction to Next.js
Installation

Routing

The app router

Defining Routes

Pages and layouts

Linking & navigating

Dynamic Routes
Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 6
 React with Redux Toolkit
Data fetching

Git, GitHub

Deploying

Class components are not recommended anymore for new code.

Class Component
Introduction to OOP

Components and Props

Manage State in Component

Event handling

Component Lifecycle

Mounting

Updating

Unmounting

Duration : Around 3.5 Months

Projects : Minimum 2

Updated as on : 8-July-2023

Om Complex, 3rd Floor, Naya Bans, Sec-15, Noida-201301 (U.P.) Tel: +91(0)-0120-4280181,
9015041412 Email: [email protected] Website:-www.techaltum.com Page 7