A computer with either Windows, Mac or Linux to install all the free software and tools needed to build your new apps
What will you get from this course:
- Online React Advance Training
- Practical Coding and Implementation
- Make Yourself Job Ready
- Certificate and Placement Support
- Hands-on Training in Live Projects
Course Content
Welcome to The Course!
Introduction To Basic React.js
Setting Up the Course Dev Environment (Code Editor)
Module Introduction
How to (Not) Connect to A Database
Our Starting App & Backend
Sending a GET Request
Using async await
Handling Loading & Data States
Handling Http Errors
Using useEffect() For Requests
Preparing The Project for The Next Steps
Sending a POST Request
Wrap Up
Module Introduction
What are Custom Hooks
Creating a Custom React Hook Function
Using Custom Hooks
Configuring Custom Hooks
Onwards To a More Realistic Example
Building a Custom Http Hook
Using the Custom Http Hook
Adjusting the Custom Hook Logic
Using The Custom Hook in More Components
Module Introduction
Our Starting Setup
What's So Complex About Forms
Dealing With Form Submission & Getting User Input Values
Adding Basic Validation
Providing Validation Feedback
Handling the was touched State
React To Lost Focus
Refactoring & Deriving States
Managing The Overall Form Validity
Adding A Custom Input Hook
Re-Using the Custom Hook
A Challenge for You!
Applying Our Hook & Knowledge to A New Form
Summary
Bonus Using useReducer()
Module Introduction
Moving Meals Data to The Backend
Fetching Meals via Http
Handling the Loading State
Handling Errors
Adding A Checkout Form
Reading Form Values
Adding Form Validation
Submitting & Sending Cart Data
Adding Better User Feedback
Summary
Module Introduction
Another Look at State in React Apps
Redux vs React Context
How Redux Works
Exploring the Core Redux Concepts
More Redux Basics
Preparing a new Project
Creating a Redux Store for React
Providing the Store
Using Redux Data in React Components
Dispatching Actions from Inside Components
Redux with Class-based Components
Attaching Payloads to Actions
Working with Multiple State Properties
How To Work with Redux State Correctly
Redux Challenges & Introducing Redux Toolkit
Adding State Slices
Migrating Everything to Redux Toolkit
Working with Multiple Slices
Reading & Dispatching from A New Slice
Splitting Our Code
Summary
Module Introduction
Redux & Side Effects (and Asynchronous Code)
Redux & Async Code
Frontend Code vs Backend Code
Where To Put Our Logic
Using useEffect with Redux
Handling Http States & Feedback with Redux
Using an Action Creator Thunk
Getting Started with Fetching Data
Finalizing the Fetching Logic
Exploring the Redux DevTools
Summary
Module Introduction
What is Routing & Why
Installing React Router
Defining & Using Routes
Working with Links
Using NavLinks
Adding Dynamic Routes with Params
Extracting Route Params
Using Switch and exact For Configuring Routes
Working with Nested Routes
Redirecting The User
Time to Practice Onwards to a New Project
Practice Redirecting & Extracting Params
Practicing Nested Routes
Adding a Layout Wrapper Component
Adding Dummy Data & More Content
Outputting Data on the Details Page
Adding a Not Found Page
Implementing Programmatic (Imperative) Navigation
Preventing Possibly Unwanted Route Transitions with the Prompt
Component
Working with Query Parameters
Getting Creative with Nested Routes
Writing More Flexible Routing Code
Sending & Getting Quote Data via Http
Adding the Comments Features
Module Introduction
Deployment Steps
Adding Lazy Loading
Building The Code for Production
Getting Started with Deployment (Uploading Files)
Exploring Routing Issues & Finishing Deployment
Requirement :
Nothing else! It’s just you, your computer and your hunger to get started today.
Frequently Asked Questions ?
React.js is a declarative JavaScript library for building user
interfaces, emphasizing a component-based architecture. What sets it
apart is its virtual DOM implementation, optimizing rendering
efficiency. It's like having a smart assistant who rearranges your
workspace efficiently, ensuring that changes are applied seamlessly
without disrupting the entire room.
JSX in React is like blending HTML with JavaScript, creating a syntax
that feels intuitive for UI development. It's akin to having a bilingual
conversation – JSX allows developers to express UI components in a
language that is both readable and expressive, enhancing the overall
development experience by bridging the gap between design and
functionality.
React Hooks are like magic spells for functional components, allowing
them to tap into state and lifecycle features. It's akin to giving
functional components superpowers – useState brings dynamic abilities,
useEffect orchestrates lifecycle events, and other hooks ensure that
functional components wield the same powers as their class counterparts,
simplifying state management and lifecycle handling.
The virtual DOM in React is like having a blueprint for your UI changes.
Instead of directly modifying the real DOM, React first applies changes
to a virtual representation. It's akin to having a holographic preview –
React intelligently determines the most efficient way to update the
actual DOM, ensuring that UI changes are implemented with minimal
computational cost.
React's component communication is like passing notes between colleagues
in an office. Props are like handwritten messages – they allow parent
components to send specific information to their children. Meanwhile,
the Context API acts like a company-wide memo board, ensuring that
shared information is accessible across the organization. Each method
serves its purpose, fostering effective communication within the React
workspace.
About Course :
This React Advance Course is designed by industry professionals to meet the needs and standards of the industry.
Our teachers have greater expertise and are now employed by a multinational corporation. Every topic will be thoroughly taught using real-world project examples. This training programme includes evaluation exams, assignments, and exercises for a great hands-on learning experience.
