Mô tả

* * *Just launched in January 2024!* * *

In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer!But it can be hard. There are so many moving parts, so many different libraries, so many tutorials out there.

And I think that's why you came here And you came to the right place! This is The ultimate React course for 2024 and for the Future.


[>>] Benefits of this course:

  • Add React to your skill-set means getting a better job or asking for raise

  • Build Modern and Fast React Application without feeling stress

  • Understand all React concepts in a fun way

One thing I want to tell you, This is the Practical React JS Course which means You will learn all concept with multiple projects.


[>>] You will create 3 Real-world Project in React JS:

  • Task Management React application - Manage tasks with Modern design

  • Movie Listing React application - Real-world data from Movie API

  • E-commerce React application - Advanced React Project which covers Authentication, JWT, Pagination, Infinite Scrolling, Protected APIs, Deployment, Optimizing Performance with React Query and much much more

I will teach you all concepts from its very basic to advanced level in very easy to explain language and by using best techniques.


[Q] Why is this the right React course for you?

  • This course Contains the big and professional projects, where we implement many common app features (see promo video!)

  • I explain all React JS concepts in easy to explain language that every one can understand.

  • Many React beginners are confused in the Advanced JavaScript concepts like map method, filter method, Object Destructuring, Spread Operator, Promises and Modules. If you are also one of those then don't worry, I add specific section for JavaScript Refresher in which I explain all JavaScript Concepts which are needed for React

  • Learn Advanced Concepts by implementing that concepts in our final project.

  • Also you will learn React Hooks which are very important and useful for all React JS Application.

And these are just the highlight of this course. You can check full curriculum or you can check the Promo Video!

You can also call this "React Course" as "Front-end development with React and modern libraries course" because you will also learn other React Libraries like React Router, React Hook Form, Zod, Lodash, Axios, React Query and more

As you expect, this course is 100% project-based. So throughout the course, you'll start building your portfolio of 3 beautiful and high-quality React JS apps, where each one will showcase a few of the new skills you will be learning.

By the end of the course, you will have all the knowledge and confidence that you need to create better react application and become the professional React developer that companies are looking for.


My name is Meet Patel and I am working as a software engineer. And I also teach programming in easy-to-explain language from my YouTube Channel "Code Bless You"


[>>] Who this course is for

  • You just finished learning JavaScript and are looking for your next step!

  • You want to truly master React JS development, including common libraries needed to build real-world apps: React Router, React Hooks Form, and many others

  • You have been learning React, but 1) still don't understand React, or 2) still don't feel confident to build professional React apps


If you take any of my courses or tutorial, you know I don't waste your time with repeated explanations. I will guarantee you, You will master React after completing this course.

So lets don't waste time and get started with React :)

Bạn sẽ học được gì

Learning React concepts in Easy to understand language and with the practical implementation like PRO developer.

Grasp the core concepts of React, including JSX, Babel, and the Virtual DOM.

Master the art of building components, handling events, managing state, and utilizing essential React hooks.

Apply your knowledge by creating three practical projects: Task Management (Basic), Movie Listing (Intermediate), E-commerce Application(Advanced)

If you're new to advanced JavaScript concepts like map & filter method, Spread Operator, Promises, and Modules with a dedicated refresher section.

Learn navigation techniques, call APIs, handle errors, and implement loaders for seamless user experiences.

Explore the significance and application of React Hooks, including advanced techniques like useMemo and useCallback for enhanced performance.

Manage and validate forms effectively within your React applications.

Stay ahead with upcoming content on React Query, caching, and advanced state management.

Emerge from the course with the confidence to craft high-performance React applications, showcasing your skills with real-world projects.

Yêu cầu

  • An understanding of HTML, CSS, and JavaScript is recommended
  • No prior React experience is necessary. We'll guide you through the essentials before embarking on the exciting journey of hands-on project-based learning.

Nội dung khoá học

18 sections

Introduction of React

6 lectures
What is React?
03:51
Understanding Virtual DOM in React (Important)
03:31
Setup Development Environment
03:59
Creating React Application
03:26
Let's understand the React template
07:41
Writing Code from Scratch
03:45

JavaScript ES6 Refresher (Important concepts of JavaScript )

12 lectures
Introduction of this Section
01:00
Var vs Let vs Const
04:20
Arrow Function
02:58
Accessing the Objects
01:46
Object Destructuring
03:00
map method [IMPORTANT]
03:48
filter method
03:19
Spread Operator
04:45
Ternary Operator
03:10
Modules in JavaScript [IMPORTANT]
06:20
Export Default [IMPORTANT]
03:28
Section 2 JavaScript ES6 Summary
02:51

