IIRF Online > Development > Web Development > React JS > React - The Complete Guide 2024 (incl. Next.js, Redux)
React - The Complete Guide 2024 (incl. Next.js, Redux) by Udemy
Dive in and learn React.js from scratch! Learn React, Hooks, Redux, React Router, Next.js, Best Practices and way more!
Course Highlights
- Learn React from the ground up and finish the course as an advanced React developer
- Build multiple high-quality demo apps, including a fullstack app built with NextJS
- Join more than 800,000 students in this course & more than 2,500,000 students I taught across all my courses
- Build fullstack React apps with NextJS 14+
- Follow along locally or in a cloud development environment
- Learn all about React Hooks and React Components
- Manage complex state efficiently with React's Context API & React Redux
- Build standalone React apps & applications connected to a backend via HTTP
- Learn about routing & route-related data fetching with React Router
- Implement user authentication in React apps
- Get started with React Unit Testing
Skills you will learn!
Curriculum
11 Topics
Welcome To The Course!
What is React.js? And Why Would You Use It?
ReactJS vs "Vanilla JavaScript": Why Use React?
Editing Our First React App
About This Course & Course Outline
The Two Ways (Paths) Of Taking This Course
Getting The Most Out Of This Course
Join our Online Learning Community
Creating React Projects
Why Do You Need A Special Project Setup?
Course Setup
25 Topics
Module Introduction
Starting Project
Adding JavaScript To A Page & How React Projects Differ
React Projects Use a Build Process
"import" & "export"
Revisiting Variables & Values
Revisiting Operators
Revisiting Functions & Parameters
Exercise: Working with Functions
Arrow Functions
More on the Arrow Function Syntax
Revisiting Objects & Classes
Arrays & Array Methods like map()
Exercise: Array Methods
Destructuring
Destructuring in Function Parameter Lists
The Spread Operator
Revisiting Control Structures
Manipulating the DOM - Not With React!
Using Functions as Values
Defining Functions Inside Of Functions
Reference vs Primitive Values
Next-Gen JavaScript - Summary
JS Array Functions
Module Resources
40 Topics
Module Introduction
It's All About Components! [Core Concept]
Setting Up The Starting Project
JSX & React Components [Core Concept]
Creating & Using a First Custom Component
A Closer Look: Components & File Extensions
Building & Using a Component
How React Handles Components & How It Builds A "Component Tree" [Core Concept]
Components & JSX
Using & Outputting Dynamic Values [Core Concept]
Setting HTML Attributes Dynamically & Loading Image Files
Outputting Dynamic Content
Making Components Reusable with Props [Core Concept]
Alternative Props Syntaxes
More Prop Syntaxes
Working with Props
Dynamic Values & Props
Best Practice: Storing Components in Files & Using a Good Project Structure
Storing Component Style Files Next To Components
Component Composition: The special "children" Prop [Core Concept]
Component Composition
Reacting to Events [Core Concept]
Passing Functions as Values to Props
Reacting to Events
Passing Custom Arguments to Event Functions
Configuring Event Handlers
Best Practices & Event Handling
How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
Managing State & Using Hooks [Core Concept]
Working with State
Deriving & Outputting Data Based on State
State & Computed Values
Rendering Content Conditionally
Conditional Content
CSS Styling & Dynamic Styling
Dynamic Styling
Outputting List Data Dynamically
Dynamic List Content
Conditional Content & Dynamic Lists
Module Summary
41 Topics
Module Introduction
You Don't Have To Use JSX!
Working with Fragments
Using Fragments
When Should You Split Components?
Splitting Components By Feature & State
Problem: Props Are Not Forwarded To Inner Elements
Forwarding Props To Wrapped Elements
Forwarding Props
Working with Multiple JSX Slots
Setting Component Types Dynamically
Setting Default Prop Values
Creating Flexible Components
Onwards To The Next Project & Advanced Concepts
Not All Content Must Go Into Components
Closer Look: public/ vs assets/ for Image Storage
New Project: First Steps Towards Our Tic-Tac-Toe Game
Concept Repetition: Splitting Components & Building Reusable Components
Concept Repetition: Working with State
Component Instances Work In Isolation!
Conditional Content & A Suboptimal Way Of Updating State
Best Practice: Updating State Based On Old State Correctly
User Input & Two-Way-Binding
Two-Way-Binding
Rendering Multi-Dimensional Lists
Best Practice: Updating Object State Immutably
Lifting State Up [Core Concept]
Avoid Intersecting States!
Prefer Computed Values & Avoid Unnecessary State Management
Deriving State From Props
Sharing State Across Components
Reducing State Management & Identifying Unnecessary State
Disabling Buttons Conditionally
Outsourcing Data Into A Separate File
Lifting Computed Values Up
Deriving Computed Values From Other Computed Values
Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
Why Immutability Matters - Always!
When NOT To Lift State Up
An Alternative To Lifting State Up
Final Polishing & Improving Components
8 Topics
Module Introduction & A Challenge For You!
Adding a Header Component
Getting Started with a User Input Component
Handling Events & Using Two-Way-Binding
Lifting State Up
Computing Values & Properly Handling Number Values
Outputting Results in a List & Deriving More Values
Outputting Content Conditionally
22 Topics
Module Introduction & Starting Project
Splitting CSS Code Across Multiple Files
Styling React Apps with Vanilla CSS - Pros & Cons
Vanilla CSS Styles Are NOT Scoped To Components!
Styling React Apps with Inline Styles
Dynamic & Conditional Inline Styles
Dynamic Styling with Inline Styles
Dynamic & Conditional Styling with CSS Files & CSS Classes
Dynamic Styling with CSS Classes
Scoping CSS Rules with CSS Modules
Introducing "Styled Components" (Third-party Package)
Creating Flexible Components with Styled Components
Dynamic & Conditional Styling with Styled Components
Styled Components: Pseudo Selectors Nested Rules & Media Queries
Creating Reusable Components & Component Combinations
Introducing Tailwind CSS For React App Styling
Adding & Using Tailwind CSS In A React Project
Tailwind: Media Queries & Pseudo Selectors
Dynamic & Conditional Styling with Tailwind
Migrating The Demo App to Tailwind CSS
Tailwind CSS: Pros & Cons
Exercise: Dynamic Styles
7 Topics
Module Introduction
The Starting Project
Understanding React Error Messages
Using the Browser Debugger & Breakpoints
Understanding React's "Strict Mode"
Using the React DevTools (Browser Extension)
Exercise: Fix Errors
22 Topics
Module Introduction & Starting Project
Repetition: Managing User Input with State (Two-Way-Binding)
Repetition: Fragments
Introducing Refs: Connecting & Accessing HTML Elements via Refs
Manipulating the DOM via Refs
Accessing DOM Elements with "refs"
Refs vs State Values
Adding Challenges to the Demo Project
Setting Timers & Managing State
Using Refs for More Than "DOM Element Connections"
Managing Other Values with Refs
Adding a Modal Component
Forwarding Refs to Custom Components
Forwarding Refs
Exposing Component APIs via the useImperativeHandle Hook
Exposing Component APIs
More Examples: When To Use Refs & State
Sharing State Across Components
Enhancing the Demo App "Result Modal"
Closing the Modal via the ESC (Escape) Key
Introducing & Understanding "Portals"
Working with Portals
16 Topics
Module Introduction & Starting Project
Adding a "Projects Sidebar" Component
Styling the Sidebar & Button with Tailwind CSS
Adding the "New Project" Component & A Reusable "Input" Component
Styling Buttons & Inputs with Tailwind CSS
Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
Managing State to Switch Between Components
Collecting User Input with Refs & Forwarded Refs
Handling Project Creation & Updating the UI
Validating User Input & Showing an Error Modal via useImperativeHandle
Styling the Modal via Tailwind CSS
Making Projects Selectable & Viewing Project Details
Handling Project Deletion
Adding "Project Tasks" & A Tasks Component
Managing Tasks & Understanding Prop Drilling
Clearing Tasks & Fixing Minor Bugs
15 Topics
Module Introduction
Understanding Prop Drilling & Project Overview
Prop Drilling: Component Composition as a Solution
Introducing the Context API
Creating & Providing The Context
Consuming the Context
Linking the Context to State
A Different Way Of Consuming Context
What Happens When Context Values Change?
Migrating the Entire Demo Project to use the Context API
Outsourcing Context & State Into a Separate Provider Component
Creating & Using Context
Introducing the useReducer Hook
Dispatching Actions & Editing State with useReducer
Using useReducer()
16 Topics
Module Introduction & Starting Project
What's a "Side Effect"? A Thorough Example
A Potential Problem with Side Effects: An Infinite Loop
Using useEffect for Handling (Some) Side Effects
Not All Side Effects Need useEffect
useEffect Not Needed: Another Example
Preparing Another Use-Case For useEffect
Using useEffect for Syncing With Browser APIs
Understanding Effect Dependencies
Fixing a Small Bug
Preparing Another Problem That Can Be Fixed with useEffect
Introducing useEffect's Cleanup Function
The Problem with Object & Function Dependencies
The useCallback Hook
useEffect's Cleanup Function: Another Example
Optimizing State Updates
12 Topics
Module Introduction & Starting Project
A First Component & Some State
Deriving Values Outputting Questions & Registering Answers
Shuffling Answers & Adding Quiz Logic
Adding Question Timers
Working with Effect Dependencies & useCallback
Using Effect Cleanup Functions & Using Keys for Resetting Components
Highlighting Selected Answers & Managing More State
Splitting Components Up To Solve Problems
Moving Logic To Components That Actually Need It ("Moving State Down")
Setting Different Timers Based On The Selected Answer
Outputting Quiz Results
13 Topics
Module Introduction
React Builds A Component Tree / How React Works Behind The Scenes
Analyzing Component Function Executions via React's DevTools Profiler
Avoiding Component Function Executions with memo()
Avoiding Component Function Executions with Clever Structuring
Understanding the useCallback() Hook
Understanding the useMemo() Hook
React Uses A Virtual DOM - Time To Explore It!
Why Keys Matter When Managing State!
More Reasons For Why Keys Matter
Using Keys For Resetting Components
State Scheduling & Batching
Optimizing React with MillionJS
10 Topics
Module Introduction
What & Why
Adding a First Class-based Component
Working with State & Events
The Component Lifecycle (Class-based Components Only!)
Lifecycle Methods In Action
Class-based Components & Context
Class-based vs Functional Components: A Summary
Introducing Error Boundaries
Module Resources
16 Topics
Module Introduction
How (Not) To Connect To A Database
Starting Project & Dummy Backend API
Preparing the App For Data Fetching
How NOT To Send HTTP Requests (And Why It's Wrong)
Sending HTTP Requests (GET Request) via useEffect
Using async / await
Handling Loading States
Importing from Error.jsx
Handling HTTP Errors
Transforming Fetched Data
Extracting Code & Improving Code Structure
Sending Data with POST Requests
Using Optimistic Updating
Deleting Data (via DELETE HTTP Requests)
Practice: Fetching Data
7 Topics
Module Introduction & Starting Project
Revisiting the "Rules of Hooks" & Why To Use Hooks
Creating a Custom Hook
Custom Hook: Managing State & Returning State Values
Exposing Nested Functions From The Custom Hook
Using A Custom Hook in Multiple Components
Creating Flexible Custom Hooks
16 Topics
Module Introduction & Starting Project
What Are Forms & What's Tricky About Them?
Handling Form Submission
Managing & Getting User Input via State & Generic Handlers
Getting User Input via Refs
Getting Values via FormData & Native Browser APIs
Resetting Forms
Validating Input on Every Keystroke via State
Validating Input Upon Lost Focus (Blur)
Validating Input Upon Form Submission
Validating Input via Built-in Validation Props
Mixing Custom & Built-in Validation Logic
Building & Using a Reusable Input Component
Outsourcing Validation Logic
Creating a Custom useInput Hook
Using Third-Party Form Libraries
17 Topics
Module Introduction & Starting Project
Planning the App & Adding a First Component
Fetching Meals Data (GET HTTP Request)
Adding a "MealItem" Component
Formatting & Outputting Numbers as Currency
Creating a Configurable & Flexible Custom Button Component
Getting Started with Cart Context & Reducer
Finishing & Using the Cart Context & Reducer
Adding a Reusable Modal Component with useEffect
Opening the Cart in the Modal via a New Context
Working on the Cart Items
Adding a Custom Input Component & Managing Modal Visibility
Handling Form Submission & Validation
Sending a POST Request with Order Data
Adding a Custom HTTP Hook & Avoiding Common Errors
Handling HTTP Loading & Error States
Finishing Touches
24 Topics
Module Introduction
Another Look At State In React Apps
Redux vs React Context
How Redux Works
MUST READ: Redux createStore() is (not) deprecated
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
Connecting Redux Toolkit State
Migrating Everything To Redux Toolkit
Working with Multiple Slices
Reading & Dispatching From A New Slice
Splitting Our Code
Summary
16 Topics
Module Introduction
Redux & Side Effects (and Asynchronous Code)
Refresher / Practice: Part 1/2
Refresher / Practice: Part 2/2
Using Firebase as a Backend
Redux & Async Code
Frontend Code vs Backend Code
Where To Put Our Logic
Using useEffect with Redux
A Problem with useEffect()
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
44 Topics
Module Introduction
Routing: Multiple Pages in Single-Page Applications
Project Setup & Installing React Router
Defining Routes
Adding a Second Route
Exploring an Alternative Way of Defining Routes
Navigating between Pages with Links
Layouts & Nested Routes
Showing Error Pages with errorElement
Working with Navigation Links (NavLink)
Navigating Programmatically
Defining & Using Dynamic Routes
Adding Links for Dynamic Routes
Understanding Relative & Absolute Paths
Working with Index Routes
Onwards to a new Project Setup
Time to Practice: Problem
Time to Practice: Solution
Data Fetching with a loader()
Using Data From A Loader In The Route Component
More loader() Data Usage
Where Should loader() Code Be Stored?
When Are loader() Functions Executed?
Reflecting The Current Navigation State in the UI
Returning Responses in loader()s
Which Kind Of Code Goes Into loader()s?
Error Handling with Custom Errors
Extracting Error Data & Throwing Responses
The json() Utility Function
Dynamic Routes & loader()s
The useRouteLoaderData() Hook & Accessing Data From Other Routes
Planning Data Submission
Working with action() Functions
Submitting Data Programmatically
Updating the UI State Based on the Submission Status
Validating User Input & Outputting Validation Errors
Reusing Actions via Request Methods
Behind-the-Scenes Work with useFetcher()
Deferring Data Fetching with defer()
Controlling Which Data Should Be Deferred
Module Summary
Upgrading from React Router v5
Module Resources
Old Lectures
15 Topics
Module Introduction
How Authentication Works
Project Setup & Route Setup
Working with Query Parameters
Implementing the Auth Action
Validating User Input & Outputting Validation Errors
Adding User Login
Attaching Auth Tokens to Outgoing Requests
Adding User Logout
Updating the UI Based on Auth Status
Important: loader()s must return null or any other value
Adding Route Protection
Adding Automatic Logout
Managing the Token Expiration
Module Resources
7 Topics
Module Introduction
Deployment Steps
Understanding Lazy Loading
Adding Lazy Loading
Building the Code For Production
Deployment Example
Server-side Routing & Required Configuration
20 Topics
Module Introduction
Project Setup & Overview
React Query: What & Why?
Installing & Using Tanstack Query - And Seeing Why It's Great!
Understanding & Configuring Query Behaviors - Cache & Stale Data
Dynamic Query Functions & Query Keys
The Query Configuration Object & Aborting Requests
Enabled & Disabled Queries
Changing Data with Mutations
Fetching More Data & Testing the Mutation
Acting on Mutation Success & Invalidating Queries
A Challenge! The Problem
A Challenge! The Solution
Disabling Automatic Refetching After Invalidations
Enhancing the Demo App & Repeating Mutation Concepts
React Query Advantages In Action
Updating Data with Mutations
Optimistic Updating
Using the Query Key As Query Function Input
React Query & React Router
79 Topics
Module Introduction
Creating a NextJS Project
Understanding File-based Routing & React Server Components
Adding Another Route via the Filesystem
Navigating Between Pages
Working with Pages & Layouts
Reserved File Names Custom Components & How To Organize A NextJS Project
Reserved Filenames
Configuring Dynamic Routes & Using Route Parameters
Onwards to the Main Project: The Foodies App
Exercise: Your Task
Exercise: Solution
Revisiting The Concept Of Layouts
Adding a Custom Component To A Layout
Styling NextJS Project: Your Options & Using CSS Modules
Optimizing Images with the NextJS Image Component
Using More Custom Components
Populating The Starting Page Content
Preparing an Image Slideshow
React Server Components vs Client Components - When To Use What
Using Client Components Efficiently
Outputting Meals Data & Images With Unknown Dimensions
Setting Up A SQLite Database
Fetching Data By Leveraging NextJS & Fullstack Capabilities
Adding A Loading Page
Using Suspense & Streamed Responses For Granular Loading State Management
Handling Errors
Handling "Not Found" States
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
Throwing Not Found Errors For Individual Meals
Getting Started with the "Share Meal" Form
Getting Started with a Custom Image Picker Input Component
Adding an Image Preview to the Picker
Improving the Image Picker Component
Introducing & Using Server Actions for Handling Form Submissions
Storing Server Actions in Separate Files
Creating a Slug & Sanitizing User Input for XSS Protection
Storing Uploaded Images & Storing Data in the Database
Managing the Form Submission Status with useFormStatus
Adding Server-Side Input Validation
Working with Server Action Responses & useFormState
Building For Production & Understanding NextJS Caching
Triggering Cache Revalidations
Don't Store Files Locally On The Filesystem!
Bonus: Storing Uploaded Images In The Cloud (AWS S3)
Adding Static Metadata
Adding Dynamic Metadata
Module Summary
About the NextJS Pages Router
Creating a NextJS Project
Analyzing the Created Project
Adding First Pages
Adding Nested Paths & 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 & Layout Wrapper
Using Programmatic (Imperative) Navigation
Adding Custom Components & CSS Modules
How Pre-rendering Works & Which Problem We Face
Data Fetching for Static Pages
More on Static Site Generation (SSG)
Exploring Server-side Rendering (SSR) with "getServerSideProps"
Working with Params for SSG Data Fetching
Preparing Paths with "getStaticPaths" & 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 & Preparing Pages
Adding "head" Metadata
Deploying Next.js Projects
Using Fallback Pages & Re-deploying
Summary
Module Resources
21 Topics
Module Introduction
Project Setup & Overview
Animating with CSS Transitions
Animating with CSS Animations
Introducing Framer Motion
Framer Motion Basics & Fundamentals
Animating Between Conditional Values
Adding Entry Animations
Animating Element Disappearances / Removal
Making Elements "Pop" With Hover Animations
Reusing Animation States
Nested Animations & Variants
Animating Staggered Lists
Animating Colors & Working with Keyframes
Imperative Animations
Animating Layout Changes
Orchestrating Multi-Element Animations
Combining Animations With Layout Animations
Animating Shared Elements
Re-triggering Animations via Keys
Scroll-based Animations
12 Topics
Module Introduction
Project Overview
Introducing Compound Components
Managing Multi-Component State with the Context API
Grouping Compound Components
Adding Extra Components For Reusability & Configurability
Sharing Cross-Component State When Working With Compound Components
Introducing & Using Render Props
Adding Search To A React App
Implementing a Search Functionality With Help Of Render Props
Handling Keys Dynamically
Working with Debouncing
15 Topics
Module Introduction
React 18 & This Section
Starting Project & Why You Would Replace Redux
Alternative: Using the Context API
Toggling Favorites with the Context API
Context API Summary (and why NOT to use it instead of Redux)
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
Bonus: Managing Multiple State Slices with the Custom Store Hook
Wrap Up
Module Resources
13 Topics
Module Introduction
What & Why?
Understanding Different Kinds Of Tests
What To Test & How To Test
Understanding the Technical Setup & Involved Tools
Running a First Test
Writing Our First Test
Grouping Tests Together With Test Suites
Testing User Interaction & State
Testing Connected Components
Testing Asynchronous Code
Working With Mocks
Summary & Further Resources
25 Topics
Module Introduction
What & Why?
Installing & Using TypeScript
Exploring the Base Types
Working with Array & Object Types
Understanding Type Inference
Using Union Types
Understanding Type Aliases
Functions & Function Types
Diving Into Generics
A Closer Look At Generics
Creating a React + TypeScript Project
Working with Components & TypeScript
Working with Props & TypeScript
Adding a Data Model
Time to Practice: Exercise Time!
Form Submissions In TypeScript Projects
Working with refs & useRef
Working with "Function Props"
Managing State & TypeScript
Adding Styling
Time to Practice: Removing a Todo
The Context API & TypeScript
Summary
Bonus: Exploring tsconfig.json
37 Topics
Module Introduction
What Is React & Why Would You Use It?
React Projects - Requirements
Creating React Projects
Out Starting Project
Understanding How React Works
Building A First Custom Component
Outputting Dynamic Values
Reusing Components
Passing Data to Components with Props
CSS Styling & CSS Modules
Exercise & Another Component
Preparing the App For State Management
Adding Event Listeners
Working with State
Lifting State Up
The Special "children" Prop
State & Conditional Content
Adding a Shared Header & More State Management
Adding Form Buttons
Handling Form Submission
Updating State Based On Previous State
Outputting List Data
Adding a Backend to the React SPA
Sending a POST HTTP Request
Handling Side Effects with useEffect()
Handle Loading State
Understanding & Adding Routing
Adding Routes
Working with Layout Routes
Refactoring Route Components & More Nesting
Linking & Navigating
Data Fetching via loader()s
Submitting Data with action()s
Dynamic Routes
Module Summary
Module Resources
2 Topics
Course Roundup
Bonus!
2 Topics
Course Update Overview Explanation & Migration Guide
Old Course Content Download
29 Topics
About these [BONUS / OPTIONAL] sections
Module Introduction
What Are Components? And Why Is React All About Them?
React Code Is Written In A "Declarative Way"!
Creating a new React Project
The Starting Project
Analyzing a Standard React Project
Introducing JSX
How React Works
Exercise: Working with JSX Code
Building a First Custom Component
Exercise: Building a First Component
Writing More Complex JSX Code
Adding Basic CSS Styling
Outputting Dynamic Data & Working with Expressions in JSX
Passing Data via "props"
Time to Practice: React & Component Basics
Exercise: Passing Data via "props"
Alternative Ways of Passing & Receiving / Handling "props"
Adding "normal" JavaScript Logic to Components
Splitting Components Into Multiple Components
The Concept of "Composition" ("children props")
Exercise: Component Composition
A First Summary
A Closer Look At JSX
Organizing Component Files
An Alternative Function Syntax
Learning Check: React Basics Components Props & JSX
Module Resources
8 Topics
Module Introduction
The Starting Project & Your Tasks
Exercise Hints
Outputting Key Concepts Data
Identifying Possible Components
Creating & Using a Custom Component
Outsourcing Concept Items Into a Reusable Component
Module Resources
25 Topics
Module Introduction
Listening to Events & Working with Event Handlers
Exercise: Listening to Events
How Component Functions Are Executed
Working with "State"
Exercise: Working with "State"
A Closer Look at the "useState" Hook
State can be updated in many ways!
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
Exercise: Using State with Form Inputs
Exercise: Updating State Based On Older State
Alternative: Creating A Shared Handler Function
Handling Form Submission
Adding Two-Way Binding
Time to Practice: Working with Events & State
Child-to-Parent Component Communication (Bottom-up)
Lifting The State Up
Derived / Computed State
Controlled vs Uncontrolled Components & Stateless vs Stateful Components
Learning Check: Working with Events & State
Module Resources
14 Topics
Module Introduction
Rendering Lists of Data
Exercise: Rendering Lists of Data
Using Stateful Lists
Understanding "Keys"
Outputting Conditional Content
Exercise: Outputting Conditional Content
Adding Conditional Return Statements
Demo App: Adding a Chart
Adding Dynamic Styles
Wrap Up & Next Steps
Fixing a Small Bug
Learning Check: Outputting Lists & Conditional Content
Module Resources
22 Topics
Module Introduction
The First Practice Project & Your Tasks
Exercise Hints
Splitting the App Into Components
Handling Events
Managing State
Lifting the State Up
Outputting Results Conditionally
Adding CSS Modules
Fixing a Small Bug
Introducing the Second Project
Exercise Hints
Adding a "User" Component
Adding a re-usable "Card" Component
Adding a re-usable "Button" Component
Managing the User Input State
Adding Validation & Resetting Logic
Adding a Users List Component
Managing a List Of Users via State
Adding The "ErrorModal" Component
Managing the Error State
Module Resources
React - The Complete Guide 2024 (incl. Next.js, Redux)
Related React JS Courses
Thank You!
Your review has been submitted successfully.