Mô tả

Welcome to React JS Masterclass, one single course to start your React journey as a beginner step-by-step. This course touches on each and every important topic through concept explanation, documentation, and implementation. The entire course is designed for beginners with one goal in mind, to learn concepts and build React projects.

Throughout the course, we will explore the most important React topics step-by-step:

  • JSX and components

  • State and props

  • Event handling

  • Built-in hooks (e.g. useState, useEffect, useCallback, useRef)

  • Working with forms, validations, and handling form data.

  • Client-side routing with React Router

  • Work with multiple API and handle data for projects

  • Integrating with other libraries and frameworks (e.g. Redux)

  • Testing and debugging React applications using popular libraries like Jest, RTL and React DevTools.

  • DOM manipulation and manipulating the Virtual DOM

  • Server-side rendering

  • Optimizing the performance of React application

  • Best practices for structuring and organizing React projects

  • Building and deploying production-ready React applications, including code splitting and optimization techniques.

Other Concepts:

  • Building and using advanced Custom Hooks

  • Styling with Tailwind CSS

  • Integrating Context & Reducers

  • Building mock backend with JSON Server & JSON Server Auth

  • Integrating Firebase storage as well as authentication

  • Project deployment on Netlify using Git & Github

  • Integrating external libraries: Toastify & React Skeleton


Why this course?

  • Complete course is focused on the concept learning approach, you learn every concept through a logical and visual learning approach.

  • Learn all important concepts in the simplest possible way with examples and real-life projects.

  • You need HTML, CSS and JavaScript knowledge, we will cover everything about React step-by-step from scratch.

The course is designed for developers who have some experience with JavaScript and web development and want to learn how to build dynamic, responsive user interfaces using React.

------------------
After completing this course you will be ready to work as an Intern, Fresher, or Freelancer and you will also be able to implement everything yourself! Most importantly you will have the potential to build, test and deploy your own projects. 

Enroll now, I will make sure you learn best about React.

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

Everything you need to become a React developer with basics to advanced concepts, how things works behind the scenes and real projects

Understand fundamentals: Components & Props, State, Hooks, Context & Reducers and more...

Dive Deep with Custom Hooks, Tailwind CSS, React Router, Redux, Firebase, React Skeleton & more...

Build real-world applications with React (E-Commerce, Movie Informer, Todolist Manager, Blog, Word Counter & more)

Build mock ecommerce backend with JSON Auth Server and deploy it on Railway

Work with multiple API's to make the most of third-party data (such as Movie information & Jokes)

Deploy your projects on Netlify using Git & Github

Test your application with Jest and React Testing Library

Learn with the latest versions: React 18 and JavaScript ES13

Be in the top 10% Fresh React JS Developer

And lot more!

Yêu cầu

  • Knowledge of HTML, CSS & JavaScript

Nội dung khoá học

20 sections

Introduction & Resources

4 lectures
Course Introduction
05:00
Welcome To Course
03:45
Resources [Important]
10:33
Resources [Important]
00:08

React Basics & Setup

8 lectures
React Introduction
13:02
Environment Setup
07:02
Create React App
12:09
React Behind The Scene
11:12
React Boilerplate / 005
15:56
Components: Class & Function Based / 006
10:02
JSX: In-depth Introduction / 007
12:11
Practice: Basic Template Structure / 008
15:41

States and useState

7 lectures
Why We Need States? / 009
10:02
State Introduction: useState / 010
12:00
useState: Multiple Updates / 011
04:23
useState: Array State Value / 012
11:58
useState: Array setState Value / 013
06:30
Conditional Templates / 014
07:21
Quick Hook Advice / 015
01:25

Components & Props

4 lectures
Multiple Components & Fragments / 016
09:24
Props: In-depth Introduction / 017
06:41
Props: Children / 018
11:09
Prop Drilling / 019
04:03

Styling React Application

5 lectures
Global Level Styling / 020
12:47
Component Level Styling / 021
17:04
Inline Level Styling / 022
04:42
Dynamic Level Styling / 023
04:33
Module Level Styling / 024
07:38

User Input, Events & useRef

6 lectures
Forms & Input / 025
11:10
onChange Event / 026
05:24
Controlled Inputs / 027
03:43
onSubmit Event / 028
13:41
Add New Task / 029
11:01
useRef Hook / 030
06:39

useEffects, useCallback and Custom Hooks

11 lectures
JSON Server / 031
16:36
useEffect Hook / 032
12:51
React StrictMode
05:12
List Output / 035
06:00
onClick Event / 036
07:13
useCallback Hook / 037
11:14
Custom Hook (useFetch) / 038
10:44
Loading State / 039
06:33
Handling Errors (try/catch) / 040
10:01
Aborting Fetch Request / 041
04:48
Infinite Loops / 042
03:59

Project: TaskMate

11 lectures
Project Source Code - Github
00:09
TaskMate Demo
05:49
Project Structure
04:04
Components / 045
14:48
State: tasklist & setTasklist / 046
11:26
Function: Edit & Delete / 047
20:19
Warning: Undefined Value / 048
10:19
Update Button / 049
01:07
Local Storage: Store All Tasks / 050
07:04
Theme: Change Background / 051
10:49
Project Deployment
05:55

React Router

8 lectures
React Router Introduction / 053
08:57
React Router Setup / 054
09:42
Project Structure / 055
15:21
Navigation / 056
11:26
Route Parameters / 057
12:47
No Route Found / 058
05:06
Nested Routes / 059
08:39
Project Restructuring / 060
14:46

Tailwind CSS Crash Course