React Basics Concepts

16 lectures
Introduction of this Section
00:45
Setting up New Project
01:54
Build your own component
06:39
Exercise for Creating React Component
1 question
Solution of this exercise
01:15
How JSX and Babel works
03:13
Adding Elements in Component
03:45
JavaScript expression in JSX
04:49
Setting Elements Attributes
04:25
Events in React
03:22
What is State?
01:43
What are React hooks?
01:24
useState hook in React
06:15
Handling user inputs
04:06
Mapping List
03:31
Section 3 Summary - React Basics Concepts
03:18

Project 01 - TaskTrek Application

11 lectures
Introduction of this Section
00:40
Project Overview and Planning
02:48
Creating the Website Layout
05:39
Creating Task Form Componen
03:41
Adding styles for Form Component
07:18
Creating Tag component
01:59
Props in React
04:29
Building Task List Component
05:59
Solution of the Exercise
04:08
Building TaskCard Component
07:34
Section 04 - Summary
00:25

Project 01 - Adding Functionality in TaskTrek Application

13 lectures
Introduction of this Section
00:38
Handling Form
05:32
Shortcut trick to handle complex form
08:38
React Strict Mode
02:37
Handling Tag Selection
07:55
Display selected Tag on UI
05:44
Displaying the Task Cards
07:36
Deleting single task
06:18
Saving tasks in Local Storage
02:53
Basics of useEffect hook
05:36
Adding custom fonts
02:06
Wrapping up Project
01:06
Section 05 - Summary
01:26

Project 02 - Building MovieManiac Application

13 lectures
Introduction of this Section
00:43
Setting up New Project & Layout Style
06:00
Adding Custom Fonts
04:35
Buildling Navbar Component
06:56
Building MovieList Component
09:37
Building MovieCard Component
04:07
Styling the MovieCard Component
08:31
What is an API? | React Course
04:04
Register & Generating the API key
05:36
Calling API using Fetch Method
07:31
Exercise for calling API
00:30
Solution of this Exercise
05:33
Section 06 - Summary
01:54

Project 02 - Adding Functionality like Filtering, Sorting & Dark Mode

11 lectures
Introduction of this Section
00:24
Filter vs Sort
01:08
Implementing Filter Feature
07:21
Creating Reusable Filter Feature
03:52
Handling Sorting Selection
04:03
Debugging React Application
02:25
Implementing Sorting Feature
07:01
Adding Switch for Dark-light Mode
04:02
Toggle Switch Tutorial with HTML and CSS
00:04
Dark Mode Implementation
09:23
Making MovieList component Reusable
06:54

React Routing - Basics to Advanced

12 lectures
Introduction of this Section
00:37
Setting up Project
02:27
Adding Routing for Application
07:09
Addingg Not-Found Page
01:32
Making Single Page Application
03:49
Route Parameters
05:33
Query String
05:07
Nested Routing in React Router
05:40
Programmatically Navigation
04:02
Exercise for Routing
01:31
Adding Routing to our project
07:28
Defining Route Parameter for Single Movie
03:58

Calling an API & Error Handling

14 lectures
Introduction of this Section
00:40
useEffect hook in Details
04:56
Dependencies of useEffect
02:44
useEffect Clean up Function
04:03
Basics of HTTP Requests
02:37
Fetching Sellers data
06:46
Adding Loading indicator
05:14
Handling Errors
02:56
Handling Promise with Async await
02:47
Adding new Seller
06:44
Deleting the Seller
05:00
Exercise - for calling API
00:52
Solution - for updating the Seller
04:12
Making axios variable for HTTP request
03:17

Project 03 - Building e-Commerce application

16 lectures
Introduction of Project 03
02:18
Setting up new Project & Layout style
04:19
Building Navbar Component
07:19
Adding Navbar Links
09:23
Building Hero Section for Home
11:35
Adding Featured Products section
03:41
Creating Product Card
11:06
Building Product Page
10:02
Creating Product List Section
06:00
Creating Single Product Component
07:57
Copy Product Object from here
00:17
Adding Details Section for Product
07:21
Building CartPage component
08:11
Creating Common Table Component
06:51
Modify Cart Page Component
03:50
Building MyOrder Page
03:27

Project 03 - Advanced Form in React

