React - The Complete Guide 2024 (incl. Next.js, Redux)
Loại khoá học: Other IT & Software
Dive in and learn React.js from scratch! Learn React, Hooks, Redux, React Router, Next.js, Best Practices and way more!
Mô tả
This bestselling course has turned more than 750,000 students into ReactJS developers (more than any other React course on Udemy)!
-
BIG COURSE UPDATE October 2023:
Updated the entire first half of the course (re-recorded lectures, other half was updated at beginning of year already)!
Improved explanations & demo projects. Course now covers even more key concepts & best practices.
Updated August 2023:
Added brand-new section on React Query (Tanstack Query)
Added brand-new section on animating React apps with Framer Motion
Updated June 2023:
Add two new practice projects
Added more coding exercises
Added brand-new JS Refresher section
Tons of minor improvements & fixes
This course is completely up-to-date with the very latest version of React with all the core, modern features you need to know & teaches you React in a practical, hands-on way!
Updated February 2023:
Completely re-recorded majority of second half of course (incl. routing, authentication)
A Course For Busy Customers & Business Professionals!
This course also comes with two paths which you can take: The "complete" path (full >40h course) and the "summary" (fast-track) path (~4h summary module) - you can choose the path that best fits your time requirements!
React.js is THE most popular JavaScript library you can use and learn these days to build modern, reactive user interfaces for the web.
This course teaches you React in-depth, from the ground up, step by step by diving into all the core basics, exploring tons of examples and also introducing you to advanced concepts as well.
You'll get all the theory, tons of examples and demos, assignments and exercises and tons of important knowledge that is skipped by most other resources - after all, there is a reason why this course is that huge! :)
And in case you don't even know why you would want to learn React and you're just here because of some ad or "the algorithm" - no worries: ReactJS is a key technology as a web developer and in this course I will also explain WHY it's that important!
Welcome to "React - The Complete Guide"!
This course will teach you React.js in a practice-oriented way, using all the latest patterns and best practices you need. You will learn all the key fundamentals as well as advanced concepts and related topics to turn you into a React.js developer.
This is a huge course because it really covers EVERYTHING you need to know and learn to become a React.js developer!
No matter if you know nothing about React or if you already got some basic React knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course!
My goal with this course is to ensure that you feel confident working with React, so that you can apply for React jobs, use it in your own projects or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!
I kept this course updated since its initial launch to ensure that you always learn React in the best possible and up-do-date way!
What's in this course?
A thorough introduction to React.js (What is it and why would you use it?)
All the core basics: How React works, building components with React & building UIs with React
Components, props & dynamic data binding
Working with user events and state to create interactive applications
A (thorough) look behind the scenes to understand how React works under the hood
Detailed explanations on how to work with lists and conditional content
React Hooks (in-depth)!
Working with built-in Hooks and building custom Hooks
How to debug React apps
Styling React apps with "Styled Components" and "CSS Modules"
Working with "Fragments" & "Portals"
Dealing with side effects
Class-based components and functional components
Sending Http requests & handling transitional states + responses
Handling forms and user input (incl. validation)
Redux & Redux Toolkit
Routing with React Router
An in-depth introduction into Next.js
Deploying React Apps
Implementing Authentication
Unit Tests
Combining React with TypeScript
Adding Animations
Tons of examples and demo projects so that you can apply all the things you learned in real projects
And so much more - check out the full curriculum on this page!
This really is the "Complete Guide" - promised!
And best of all?
You don't need any prior React knowledge!
This course starts with zero knowledge assumed! All you need is basic web development and JavaScript knowledge (though the course even includes a brief JavaScript refresher to ensure that we're all on the same page!).
Check out the full curriculum, the free preview videos and join the course risk-free thanks to the 30-day money-back guarantee!
Bạn sẽ học được gì
Yêu cầu
Nội dung khoá học
38 sections
Welcome To The Course!
01:07
What is React.js? And Why Would You Use It?
02:58
ReactJS vs "Vanilla JavaScript": Why Use React?
10:57
Editing Our First React App
04:22
About This Course & Course Outline
02:55
The Two Ways (Paths) Of Taking This Course
03:08
Getting The Most Out Of This Course
05:24
Join our Online Learning Community
00:29
Creating React Projects
07:10
Why Do You Need A Special Project Setup?
02:51
Module Introduction
01:49
Starting Project
01:00
Adding JavaScript To A Page & How React Projects Differ
06:57
React Projects Use a Build Process
08:04
"import" & "export"
12:04
Revisiting Variables & Values
07:01
Revisiting Operators
02:33
Revisiting Functions & Parameters
08:14
Exercise: Working with Functions
1 question
Arrow Functions
02:11
More on the Arrow Function Syntax
01:14
Revisiting Objects & Classes
06:07
Arrays & Array Methods like map()
11:10
Exercise: Array Methods
1 question
Destructuring
05:16
Destructuring in Function Parameter Lists
00:48
The Spread Operator
03:13
Revisiting Control Structures
05:28
Manipulating the DOM - Not With React!
00:52
Using Functions as Values
07:21
Defining Functions Inside Of Functions
01:55
Reference vs Primitive Values
04:44
Next-Gen JavaScript - Summary
03:51
JS Array Functions
00:20
Module Resources
00:15
Module Introduction
01:48
It's All About Components! [Core Concept]
06:07
Setting Up The Starting Project
03:06
JSX & React Components [Core Concept]
04:42
Creating & Using a First Custom Component
05:52
A Closer Look: Components & File Extensions
01:14
Building & Using a Component
1 question
How React Handles Components & How It Builds A "Component Tree" [Core Concept]
08:21
Components & JSX
7 questions
Using & Outputting Dynamic Values [Core Concept]
06:00
Setting HTML Attributes Dynamically & Loading Image Files
04:41
Outputting Dynamic Content
1 question
Making Components Reusable with Props [Core Concept]
09:06
Alternative Props Syntaxes
06:44
More Prop Syntaxes
01:34
Working with Props
1 question
Dynamic Values & Props
7 questions
Best Practice: Storing Components in Files & Using a Good Project Structure
06:31
Storing Component Style Files Next To Components
06:15
Component Composition: The special "children" Prop [Core Concept]
08:06
Component Composition
1 question
Reacting to Events [Core Concept]
06:45
Passing Functions as Values to Props
06:43
Reacting to Events
1 question
Passing Custom Arguments to Event Functions
05:36
Configuring Event Handlers
1 question
Best Practices & Event Handling
5 questions
How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
05:29
Managing State & Using Hooks [Core Concept]
10:28
Working with State
1 question
Deriving & Outputting Data Based on State
04:50
State & Computed Values
4 questions
Rendering Content Conditionally
08:03
Conditional Content
1 question
CSS Styling & Dynamic Styling
05:12
Dynamic Styling
1 question
Outputting List Data Dynamically
07:40
Dynamic List Content
1 question
Conditional Content & Dynamic Lists
3 questions
Module Summary
06:05
Module Introduction
01:26
You Don't Have To Use JSX!
04:37
Working with Fragments
05:40
Using Fragments
1 question
When Should You Split Components?
03:14
Splitting Components By Feature & State
06:54
Problem: Props Are Not Forwarded To Inner Elements
06:44
Forwarding Props To Wrapped Elements
03:46
Forwarding Props
1 question
Working with Multiple JSX Slots
08:42
Setting Component Types Dynamically
08:44
Setting Default Prop Values
02:09
Creating Flexible Components
1 question
Onwards To The Next Project & Advanced Concepts
02:16
Not All Content Must Go Into Components
05:10
Closer Look: public/ vs assets/ for Image Storage
01:12
New Project: First Steps Towards Our Tic-Tac-Toe Game
03:58
Concept Repetition: Splitting Components & Building Reusable Components
04:13
Concept Repetition: Working with State
07:57
Component Instances Work In Isolation!
02:03
Conditional Content & A Suboptimal Way Of Updating State
04:54
Best Practice: Updating State Based On Old State Correctly
07:04
User Input & Two-Way-Binding
07:42
Two-Way-Binding
1 question
Rendering Multi-Dimensional Lists
07:40
Best Practice: Updating Object State Immutably
08:44
Lifting State Up [Core Concept]
09:39
Avoid Intersecting States!
05:22
Prefer Computed Values & Avoid Unnecessary State Management
06:17
Deriving State From Props
07:22
Sharing State Across Components
04:12
Reducing State Management & Identifying Unnecessary State
05:52
Disabling Buttons Conditionally
02:37
Outsourcing Data Into A Separate File
04:28
Lifting Computed Values Up
05:19
Deriving Computed Values From Other Computed Values
05:29
Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
05:40
Why Immutability Matters - Always!
05:28
When NOT To Lift State Up
05:19
An Alternative To Lifting State Up
03:16
Final Polishing & Improving Components
05:15
Module Introduction & A Challenge For You!
05:09
Adding a Header Component
04:48
Getting Started with a User Input Component
05:07
Handling Events & Using Two-Way-Binding
10:28
Lifting State Up
08:59
Computing Values & Properly Handling Number Values
05:41
Outputting Results in a List & Deriving More Values
09:02
Outputting Content Conditionally
04:23
Module Introduction & Starting Project
03:57
Splitting CSS Code Across Multiple Files
03:22
Styling React Apps with Vanilla CSS - Pros & Cons
02:32
Vanilla CSS Styles Are NOT Scoped To Components!
03:31
Styling React Apps with Inline Styles
06:24
Dynamic & Conditional Inline Styles
03:27
Dynamic Styling with Inline Styles
1 question
Dynamic & Conditional Styling with CSS Files & CSS Classes
05:41
Dynamic Styling with CSS Classes
1 question
Scoping CSS Rules with CSS Modules
09:51
Introducing "Styled Components" (Third-party Package)
08:03
Creating Flexible Components with Styled Components
04:47
Dynamic & Conditional Styling with Styled Components
11:07
Styled Components: Pseudo Selectors, Nested Rules & Media Queries
07:15
Creating Reusable Components & Component Combinations
09:53
Introducing Tailwind CSS For React App Styling
11:26
Adding & Using Tailwind CSS In A React Project
03:39
Tailwind: Media Queries & Pseudo Selectors
05:22
Dynamic & Conditional Styling with Tailwind
05:50
Migrating The Demo App to Tailwind CSS
04:15
Tailwind CSS: Pros & Cons
04:26
Exercise: Dynamic Styles
1 question
Module Introduction
01:26
The Starting Project
01:16
Understanding React Error Messages
08:31
Using the Browser Debugger & Breakpoints
07:23
Understanding React's "Strict Mode"
06:19
Using the React DevTools (Browser Extension)
03:57
Exercise: Fix Errors
1 question
Module Introduction & Starting Project
03:19
Repetition: Managing User Input with State (Two-Way-Binding)
05:17
Repetition: Fragments
01:12
Introducing Refs: Connecting & Accessing HTML Elements via Refs
06:04
Manipulating the DOM via Refs
02:14
Accessing DOM Elements with "refs"
1 question
Refs vs State Values
04:45
Adding Challenges to the Demo Project
04:49
Setting Timers & Managing State
04:56
Using Refs for More Than "DOM Element Connections"
08:30
Managing Other Values with Refs
1 question
Adding a Modal Component
06:39
Forwarding Refs to Custom Components
06:07
Forwarding Refs
1 question
Exposing Component APIs via the useImperativeHandle Hook
07:13
Exposing Component APIs
1 question
More Examples: When To Use Refs & State
08:50
Sharing State Across Components
04:58
Enhancing the Demo App "Result Modal"
02:12
Closing the Modal via the ESC (Escape) Key
00:19
Introducing & Understanding "Portals"
06:55
Working with Portals
1 question
Module Introduction & Starting Project
03:11
Adding a "Projects Sidebar" Component
02:29
Styling the Sidebar & Button with Tailwind CSS
05:00
Adding the "New Project" Component & A Reusable "Input" Component
05:58
Styling Buttons & Inputs with Tailwind CSS
07:03
Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
06:49
Managing State to Switch Between Components
08:19
Collecting User Input with Refs & Forwarded Refs
13:22
Handling Project Creation & Updating the UI
06:00
Validating User Input & Showing an Error Modal via useImperativeHandle
10:55
Styling the Modal via Tailwind CSS
05:46
Making Projects Selectable & Viewing Project Details
15:22
Handling Project Deletion
04:44
Adding "Project Tasks" & A Tasks Component
05:51
Managing Tasks & Understanding Prop Drilling
15:23
Clearing Tasks & Fixing Minor Bugs
06:40
Module Introduction
01:54
Understanding Prop Drilling & Project Overview
05:58
Prop Drilling: Component Composition as a Solution
05:17
Introducing the Context API
02:17
Creating & Providing The Context
07:34
Consuming the Context
05:49
Linking the Context to State
07:27
A Different Way Of Consuming Context
05:01
What Happens When Context Values Change?
01:25
Migrating the Entire Demo Project to use the Context API
06:20
Outsourcing Context & State Into a Separate Provider Component
06:05
Creating & Using Context
1 question
Introducing the useReducer Hook
10:06
Dispatching Actions & Editing State with useReducer
10:14
Using useReducer()
1 question
Module Introduction & Starting Project
03:37
What's a "Side Effect"? A Thorough Example
07:22
A Potential Problem with Side Effects: An Infinite Loop
02:48
Using useEffect for Handling (Some) Side Effects
05:31
Not All Side Effects Need useEffect
07:58
useEffect Not Needed: Another Example
08:30
Preparing Another Use-Case For useEffect
04:10
Using useEffect for Syncing With Browser APIs
04:09
Understanding Effect Dependencies
03:00
Fixing a Small Bug
00:45
Preparing Another Problem That Can Be Fixed with useEffect
04:54
Introducing useEffect's Cleanup Function
04:49
The Problem with Object & Function Dependencies
08:09
The useCallback Hook
03:48
useEffect's Cleanup Function: Another Example
07:31
Optimizing State Updates
03:44
Module Introduction & Starting Project
02:21
A First Component & Some State
07:03
Deriving Values, Outputting Questions & Registering Answers
12:53
Shuffling Answers & Adding Quiz Logic
06:57
Adding Question Timers
11:40
Working with Effect Dependencies & useCallback
07:14
Using Effect Cleanup Functions & Using Keys for Resetting Components
07:53
Highlighting Selected Answers & Managing More State
11:34
Splitting Components Up To Solve Problems
17:43
Moving Logic To Components That Actually Need It ("Moving State Down")
12:46
Setting Different Timers Based On The Selected Answer
08:07
Outputting Quiz Results
15:09
Module Introduction
01:16
React Builds A Component Tree / How React Works Behind The Scenes
08:41
Analyzing Component Function Executions via React's DevTools Profiler
05:57
Avoiding Component Function Executions with memo()
08:03
Avoiding Component Function Executions with Clever Structuring
06:06
Understanding the useCallback() Hook
07:05
Understanding the useMemo() Hook
05:58
React Uses A Virtual DOM - Time To Explore It!
07:15
Why Keys Matter When Managing State!
11:56
More Reasons For Why Keys Matter
02:54
Using Keys For Resetting Components
05:22
State Scheduling & Batching
05:49
Optimizing React with MillionJS
04:45
Module Introduction
02:10
What & Why
04:52
Adding a First Class-based Component
06:54
Working with State & Events
11:38
The Component Lifecycle (Class-based Components Only!)
05:20
Lifecycle Methods In Action
11:46
Class-based Components & Context
04:53
Class-based vs Functional Components: A Summary
02:42
Introducing Error Boundaries
09:52
Module Resources
00:19
Module Introduction
02:53
How (Not) To Connect To A Database
06:20
Starting Project & Dummy Backend API
03:25
Preparing the App For Data Fetching
05:07
How NOT To Send HTTP Requests (And Why It's Wrong)
06:24
Sending HTTP Requests (GET Request) via useEffect
03:59
Using async / await
02:25
Handling Loading States
05:27
Handling HTTP Errors
09:16
Transforming Fetched Data
05:31
Extracting Code & Improving Code Structure
02:53
Sending Data with POST Requests
12:00
Using Optimistic Updating
07:33
Deleting Data (via DELETE HTTP Requests)
03:43
Practice: Fetching Data
07:13
Module Introduction & Starting Project
02:07
Revisiting the "Rules of Hooks" & Why To Use Hooks
06:11
Creating a Custom Hook
05:32
Custom Hook: Managing State & Returning State Values
10:50
Exposing Nested Functions From The Custom Hook
06:03
Using A Custom Hook in Multiple Components
04:25
Creating Flexible Custom Hooks
04:59
Module Introduction & Starting Project
02:04
What Are Forms & What's Tricky About Them?
03:59
Handling Form Submission
10:26
Managing & Getting User Input via State & Generic Handlers
11:12
Getting User Input via Refs
04:35
Getting Values via FormData & Native Browser APIs
09:03
Resetting Forms
04:38
Validating Input on Every Keystroke via State
06:58
Validating Input Upon Lost Focus (Blur)
07:53
Validating Input Upon Form Submission
07:54
Validating Input via Built-in Validation Props
04:59
Mixing Custom & Built-in Validation Logic
04:28
Building & Using a Reusable Input Component
10:05
Outsourcing Validation Logic
03:22
Creating a Custom useInput Hook
15:11
Using Third-Party Form Libraries
01:31
Module Introduction & Starting Project
04:14
Planning the App & Adding a First Component
06:40
Fetching Meals Data (GET HTTP Request)
12:00
Adding a "MealItem" Component
07:39
Formatting & Outputting Numbers as Currency
02:51
Creating a Configurable & Flexible Custom Button Component
08:02
Getting Started with Cart Context & Reducer
20:09
Finishing & Using the Cart Context & Reducer
17:21
Adding a Reusable Modal Component with useEffect
07:26
Opening the Cart in the Modal via a New Context
19:32
Working on the Cart Items
08:01
Adding a Custom Input Component & Managing Modal Visibility
19:31
Handling Form Submission & Validation
06:03
Sending a POST Request with Order Data
07:35
Adding a Custom HTTP Hook & Avoiding Common Errors
26:23
Handling HTTP Loading & Error States
03:12
Finishing Touches
14:07
Module Introduction
01:05
Another Look At State In React Apps
05:14
Redux vs React Context
06:19
How Redux Works
05:48
MUST READ: Redux createStore() is (not) deprecated
00:36
Exploring The Core Redux Concepts
15:14
More Redux Basics
03:04
Preparing a new Project
01:59
Creating a Redux Store for React
04:54
Providing the Store
03:13
Using Redux Data in React Components
05:08
Dispatching Actions From Inside Components
03:33
Redux with Class-based Components
10:20
Attaching Payloads to Actions
04:15
Working with Multiple State Properties
06:19
How To Work With Redux State Correctly
05:07
Redux Challenges & Introducing Redux Toolkit
05:27
Adding State Slices
08:11
Connecting Redux Toolkit State
04:47
Migrating Everything To Redux Toolkit
06:19
Working with Multiple Slices
11:50
Reading & Dispatching From A New Slice
06:56
Splitting Our Code
05:03
Summary
03:53
Module Introduction
00:39
Redux & Side Effects (and Asynchronous Code)
03:27
Refresher / Practice: Part 1/2
20:12
Refresher / Practice: Part 2/2
18:00
Using Firebase as a Backend
00:30
Redux & Async Code
04:09
Frontend Code vs Backend Code
05:40
Where To Put Our Logic
08:59
Using useEffect with Redux
06:00
A Problem with useEffect()
00:14
Handling Http States & Feedback with Redux
12:49
Using an Action Creator Thunk
12:07
Getting Started with Fetching Data
08:39
Finalizing the Fetching Logic
05:16
Exploring the Redux DevTools
05:37
Summary
01:52
Module Introduction
03:21
Routing: Multiple Pages in Single-Page Applications
03:15
Project Setup & Installing React Router
03:05
Defining Routes
07:42
Adding a Second Route
02:07
Exploring an Alternative Way of Defining Routes
03:01
Navigating between Pages with Links
04:35
Layouts & Nested Routes
08:24
Showing Error Pages with errorElement
03:57
Working with Navigation Links (NavLink)
06:37
Navigating Programmatically
02:41
Defining & Using Dynamic Routes
07:44
Adding Links for Dynamic Routes
03:22
Understanding Relative & Absolute Paths
10:38
Working with Index Routes
01:55
Onwards to a new Project Setup
03:16
Time to Practice: Problem
01:25
Time to Practice: Solution
23:16
Data Fetching with a loader()
07:35
Using Data From A Loader In The Route Component
02:51
More loader() Data Usage
03:17
Where Should loader() Code Be Stored?
02:18
When Are loader() Functions Executed?
02:48
Reflecting The Current Navigation State in the UI
02:53
Returning Responses in loader()s
04:01
Which Kind Of Code Goes Into loader()s?
01:14
Error Handling with Custom Errors
04:56
Extracting Error Data & Throwing Responses
06:24
The json() Utility Function
02:07
Dynamic Routes & loader()s
07:32
The useRouteLoaderData() Hook & Accessing Data From Other Routes
07:40
Planning Data Submission
02:22
Working with action() Functions
09:07
Submitting Data Programmatically
09:06
Updating the UI State Based on the Submission Status
04:02
Validating User Input & Outputting Validation Errors
06:57
Reusing Actions via Request Methods
07:55
Behind-the-Scenes Work with useFetcher()
09:10
Deferring Data Fetching with defer()
09:07
Controlling Which Data Should Be Deferred
07:22
Module Summary
02:56
Upgrading from React Router v5
00:18
Module Resources
00:21
Old Lectures
00:37
Module Introduction
01:10
How Authentication Works
09:07
Project Setup & Route Setup
03:46
Working with Query Parameters
07:35
Implementing the Auth Action
11:40
Validating User Input & Outputting Validation Errors
04:18
Adding User Login
01:55
Attaching Auth Tokens to Outgoing Requests
06:32
Adding User Logout
04:20
Updating the UI Based on Auth Status
06:05
Important: loader()s must return null or any other value
00:28
Adding Route Protection
02:46
Adding Automatic Logout
05:10
Managing the Token Expiration
07:28
Module Resources
00:21
Module Introduction
01:39
Deployment Steps
03:35
Understanding Lazy Loading
04:47
Adding Lazy Loading
09:11
Building the Code For Production
02:22
Deployment Example
06:44
Server-side Routing & Required Configuration
04:06
Module Introduction
01:46
Project Setup & Overview
04:08
React Query: What & Why?
05:59
Installing & Using Tanstack Query - And Seeing Why It's Great!
16:32
Understanding & Configuring Query Behaviors - Cache & Stale Data
07:43
Dynamic Query Functions & Query Keys
13:05
The Query Configuration Object & Aborting Requests
05:27
Enabled & Disabled Queries
06:55
Changing Data with Mutations
11:29
Fetching More Data & Testing the Mutation
06:39
Acting on Mutation Success & Invalidating Queries
08:50
A Challenge! The Problem
02:14
A Challenge! The Solution
16:37
Disabling Automatic Refetching After Invalidations
02:42
Enhancing the Demo App & Repeating Mutation Concepts
09:18
React Query Advantages In Action
08:56
Updating Data with Mutations
04:49
Optimistic Updating
13:06
Using the Query Key As Query Function Input
07:47
React Query & React Router
20:26
Module Introduction
02:00
Creating a NextJS Project
04:16
Understanding File-based Routing & React Server Components
02:45
Adding Another Route via the Filesystem
03:06
Navigating Between Pages
04:12
Working with Pages & Layouts
03:22
Reserved File Names, Custom Components & How To Organize A NextJS Project
06:31
Reserved Filenames
00:46
Configuring Dynamic Routes & Using Route Parameters
06:17
Onwards to the Main Project: The Foodies App
01:24
Exercise: Your Task
02:03
Exercise: Solution
08:19
Revisiting The Concept Of Layouts
03:50
Adding a Custom Component To A Layout
05:58
Styling NextJS Project: Your Options & Using CSS Modules
06:00
Optimizing Images with the NextJS Image Component
04:57
Using More Custom Components
03:48
Populating The Starting Page Content
04:18
Preparing an Image Slideshow
03:25
React Server Components vs Client Components - When To Use What
08:15
Using Client Components Efficiently
11:07
Outputting Meals Data & Images With Unknown Dimensions
10:31
Setting Up A SQLite Database
03:11
Fetching Data By Leveraging NextJS & Fullstack Capabilities
07:17
Adding A Loading Page
04:00
Using Suspense & Streamed Responses For Granular Loading State Management
05:54
Handling Errors
05:22
Handling "Not Found" States
01:57
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
11:03
Throwing Not Found Errors For Individual Meals
02:03
Getting Started with the "Share Meal" Form
01:53
Getting Started with a Custom Image Picker Input Component
08:28
Adding an Image Preview to the Picker
05:59
Improving the Image Picker Component
00:17
Introducing & Using Server Actions for Handling Form Submissions
09:02
Storing Server Actions in Separate Files
03:45
Creating a Slug & Sanitizing User Input for XSS Protection
03:20
Storing Uploaded Images & Storing Data in the Database
12:56
Managing the Form Submission Status with useFormStatus
05:30
Adding Server-Side Input Validation
05:54
Working with Server Action Responses & useFormState
08:05
Building For Production & Understanding NextJS Caching
06:06
Triggering Cache Revalidations
03:57
Don't Store Files Locally On The Filesystem!
02:13
Bonus: Storing Uploaded Images In The Cloud (AWS S3)
06:51
Adding Static Metadata
03:47
Adding Dynamic Metadata
02:20
Module Summary
04:25
About the NextJS Pages Router
02:55
Creating a NextJS Project
02:07
Analyzing the Created Project
02:52
Adding First Pages
06:05
Adding Nested Paths & Pages (Nested Routes)
03:47
Creating Dynamic Pages (with Parameters)
03:36
Extracting Dynamic Parameter Values
04:07
Linking Between Pages
07:13
Onwards to a bigger Project!
03:32
Preparing the Project Pages
03:42
Outputting a List of Meetups
05:03
Adding the New Meetup Form
03:54
The "_app.js" File & Layout Wrapper
06:17
Using Programmatic (Imperative) Navigation
03:47
Adding Custom Components & CSS Modules
10:00
How Pre-rendering Works & Which Problem We Face
05:52
Data Fetching for Static Pages
08:56
More on Static Site Generation (SSG)
05:44
Exploring Server-side Rendering (SSR) with "getServerSideProps"
06:27
Working with Params for SSG Data Fetching
05:14
Preparing Paths with "getStaticPaths" & Working With Fallback Pages
07:16
Introducing API Routes
06:20
Working with MongoDB
09:32
Sending Http Requests To Our API Routes
06:49
Getting Data From The Database
07:09
Getting Meetup Details Data & Preparing Pages
09:41
Adding "head" Metadata
09:19
Deploying Next.js Projects
12:26
Using Fallback Pages & Re-deploying
04:13
Summary
02:15
Module Resources
00:22
Module Introduction
03:05
Project Setup & Overview
01:42
Animating with CSS Transitions
07:40
Animating with CSS Animations
05:38
Introducing Framer Motion
03:48
Framer Motion Basics & Fundamentals
08:29
Animating Between Conditional Values
04:13
Adding Entry Animations
04:28
Animating Element Disappearances / Removal
03:51
Making Elements "Pop" With Hover Animations
04:13
Reusing Animation States
03:28
Nested Animations & Variants
07:46
Animating Staggered Lists
04:28
Animating Colors & Working with Keyframes
04:03
Imperative Animations
07:28
Animating Layout Changes
03:34
Orchestrating Multi-Element Animations
10:05
Combining Animations With Layout Animations
03:55
Animating Shared Elements
04:15
Re-triggering Animations via Keys
04:52
Scroll-based Animations
15:44
Module Introduction
00:55
Project Overview
00:50
Introducing Compound Components
11:04
Managing Multi-Component State with the Context API
10:57
Grouping Compound Components
06:29
Adding Extra Components For Reusability & Configurability
08:36
Sharing Cross-Component State When Working With Compound Components
06:06
Introducing & Using Render Props
06:14
Adding Search To A React App
04:18
Implementing a Search Functionality With Help Of Render Props
04:18
Handling Keys Dynamically
02:42
Working with Debouncing
07:10
Module Introduction
01:01
React 18 & This Section
00:25
Starting Project & Why You Would Replace Redux
04:19
Alternative: Using the Context API
07:13
Toggling Favorites with the Context API
05:43
Context API Summary (and why NOT to use it instead of Redux)
02:30
Getting Started with a Custom Hook as a Store
08:11
Finishing the Store Hook
05:53
Creating a Concrete Store
04:11
Using the Custom Store
05:40
Custom Hook Store Summary
03:13
Optimizing the Custom Hook Store
04:04
Bonus: Managing Multiple State Slices with the Custom Store Hook
00:11
Wrap Up
02:00
Module Resources
00:19
Module Introduction
01:23
What & Why?
03:23
Understanding Different Kinds Of Tests
04:04
What To Test & How To Test
01:29
Understanding the Technical Setup & Involved Tools
02:39
Running a First Test
07:16
Writing Our First Test
10:14
Grouping Tests Together With Test Suites
02:14
Testing User Interaction & State
14:00
Testing Connected Components
03:19
Testing Asynchronous Code
09:11
Working With Mocks
08:30
Summary & Further Resources
03:47
Module Introduction
01:26
What & Why?
06:34
Installing & Using TypeScript
06:38
Exploring the Base Types
03:55
Working with Array & Object Types
05:33
Understanding Type Inference
02:47
Using Union Types
02:48
Understanding Type Aliases
02:42
Functions & Function Types
05:19
Diving Into Generics
08:01
A Closer Look At Generics
01:20
Creating a React + TypeScript Project
08:34
Working with Components & TypeScript
05:41
Working with Props & TypeScript
14:20
Adding a Data Model
09:09
Time to Practice: Exercise Time!
07:02
Form Submissions In TypeScript Projects
05:21
Working with refs & useRef
10:56
Working with "Function Props"
07:26
Managing State & TypeScript
05:13
Adding Styling
02:19
Time to Practice: Removing a Todo
09:27
The Context API & TypeScript
13:55
Summary
02:18
Bonus: Exploring tsconfig.json
05:46
Module Introduction
01:08
What Is React & Why Would You Use It?
05:37
React Projects - Requirements
02:09
Creating React Projects
03:27
Out Starting Project
03:28
Understanding How React Works
07:46
Building A First Custom Component
11:15
Outputting Dynamic Values
05:03
Reusing Components
06:00
Passing Data to Components with Props
06:15
CSS Styling & CSS Modules
10:07
Exercise & Another Component
06:31
Preparing the App For State Management
03:45
Adding Event Listeners
07:52
Working with State
10:00
Lifting State Up
09:08
The Special "children" Prop
07:21
State & Conditional Content
08:59
Adding a Shared Header & More State Management
07:51
Adding Form Buttons
03:34
Handling Form Submission
06:18
Updating State Based On Previous State
05:30
Outputting List Data
06:38
Adding a Backend to the React SPA
06:10
Sending a POST HTTP Request
04:12
Handling Side Effects with useEffect()
09:06
Handle Loading State
04:23
Understanding & Adding Routing
03:55
Adding Routes
05:36
Working with Layout Routes
04:08
Refactoring Route Components & More Nesting
05:35
Linking & Navigating
08:09
Data Fetching via loader()s
09:07
Submitting Data with action()s
11:07
Dynamic Routes
08:41
Module Summary
01:25
Module Resources
00:21
Course Roundup
01:10
Bonus!
00:19
Course Update Overview, Explanation & Migration Guide
15:48
Old Course Content Download
00:17
About these [BONUS / OPTIONAL] sections
00:27
Module Introduction
03:46
What Are Components? And Why Is React All About Them?
07:19
React Code Is Written In A "Declarative Way"!
03:45
Creating a new React Project
02:08
The Starting Project
00:14
Analyzing a Standard React Project
13:26
Introducing JSX
04:03
How React Works
04:31
Exercise: Working with JSX Code
1 question
Building a First Custom Component
09:18
Exercise: Building a First Component
1 question
Writing More Complex JSX Code
05:14
Adding Basic CSS Styling
04:57
Outputting Dynamic Data & Working with Expressions in JSX
08:34
Passing Data via "props"
13:04
Time to Practice: React & Component Basics
1 question
Exercise: Passing Data via "props"
1 question
Alternative Ways of Passing & Receiving / Handling "props"
05:09
Adding "normal" JavaScript Logic to Components
06:10
Splitting Components Into Multiple Components
11:20
The Concept of "Composition" ("children props")
13:33
Exercise: Component Composition
1 question
A First Summary
04:12
A Closer Look At JSX
09:28
Organizing Component Files
03:07
An Alternative Function Syntax
02:41
Learning Check: React Basics, Components, Props & JSX
10 questions
Module Resources
00:19
Module Introduction
01:33
The Starting Project & Your Tasks
04:47
Exercise Hints
01:00
Outputting Key Concepts Data
05:51
Identifying Possible Components
02:02
Creating & Using a Custom Component
04:35
Outsourcing Concept Items Into a Reusable Component
05:23
Module Resources
00:21
Module Introduction
02:30
Listening to Events & Working with Event Handlers
10:01
Exercise: Listening to Events
1 question
How Component Functions Are Executed
05:51
Working with "State"
11:17
Exercise: Working with "State"
1 question
A Closer Look at the "useState" Hook
07:51
State can be updated in many ways!
00:18
Adding Form Inputs
10:21
Listening to User Input
05:26
Working with Multiple States
06:58
Using One State Instead (And What's Better)
05:02
Updating State That Depends On The Previous State
04:43
Exercise: Using State with Form Inputs
1 question
Exercise: Updating State Based On Older State
1 question
Alternative: Creating A Shared Handler Function
06:17
Handling Form Submission
05:02
Adding Two-Way Binding
03:01
Time to Practice: Working with Events & State
1 question
Child-to-Parent Component Communication (Bottom-up)
14:18
Lifting The State Up
07:08
Derived / Computed State
06:54
Controlled vs Uncontrolled Components & Stateless vs Stateful Components
05:33
Learning Check: Working with Events & State
9 questions
Module Resources
00:19
Module Introduction
00:46
Rendering Lists of Data
07:29
Exercise: Rendering Lists of Data
1 question
Using Stateful Lists
04:45
Understanding "Keys"
07:12
Outputting Conditional Content
07:09
Exercise: Outputting Conditional Content
1 question
Adding Conditional Return Statements
05:39
Demo App: Adding a Chart
07:43
Adding Dynamic Styles
07:47
Wrap Up & Next Steps
11:27
Fixing a Small Bug
00:14
Learning Check: Outputting Lists & Conditional Content
3 questions
Module Resources
00:19
Module Introduction
02:36
The First Practice Project & Your Tasks
06:28
Exercise Hints
00:58
Splitting the App Into Components
07:24
Handling Events
09:39
Managing State
09:59
Lifting the State Up
08:52
Outputting Results Conditionally
10:05
Adding CSS Modules
06:16
Fixing a Small Bug
00:32
Introducing the Second Project
02:57
Exercise Hints
00:32
Adding a "User" Component
07:06
Adding a re-usable "Card" Component
08:37
Adding a re-usable "Button" Component
03:50
Managing the User Input State
04:57
Adding Validation & Resetting Logic
04:34
Adding a Users List Component
10:45
Managing a List Of Users via State
09:27
Adding The "ErrorModal" Component
08:04
Managing the Error State
08:57
Module Resources
00:19
Viết Bình Luận
Khoá học liên quan
![Flutter BLoC TDD & Clean Architecture | Project Based [2024]](/uploads/courses/udemy/5495156_a418.jpg)
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng