Course Overview
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.
FAQ
FAQ area empty
Course curriculum
-
React Introduction
782 Xem trước -
Environment Setup
422 Xem trước -
Create React App / Set React App
1101 Xem trước -
React Behind The Scene
672 Xem trước -
React Boilerplate / 005
956 -
Components: Class & Function Based / 006
602 -
JSX: In-depth Introduction / 007
731 -
Practice: Basic Template Structure / 008
941
-
Project Source Code - Github
-
TaskMate Demo
349 -
Project Structure
253 -
Components / 045
888 -
State: tasklist & setTasklist / 046
686 -
Function: Edit & Delete / 047
1219 -
Warning: Undefined Value / 048
619 -
Update Button / 049
67 -
Local Storage: Store All Tasks / 050
424 -
Theme: Change Background / 051
649 -
Project Deployment
355
-
Project Source Code - Github
-
Cinemate Demo
276 -
Project Setup
1063 -
Tailwind Introduction / 063
1215 -
TMDB API: Documentation / 064
634 -
UI Design (Tailwind & Flowbite) / 065
860 -
Navigation Structure
619 -
Dark Mode Integration / 067
876 -
Movie List Structure / 068
636 -
API Fetch: Movie List / 069
883 -
Custom Hook: useFetch / 070
712 -
API Fetch: Movie Search / 071
918 -
Tailwind CSS Customization / 072
978 -
Page Not Found / 073
905 -
Individual Movie Information / 074
1708 -
Scroll Restoration: Scroll To Top / 075
290 -
Dynamic Page Title / 076
809 -
Style Update / 077
160 -
Project Deployment / 078
1345 -
Development Branch On Git & Github
605 -
Solved: Netlify Error / 079
436
-
Project Source Code - Github
-
Codebook Demo / 097
646 -
Installations / 098
414 -
Project Structure / 099
1185 -
Header Component - I / 100
1008 -
Header Component - II / 101
616 -
Home Page / 102
1345 -
Products Page / 103
501 -
API: Product List / 104
1151 -
Rating Component / 105
566 -
Individual Product Component / 106
984 -
Dark Mode / 107
610 -
ScrollToTop Component / 108
227 -
Product Search / 109
1041 -
Dynamic Title / 110
442 -
Filter: Context & Reducers / 111
1165 -
Filter: Initial Product List / 112
701 -
Filter: Properties / 113
2320 -
Clear Filter / 114
346 -
Dropdown Option / 115
464 -
User Account & Cart
816 -
Login & Registration Page / 118
850 -
React-Toastify / 119
578 -
API: Login/Register End Point / 120
642 -
Session Storage / 121
622 -
Toggle Dropdown (Hide) / 122
225 -
Cart Interface / 123
839 -
Cart: Context & Reducers / 124
588 -
Cart: Provider / 125
804 -
Add To Cart / 126
728 -
Condition Check: Already In Cart / 127
913 -
Out Of Stock Products / 128
405 -
Protected Routes / 129
454 -
Checkout Modal / 130
931 -
Undefined Value Warning / 131
148 -
Order Submit Function / 132
1012 -
Order Page / 133
843 -
Dashboard: Condition 1 / 134
584 -
Dashboard: Condition 2 / 135
714 -
Auth Service: API End Points / 136
631 -
Data Service: API End Points / 137
935 -
Product Service: API End Points / 138
590 -
Page Not Found / 139
144 -
Dynamic Page Title / 140
397 -
Error Handling / 141
1544 -
ENV / 142
480 -
Frontend Deployment / 143
1163 -
Backend Deployment / 144
895 -
Update Environment Variables / 145
325 -
Login As Guest
924 -
Solved: Netlify Errors / 147
196
-
Testing Introduction / 148
372 -
React Testing Library & Jest / 149
415 -
Project Setup
472 -
Testing Structure / 151
860 -
Test: Component Rendering / 152
667 -
Test: Fire Events & User Events / 153
622 -
Queries, Type, Expect & More / 154
555 -
Test: API Async Loading / 155
398 -
Test: Page Component Wrapper / 156
584
-
Firebase Introduction
419 -
Webpack Setup / 252
788 -
Firebase Setup / 253
511 -
Firebase Connection / 254
298 -
Fetching Documents - I / 255
592 -
Fetching Documents- II / 256
266 -
Adding & Deleting Documents / 257
849 -
Snapshots / 258
362 -
Firestore Queries / 259
384 -
Ordering Data / 260
637 -
Updating Documents / 261
444 -
Fetching Individual Document / 262
230 -
Authentication - I / 263
327 -
Authentication - II / 264
1330
-
Project Source Code - Github
-
WriteNode Demo / 159
185 -
Project Structure / 160
710 -
Project Styling / 161
514 -
Homepage / 162
667 -
Firebase Setup / 163
558 -
Firebase Configuration / 164
820 -
Conditional Auth Header / 165
486 -
Create Blog Post / 167
965 -
Error: Object Fetch / 168
606 -
Toggle Update / 169
341 -
Dynamic Page Title
515 -
React Loading Skeleton
741 -
Project Deployment / 172
412
Requirment
-
Knowledge of HTML, CSS & JavaScript
Outcomes
-
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!
0 Student
2 Courses
0 review