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: info@techaltum.com 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: info@techaltum.com 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: info@techaltum.com 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: info@techaltum.com 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: info@techaltum.com 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: info@techaltum.com 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: info@techaltum.com Website:-www.techaltum.com Page 7
