Email: it@huph.edu.vn

Udemy - Next.js and React The Complete Modern Web Development Guide 2025-2

0 students Last updated May 2025

About the course

Course content

Sections: 22

•

Activities: 1

•

Resources: 201

Announcements
1 -What We Will Learn

1 -Why a Library or Framework Is Needed
2 -What is React
3 -Why Should we use React

1 -React vs Vanilla JavaScript
2 -Setting up our Development environment
3 -Look at React Official Documentation
4 -Pure React
5 -Setting up a project with create-react-app

1 -Rendering the root component
2 -Debugging
3 -Creating and reusing a component
4 -What is JSX
5 -Creating more component
6 -JavaScript logic in component
7 -Separation of concerns
8 -Styling React applications
9 -Props
10 -Props one-way data flow
11 -Rendering list
12 -Conditional Rendering 1
13 -Conditional Rendering 2
14 -Extraction JSX into a new component
15 -Destructuring props
16 -React fragments
17 -Dynamic Classes

1 -Section Overview
2 -Lets build a new project
3 -Handling Events
4 -What is state
5 -Creating a state with useState
6 -Set state manually
7 -Adding open-close button
8 -React Developer Tools
9 -Updating state based on current state

1 -Introduction of the Application
2 -Creating the layout
3 -Rendering a list component
4 -Rendering a form component
5 -Controlled Elements
6 -Lets think about state
7 -Lifting state up
8 -Deleting an item
9 -Updating an item
10 -Calculating package quantities
11 -Shorting items

1 -Application Introduction
2 -Project Setup
3 -Components Structure
4 -Lets start using data
5 -Lets start Creating the card structure

1 -Class-Based Component
2 -Counter example with Class-Based component
3 -Working with event handlers
4 -Class-Based component vs Functional component

1 -useEffect Hook
2 -Counter example with useEffect hook
3 -Dependency Array
4 -Clean-Up function
5 -useState useEffect Data fetching
6 -Project Structure
7 -Component structure styling
8 -Using an async function axios

1 -Section Overview
2 -Refs
3 -Why we use useRef Hook
4 -Refs to select DOM elements
5 -What is this Custom Hook
6 -Custom Hook counter example

1 -Section Overview
2 -What is React-Router
3 -Creating a regular application
4 -Adding a React-Router to the project
5 -Link NavLink
6 -Server side rendering Client side rendering
7 -Creation of components Application layout
8 -Component Pages Layout and Styling
9 -Components Pages Layout and Styling 2
10 -Personnel Page
11 -Dynamic routing
12 -useParams useLocation
13 -PersonnelDetail Page
14 -useNavigate vs Link
15 -notFound page Navigate
16 -Error handling
17 -Loading
18 -Nested Routes
19 -Absolute Path Relative Path
20 -Private Router

1 -Project Introduction API source
2 -File structure
3 -Creation of Routes
4 -Lets start creating the pages
5 -Navbar
6 -Home Page
7 -Header
8 -Card
9 -Detail Page
10 -Login Logout

1 -Section Overview
2 -Setting up a file structure
3 -React Router v64
4 -Building the App Layout Nested Routes
5 -Fetching data with loaders
6 -useNavigation
7 -Error Handling
8 -Dynamic Path

1 -What is Nextjs
2 -Create the First Nextjs Application

1 -Server Component Logic and File Structure
2 -Creating Routes and Using the Link Component
3 -Creating and Using Components With Next
4 -Create Dynamic Routes
5 -Project Introduction
6 -Project Creation Creating Routes
7 -Creation of the Application Layout and Header Component
8 -Lets Start Using Module CSS in Our Project
9 -Creating the Home Page and Slides Component
10 -Components Types In Next
11 -Active Link Building
12 -Fetching Data
13 -Client and Server Components Optimization
14 -Adding a Loading Page
15 -Error Page
16 -Not Found Page
17 -Page Creation With Dynamic Route
18 -Share Page
19 -Create Custom Image Picker
20 -Using Server Action
21 -Application Optimization with useFormStatus Hook
22 -Input Validation useFormState Hook
23 -Alternative Error Handling
24 -Metadata
25 -Section Summary

1 -Section Overview
2 -Project Presentation
3 -Project Setup
4 -Create Pages with Fake Data
5 -Handling Not Found Page
6 -Working With Parallel Routes
7 -Rendering Nested Routes Parallel Routes
8 -Simplify Pages With MovieCard Component
9 -Catch All Routes
10 -Multiple Path With Catch All Route
11 -Error Page Editing Main-Header Component
12 -Programmatic Routing
13 -Route Groups
14 -Managing API Requests With Route File
15 -Using Middleware in Next

1 -Section Overview
2 -Client Side Data Fetching
3 -Data Fetching Optimization in Client Components
4 -Server-Side Data Fetching in Next
5 -Data Fetching Optimization and Loading Component
6 -Migration of My Favorite Route to TMDB API
7 -Migration of My Favorite Route to TMDB API
8 -Lets Move Dynamic Pages of the Application to TMDB API
9 -Use of the Suspense Component

1 -What is Firebase
2 -Integrate Firebase Into the Application
3 -Sign Up Page
4 -Sign In Page
5 -Logout

1 -Pages Router
2 -Lets Start an Application With Pages Router
3 -Working With Nested Routes Dynamic Routes
4 -Using Nested Dynamic Routes
5 -Catch All Routes Link Component
6 -Programmatic Navigation
7 -Adding a Custom Not Found Page

1 -Section Overview
2 -Static Rendering Server Side Rendering
3 -getStaticProps
4 -Lets Compile Component Server with Filesystem
5 -Incremental Static Generation ISR
6 -notFound Redirect
7 -Working With Dynamic Pages
8 -Using getStaticPaths
9 -Fallback notFound
10 -getServerSideProps
11 -Dynamic Pages with getServerSideProps
12 -Why We Need Client Side Data Fetching
13 -Client Side Data Fetching Using Firebase

1 -Project Overview
2 -Start the Project Create the Pages and Fake Data
3 -Create Tour Components
4 -Using Tour Data in Components and Style Operation
5 -Creating the Button Component Start Creating Detail Page
6 -Create Detail Page Components
7 -Create a General Layout Wrapper
8 -All Tour Page Creating a Form for Tour Filtering
9 -Programmatic Page Navigation by Filtering Tours
10 -Lets Make Data Controls on the Page with Filtered Tours
11 -Show Filtered Tours in Catch-All Page
12 -Create a Real Time Database Using Firebase
13 -Lets Create Home Page According to Static Side Generation
14 -Lets Recreate Tour Detail Page Component with Firebase Data
15 -Optimizing Data Fetching
16 -All Tour Page Catch All Routes Page
17 -Section Summary

1 - Next.js and React The Complete Modern Web Development Guide

Instructors

Enrolment options

Udemy - Next.js and React The Complete Modern Web Development Guide 2025-2

Udemy - Next.js and React The Complete Modern Web Development Guide 2025-2

Course modified date: 18 May 2025

Enrolled students: There are no students enrolled in this course.

Guests cannot access this course. Please log in.