Certified ReactJS Developer by Vskills
Course Highlights
- Government certification
- Certification valid for life
- Lifelong e-learning access
- Learning Hours: 50+ hrs
- Life Time Job Support
- Job Profile Tagging
Skills you will learn!
Curriculum
9 Topics
Understanding "let" and "const"
Arrow Functions
Exports and Imports
Understanding Classes
Classes Properties and Methods
The Spread and Rest Operator
Destructuring
Reference and Primitive Types Refresher
Refreshing Array Functions
20 Topics
What are Components? And Why is React All About Them?
React Code is Written in a Declarative Way
Creating a New React Project
Analyzing a Standard React Project
Introducing JSX
How React Works
Building a First Custom Component
Writing More Complex JSX Code
Adding Basic CSS Styling
Outputting Dynamic Data and Working with Expressions in JSX
Passing Data Via "props"
Adding "normal" JavaScript Logic to Components
Splitting Components into Multiple Components
Time to Practice: React and Component Basics - Problem
Time to Practice: React and Component Basics - Solution
The Concept of "Composition" ("children props")
A First Summary
A r Look at JSX
Organizing Component Files
An Alternative Function Syntax
16 Topics
Listening to Events and Working with Event Handlers
How Component Functions are Executed
Working with "State"
A r Look at the "useState" Hook
Adding Form Inputs
Listening to User Input
Working with Multiple States
Using One State Instead (and What's Better)
Updating State that Depends on the Previous State
Handling Form Submission
Adding Two-Way Binding
Child-to-Parent Component Communication
Lifting the State Up
Time to Practice: Working with Events and State - Problem
Time to Practice: Working with Events and State - Solution
Controlled Versus Uncontrolled Components and Stateless Versus Stateful Components
11 Topics
Rendering Lists of Data
Using Stateful Lists
Understanding "Keys"
Time to Practice: Working with Lists - Problem
Time to Practice: Working with Lists - Solution
Outputting Conditional Content
Adding Conditional Return Statements
Time to Practice: Conditional Content - Problem
Time to Practice: Conditional Content - Solution
Demo App: Adding a Chart
Adding Dynamic Styles
7 Topics
Setting Dynamic Inline Styles
Setting CSS Classes Dynamically
Introducing Styled Components
Styled Components and Dynamic Props
Styled Components and Media Queries
Using CSS Modules
Dynamic Styles with CSS Modules
4 Topics
Understanding React Error Messages
Analyzing Code Flow and Warnings
Working with Breakpoints
Using the React DevTools
9 Topics
Adding a "User" Component
Adding a Reusable "Card" Component
Adding a Reusable "Button" Component
Managing the User Input State
Adding Validation and Resetting Logic
Adding a User List Component
Managing a List of Users Through State
Adding the "ErrorModal" Component
Managing the Error State
7 Topics
JSX Limitations and Workarounds
Creating a Wrapper Component
React Fragments
Introducing React Portals
Working with Portals
Working with "refs"
Controlled Versus Uncontrolled Components
18 Topics
What are "Side Effects" and Introducing useEffect()
Using the useEffect() Hook
useEffect() and Dependencies
Using the useEffect() Cleanup Function
useEffect() Summary
Introducing useReducer() and Reducers in General
Using the useReducer() Hook
useReducer() and useEffect()
useReducer() Versus useState() for State Management
Introducing React Context
Using the React Context API
Tapping into Context with the useContext() Hook
Making Context Dynamic
Building and Using a Custom Context Provider Component
React Context Limitations
Learning the "Rules of Hooks"
Refactoring an Input Component
Diving into "Forward Refs"
17 Topics
Starting Setup
Adding a "Header" Component
Adding the "Cart" Button Component
Adding a "Meals" Component
Adding Individual Meal Items and Displaying Them
Adding a Form
Working on the "Shopping Cart" Component
Adding a Modal via a React Portal
Managing Cart and Modal State
Adding a Cart Context
Using the Context
Adding a Cart Reducer
Working with Refs and Forward Refs
Outputting Cart Items
Working on a More Complex Reducer Logic
Making Items Removable
Using the useEffect() Hook
10 Topics
How React Really Works
Component Updates in Action
A r Look at Child Component Re-Evaluation
Preventing Unnecessary Re-Evaluations with React.memo()
Preventing Function Recreation with useCallback()
useCallback() and its Dependencies
A First Summary
A r Look at State and Components
Understanding State Scheduling and Batching
Optimizing with useMemo()
8 Topics
What and Why
Adding the First Class-Based Component
Working with State and Events
The Component Lifecycle (Class-Based Components Only)
Lifecycle Methods in Action
Class-Based Components and Context
Class-based versus Functional Components: A Summary
Introducing Error Boundaries
9 Topics
How to Connect to a Database
Our Starting App and Backend
Sending a GET Request
Using async/await
Handling Loading and Data States
Handling HTTP Errors
Using useEffect() for Requests
Preparing the Project for the Next Steps
Sending a POST Request
9 Topics
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
15 Topics
Our Starting Setup
What's so Complex about Forms?
Dealing with Form Submission and Getting User Input Values
Adding Basic Validation
Providing Validation Feedback
Handling the "was touched" State
React to Lost Focus
Refactoring and Deriving States
Managing the Overall Form Validity
Time to Practice: Forms - Problem
Time to Practice: Forms - Solution
Adding a Custom Input Hook
Reusing the Custom Hook
Applying Our Hook and Knowledge to a New Form
Using useReducer()
9 Topics
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 and Sending Cart Data
Adding Better User Feedback
21 Topics
Another Look at State in React Apps
Redux versus 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 and Introducing Redux Toolkit
Adding State Slices
Connecting Redux Toolkit State
Migrating Everything to Redux Toolkit
Working with Multiple Slices
Reading and Dispatching from a New Slice
Splitting Our Code
12 Topics
Redux and Side Effects (and Asynchronous Code)
Refresher/Practice: Part 1
Refresher/Practice: Part 2
Redux and Async Code
Frontend Code Versus Backend Code
Where to Put Our Logic
Using useEffect() with Redux
Handling HTTP States and Feedback with Redux
Using an Action Creator Thunk
Getting Started with Fetching Data
Finalizing the Fetching Logic
Exploring the Redux DevTools
25 Topics
What is Routing and Why?
Installing React Router
Defining and 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 and Extracting Params
Practicing Nested Routes
Adding a Layout Wrapper Component
Adding Dummy Data and 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 and Getting Quote Data via HTTP
Adding the "Comments" Feature
Upgrading to React Router v6
5 Topics
Deployment Steps
Adding Lazy Loading
Building the Code for Production
Getting Started with Deployment (Uploading Files)
Exploring Routing Issues and Finishing Deployment
13 Topics
What How and Why?
Starting Setup and First Steps
Adding User Signup
Showing Feedback to the User
Adding User Login
Managing the Auth State with Context
Using the Token for Requests to Protected Resources
Redirecting the User
Adding Logout
Protecting Frontend Pages
Persisting the User Authentication Status
Adding Auto-Logout
Finishing Steps
32 Topics
What is NextJS?
Key Feature 1: Built-In Server-Side Rendering (Improved SEO)
Key Feature 2: Simplified Routing with File-Based Routing
Key Feature 3: Build Fullstack Apps
Creating a New Next.js Project and App
Analyzing the Created Project
Adding First Pages
Adding Nested Paths and Pages (Nested Routes)
Creating Dynamic Pages (with Parameters)
Extracting Dynamic Parameter Values
Linking Between Pages
Onwards to a Bigger Project
Preparing the Project Pages
Outputting a List of Meetups
Adding the New Meetup Form
The "_app.js" File and Layout Wrapper
Using Programmatic (Imperative) Navigation
Adding Custom Components and CSS Modules
How Pre-Rendering Works and Which Problem We Face
Data Fetching for Static Pages
Static Site Generation (SSG)
Exploring Server-side Rendering (SSR) with "getServerSideProps"
Working with Params for SSG Data Fetching
Preparing Paths with "getStaticPaths" and Working with Fallback Pages
Introducing API Routes
Working with MongoDB
Sending HTTP Requests to Our API Routes
Getting Data from the Database
Getting Meetup Details Data and Preparing Pages
Adding "head" Metadata
Deploying Next.js Projects
Using Fallback Pages and Redeploying
13 Topics
Preparing the Demo Project
Using CSS Transitions
Using CSS Animations
CSS Transition and Animations Limitations
Using ReactTransitionGroup
Using the Transition Component
Wrapping the Transition Component
Animation Timings
Transition Events
The CSSTransition Component
Customizing CSS Classnames
Animating Lists
Alternative Animation Packages
10 Topics
Starting Project and Why You Would Replace Redux
Alternative: Using the Context API
Toggling Favorites with the Context API
Context API Summary
Getting Started with a Custom Hook as a Store
Finishing the Store Hook
Creating a Concrete Store
Using the Custom Store
Custom Hook Store Summary
Optimizing the Custom Hook Store
11 Topics
What and Why?
Understanding Different Kinds of Tests
What to Test and How to Test
Understanding the Technical Setup and Involved Tools
Running the First Test
Writing Our First Test
Grouping Tests Together with Test Suites
Testing User Interaction and State
Testing Connected Components
Testing Asynchronous Code
Working with Mocks
22 Topics
What and Why?
Installing and Using TypeScript
Exploring the Base Types
Working with Array and Object Types
Understanding Type Inference
Using Union Types
Understanding Type Aliases
Functions and Function Types
Diving into Generics
Creating a React + TypeScript Project
Working with Components and TypeScript
Working with Props and TypeScript
Adding a Data Model
Time to Practice: Exercise Time!
Form Submissions in TypeScript Projects
Working with refs and useRef()
Working with "Function Props"
Managing State and TypeScript
Adding Styling
Time to Practice: Removing a Todo
The Context API and TypeScript
Exploring tsconfig.json
26 Topics
What are React Hooks?
The Starting Project
Getting Started with useState()
More on useState() and State Updating
Array Destructuring
Multiple States
Rules of Hooks
Passing State Data Across Components
Time to Practice: Hooks Basics - Problem
Time to Practice: Hooks Basics - Solution
Sending HTTP Requests
useEffect() and Loading Data
Understanding useEffect() Dependencies
More on useEffect()
What's useCallback()?
Working with Refs and useRef()
Cleaning Up with useEffect()
Deleting Ingredients
Loading Errors and State Batching
Understanding useReducer()
Using useReducer() for the HTTP State
Working with useContext()
Performance Optimizations with useMemo()
Getting Started with Custom Hooks
Sharing Data Between Custom Hooks and Components
Using the Custom Hook
32 Topics
What is React?
Why React?
Building SPAs (Single-Page Applications)
React Alternatives
Creating a React Project
Setting Up a Code Editor
Diving into the Created Project
How React Works and Understanding Components
More Component Work and Styling with CSS Classes
Building and Reusing Another Component
Working with "props" and Dynamic Content
Handling Events
Adding More Components
Introducing State
Working with "Event Props" (Passing Function as Props)
Adding Routing
Adding Links and Navigation
Styling with CSS Modules
Outputting Lists of Data
Adding More React Components
Building Wrapper Components with props.children
Adding a Form
Getting User Input and Handling Form Submission
Preparing the App for HTTP
Sending a POST Request
Navigating Programmatically
Getting Started with Fetching Data
Using the useEffect() Hook
Introducing React Context
Context Logic and Different Ways of Updating State
Using Context in Components
More Context Usage
Certified ReactJS Developer
Related React JS Courses
Thank You!
Your review has been submitted successfully.