11 lectures
Introduction of this Section
00:31
Building Login Form
06:54
Understanding useRef hook
05:23
Handling Form using useRef hook
04:51
Handling Form using State hook
03:05
Managing FForm with React Hook Form
05:20
Form Validation
05:14
Form Validation based on Schema
07:18
Exercise for Forms
01:25
Solution of this Exercise
07:47
Handling Image Upload
04:04

Project 03 - Connection to the Backend, Pagination & Infinite Scrolling

16 lectures
Introduction of this Section
00:49
Installing MongoDB Compass in Windows
04:12
Installing MongoDB Compass in Mac
00:13
Setting up Backend
03:18
Implementing Routing in our Application
06:02
Fetching Producs
06:42
Making Product Card Dynami
04:20
Fetching Categories
04:09
Creating Fetching Custom Hook
07:26
Adding Loading skeleton
06:35
Fetching Products by category
05:29
Pagination in React
06:15
Creatingg Pagination UI
11:09
Infinite Scrolling in React
15:01
Exercise- Single Product Page
01:07
Solution of this Exercise
07:21

Project 03 - Authentication - Signup, Login and Logout

12 lectures
Introduction of this section
00:35
Register new user API
04:51
Connecting Signup Page with API
05:56
Handling Errors for Signup
02:50
Login a user API
01:41
Connecting Login Page with API
02:57
What is JWT & How it works?
05:21
Storing the JSON Web Token
03:41
Getting user from Token
06:01
Hide/Show component depending on User
03:54
Implementing Logout functionality
02:47
Simplify the code
05:51

Project 03 - Calling Protected APIs & Protected Routes

16 lectures
Introduction of this Section
00:40
Understanding Add to cart Feature
01:46
Add to cart Functionality
07:43
Calling Protected API
06:02
Calling Add to Cart API
07:01
Fetching User Cart From Backend
08:59
useContext hook
07:11
Exercise - Creating Cart Context
04:56
Removing Items from Cart
04:37
Increase and Decrease Product Quantity
06:59
Add to Cart in Product Card
04:42
Calling API for Checkout
04:18
Exercise - getting users orders
00:24
Solution for this exercise
04:13
Creating Protected Routes
03:42
Redirect to previous Protected Page after login
04:52

Project 03 - Wrapping up and Deployment

13 lectures
Introduction of this Section
01:45
Fetching Featured Products
04:06
Fetching Products by Search Query
06:26
Auto Suggestion in Search Bar
10:03
Navigation for Auto Suggestion
07:08
Debouncing Method for Calling Suggestions API
03:00
Sorting Product List
05:18
Beginning of Deployment
01:22
Adding MongoDB cloud
04:26
How to upload projects on Github
05:22
Deploying Backend
04:29
Preparing our React application for deployment
03:58
Deploying React application
05:23

Improving Performance and Code Management using React Hooks

9 lectures
Introduction of this Section
00:34
Understanding useMemo hook
06:21
Exercise for useMemo hook
01:46
Understanding useCallback hook
06:27
How to use useCallback hook
03:59
Exercise for useCallback hook
03:43
useReducer hook
09:12
Exercise for useReducer hook
00:44
Complex Actions in useReducer hook
09:53

Mastering Advanced React Query [Caching and Mutations]

18 lectures
Introduction of this section
01:18
What is React Query and Why we need it?
02:52
Setting up React Query in our Project
02:41
Fetching Sellers Data
06:34
Error Handling & Loading
01:56
Creating custom hook with React Query
01:51
Adding React Query DevTools
03:40
Customize our React Query Properties
06:09
Exercise for Fetching Data
05:11
Understanding Query Params in React Query
08:31
Pagination in React Query
06:37
Infinite Scrolling in React Query
07:40
useMutation hook for Mutation
08:08
Delete and Update Sellers
05:49
Handling Error in Mutation
02:24
Showing Progress During Mutations
01:48
Optimistic update in React Query
07:38
Custom hook for AddSellers Mutation
02:49

Improving Website Performance with React Query

13 lectures
Introduction of this section
01:17
Do you really need React Query for your Project?
02:33
Setting up React Query
03:06
Fetching Data using useQuery
08:09
Implementing Infinite Query
13:28
Should we add caching in AutoSuggestions?
01:30
Code for Auto Suggestions with Caching
01:24
Updating getCart Query
02:49
Mutation for Add to Cart
09:04
Mutation for Remove from Cart
04:29
Mutation for Increase and Decrease
06:05
What's Next?
01:07
Bonus For YOU
00:30

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.