10 lectures
Introduction & Demo
09:48
Common Properties
14:34
Hover, Focus, and Other States
05:11
Responsive Design
11:32
Dark Mode
07:06
Custom Configuration / 206
08:11
Project Demo / 207
12:41
Header & Hero Section/ 208
12:56
Footer / 209
02:46
Responsive Screen & Component Tools / 210
11:42

Movie API Project: Cinemate

21 lectures
Project Source Code - Github
00:09
Cinemate Demo
04:36
Project Setup
17:43
Tailwind Introduction / 063
20:15
TMDB API: Documentation / 064
10:34
UI Design (Tailwind & Flowbite) / 065
14:20
Navigation Structure
10:19
Dark Mode Integration / 067
14:36
Movie List Structure / 068
10:36
API Fetch: Movie List / 069
14:43
Custom Hook: useFetch / 070
11:52
API Fetch: Movie Search / 071
15:18
Tailwind CSS Customization / 072
16:18
Page Not Found / 073
15:05
Individual Movie Information / 074
28:28
Scroll Restoration: Scroll To Top / 075
04:50
Dynamic Page Title / 076
13:29
Style Update / 077
02:40
Project Deployment / 078
22:25
Development Branch On Git & Github
10:05
Solved: Netlify Error / 079
07:16

Assignment: Shopping Cart

5 lectures
Assignment Statement & Demo / 080
02:41
Solution: Project Setup
06:20
Solution: Components / 082
16:31
Solution: Pages / 083
09:42
Assignment Deployment
04:04

Context & Reducers Project: Shopping Cart

6 lectures
Global State Management
06:50
Project Structure / 086
06:10
Context / 087
16:27
Reducer / 088
25:43
Methods / 089
18:45
Project Deployment / 090
12:18

Redux Project: Shopping Cart

6 lectures
Redux Introduction
15:10
Project Structure / 091
09:42
Slice & Action / 092
16:52
Reducers: Add & Remove / 093
15:45
Redux Store State / 094
11:23
Project Deployment / 095
09:34

E-Commerce Project: Codebook

51 lectures
Project Source Code - Github
00:09
Codebook Demo / 097
10:46
Installations / 098
06:54
Project Structure / 099
19:45
Header Component - I / 100
16:48
Header Component - II / 101
10:16
Home Page / 102
22:25
Products Page / 103
08:21
API: Product List / 104
19:11
Rating Component / 105
09:26
Individual Product Component / 106
16:24
Dark Mode / 107
10:10
ScrollToTop Component / 108
03:47
Product Search / 109
17:21
Dynamic Title / 110
07:22
Filter: Context & Reducers / 111
19:25
Filter: Initial Product List / 112
11:41
Filter: Properties / 113
38:40
Clear Filter / 114
05:46
Dropdown Option / 115
07:44
User Account & Cart
13:36
Login & Registration Page / 118
14:10
React-Toastify / 119
09:38
API: Login/Register End Point / 120
10:42
Session Storage / 121
10:22
Toggle Dropdown (Hide) / 122
03:45
Cart Interface / 123
13:59
Cart: Context & Reducers / 124
09:48
Cart: Provider / 125
13:24
Add To Cart / 126
12:08
Condition Check: Already In Cart / 127
15:13
Out Of Stock Products / 128
06:45
Protected Routes / 129
07:34
Checkout Modal / 130
15:31
Undefined Value Warning / 131
02:28
Order Submit Function / 132
16:52
Order Page / 133
14:03
Dashboard: Condition 1 / 134
09:44
Dashboard: Condition 2 / 135
11:54
Auth Service: API End Points / 136
10:31
Data Service: API End Points / 137
15:35
Product Service: API End Points / 138
09:50
Page Not Found / 139
02:24
Dynamic Page Title / 140
06:37
Error Handling / 141
25:44
ENV / 142
08:00
Frontend Deployment / 143
19:23
Backend Deployment / 144
14:55
Update Environment Variables / 145
05:25
Login As Guest
15:24
Solved: Netlify Errors / 147
03:16

Assignment: Word Counter

2 lectures
Statement & Demo / 157
04:34
Solution: WordCount / 158
04:59

React Testing Library & Jest

9 lectures
Testing Introduction / 148
06:12
React Testing Library & Jest / 149
06:55
Project Setup
07:52
Testing Structure / 151
14:20
Test: Component Rendering / 152
11:07
Test: Fire Events & User Events / 153
10:22
Queries, Type, Expect & More / 154
09:15
Test: API Async Loading / 155
06:38
Test: Page Component Wrapper / 156
09:44

Firebase Crash Course

14 lectures
Firebase Introduction
06:59
Webpack Setup / 252
13:08
Firebase Setup / 253
08:31
Firebase Connection / 254
04:58
Fetching Documents - I / 255
09:52
Fetching Documents- II / 256
04:26
Adding & Deleting Documents / 257
14:09
Snapshots / 258
06:02
Firestore Queries / 259
06:24
Ordering Data / 260
10:37
Updating Documents / 261
07:24
Fetching Individual Document / 262
03:50
Authentication - I / 263
05:27
Authentication - II / 264
22:10

Blog Project: WriteNode

14 lectures
Project Source Code - Github
00:09
WriteNode Demo / 159
03:05
Project Structure / 160
11:50
Project Styling / 161
08:34
Homepage / 162
11:07
Firebase Setup / 163
09:18
Firebase Configuration / 164
13:40
Conditional Auth Header / 165
08:06
Create Blog Post / 167
16:05
Error: Object Fetch / 168
10:06
Toggle Update / 169
05:41
Dynamic Page Title
08:35
React Loading Skeleton
12:21
Project Deployment / 172
06:52

Bonus

1 lectures
Bonus
02:13

Đá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.