What you get
- 3 Best Selling Course
- 52 Hours of on Demand Video content
- 40 Real World Projects
- 480 Comprehensive Lectures
- Downloadable content and Complete Source Code
React for Beginners - From HTML CSS & JavaScript to React.js
30+ React Projects, Learn React JS by Building 30+ Web Apps
Modern JavaScript from Beginner to Advanced
Curriculum
Introduction
Available in
days
days
after you enroll
React Basics
Available in
days
days
after you enroll
- 02-01-Section overview (1:22)
- 02-02-Traditional HTML CSS & JS Website.fcpxml (7:24)
- 02-03-Adding React to your website (6:18)
- 02-04-Render a react component (3:51)
- 02-05-What is JSX and how to use it (3:52)
- 02-06-JSX Dynamic Values and Variables (3:58)
- 02-07-Functions and Events in JSX (6:37)
- 02-08-Using Images (2:48)
- 03-01-Section overview (1:04)
- 03-02-How to create a React Application (6:34)
- 03-03-React Structure explained (14:51)
- 03-04-Wow to start run and stop a react app (9:37)
- 04-01-Section overview (2:47)
- 04-02-Using the style attribute in react (3:59)
- 04-03-Using CSS in react (3:35)
- 05-01-Section overview (1:12)
- 05-01-Section overview (1:12)
- 05-02-What are Components and how to create a react components (8:38)
- 05-02-What are Components and how to create a react components (8:38)
- 05-03-What are Props (6:57)
- 05-03-What are Props (6:57)
- 05-04-Children Prop (7:08)
- 05-04-Children Prop (7:08)
- 05-05-Create a reusable Card component (13:21)
- 05-05-Create a reusable Card component (13:21)
- 05-06-Using Icons in React (9:55)
- 05-06-Using Icons in React (9:55)
- 05-07-Using Bootstrap in React (2:57)
- 05-07-Using Bootstrap in React (2:57)
- 05-08-Create a Button Component (6:38)
- 05-08-Create a Button Component (6:38)
- 05-09-Function props aka event handlers (9:10)
- 05-09-Function props aka event handlers (9:10)
- 05e-learning-01-Section overview (3:12)
- 05e-learning-02-Create a new React App (8:30)
- 05e-learning-03-Create a Title Component (6:34)
- 05e-learning-04-Header Component with child props (6:36)
- 05e-learning-05-Button component with click event handlers (11:09)
- 06-01-Section overview (1:08)
- 06-02-What is State and how to useState in React (3:39)
- 06-03-Example with useState Hook (15:38)
- 06-04-Create a Modal Comp and apply useState (12:37)
- 06-05-Extend components and state (24:58)
- 06-06-Using Lists in React (6:35)
- 06-07-useState on Lists (14:39)
- 07-01-Section overview (1:20)
- 07-02-Create a Testimonial component (9:18)
- 07-03-Working with JSON data (9:25)
- 07-04-What is useEffect and how to use it (8:11)
- 07-05-Dependency Array of useEffect (6:36)
- 07-06-Update testimonials with useEffect (5:42)
- 07-07-Add Star rating with useState and map (4:10)
- 08-01-Section overview (1:03)
- 08-02-What is useRef and how to use it (7:02)
- 08-03-Page navigation with useRef (3:00)
- 08-04-Scroll Back To Top Button (6:43)
- 09-01-Section overview (2:48)
- 09-02-Forms label and inputs (14:43)
- 09-03-Form group component (5:20)
- 09-04-Input values and changing values (4:56)
- 09-05-Referencing input with useRef (10:59)
- 09-06-Form submission and reset (4:13)
- 09-07-Simple Login and Form validation (9:42)
- 09-08-Create a Registration Form Component (17:44)
- 09-09-Simple Form registration (8:22)
- 10-01-Error handling in React (3:13)
- 10-02-Throw error using try catch (7:51)
- 10-03-Waiting for server response (8:14)
- 10-04-Error by data fetching (10:43)
- 10-05-Custom Error Boundaries Component (7:16)
- 11-01-Section overview (1:56)
- 11-02-Why should you refactor your code (2:26)
- 11-03-Refactoring the Header Component (8:18)
- 11-04-Refactored the Categories Section (4:07)
- 11-05-Refactored the Offers Section (6:48)
Navigating with React Router
Available in
days
days
after you enroll
- 12-01-Section overview (1:49)
- 12-02-What is React Router (5:20)
- 12-03-How to install and adding a Router (5:36)
- 12-04-Create the Root Route (8:08)
- 12-05-Handling Not Found Errors (5:05)
- 12-06-Creating Routes (4:04)
- 12-07-Nested Routes, children and Outlet (5:24)
- 12-08-Client side Routing (5:03)
- 12-09-Active Link Styling (8:39)
- 12-10-The index Route (5:14)
- 12-11-2-Assignment-Add Login to the Navigation-Solution_without_silence (2:15)
- 12-11-Assignment-Add Login to the Navigation-Instruction_without_silence (0:22)
App Data Sharing with React useContext
Available in
days
days
after you enroll
- 13-01-Section overview (2:14)
- 13-02-The Problem with Prop drilling (1:39)
- 13-03-What is useContext and why use it (4:19)
- 13-04-React useContext Hook example (18:01)
- 13-05-Create a Dark Theme (9:58)
- 13-06-Toggle Dark Theme (5:11)
- 13-07-Change Arrow Icon on Dark Theme (2:50)
- 13-08-Toggle Categories on Dark Theme (1:35)
- 13-09-Toggle Offers on Dark Theme (4:54)
React Styled Components
Available in
days
days
after you enroll
Project - Employee Payroll App
Available in
days
days
after you enroll
- P02-03-Creating project components (15:09)
- P02-02-Project setup (4:04)
- P02-04-App Routing system (3:42)
- P02-05-App Root, Index and Error page (10:52)
- P02-06-App Navigation with routs (5:21)
- P02-07-Page wrapper styled component (17:59)
- P02-08-App Contact form (6:59)
- P02-09-Contact form validation (10:16)
- P02-10-Contact form Successful submission (8:58)
- P02-11-Homepage component (4:21)
- P02-12-Create a Login form component (8:26)
- P02-13-Login with useContext (8:46)
- P02-14-Display Personal and Logouton Authentication (5:06)
- P02-15-Login validation with styled component and context (10:36)
- P02-16-Create a Personal List component (6:23)
- P02-17-Personal Data and Storage (6:07)
- P02-19-Display Personal Detail (11:58)
- Source code
- P02-18-Add Search functionality (8:39)
Tailwind CSS for React
Available in
days
days
after you enroll
Project - Complex Checklist App using Tailwind CSS
Available in
days
days
after you enroll
- 17-01-Project overview (7:44)
- 17-02-Project Setup (6:32)
- 17-03-Title component and general app container (3:58)
- 17-04-Checklist component (4:52)
- 17-05-Checklist item component (18:27)
- 17-06-Get data using async and useEffect (4:27)
- 17-07-Loading and Generate unique ID (7:49)
- 17-08-Create Time Capsule componente for create and completed data (8:53)
- 17-09-Check and uncheck each item (10:18)
- 17-10-Check and uncheck all items (11:06)
- 17-11-Delete item form list (6:42)
- 17-12-Edit item text in list (10:12)
- 17-13-Create a Alert component for list actions (10:39)
- 17-14-Add new item to the list (11:32)
- 17-15-Save checklist to data to database (3:51)
- 17-16-Load new data form database (5:22)
- 17-17-Toggle Dark Mode (6:38)
Project - Stock Wishlist App
Available in
days
days
after you enroll
- 01-Project overview (7:25)
- 02-How to install and setup Vite (4:43)
- 03-How to install Tailwind CSS for Vite React (4:30)
- 04-Create App Main Components (7:13)
- 05-Create Button and Input components (7:56)
- 06-Create Todays Date component (3:27)
- 07-Default Stock info component (5:20)
- 08-Default Stock Chart Component (6:13)
- 09-Stock List Header Component (6:41)
- 10-Stock List Table Head Component (5:17)
- 11-Stock list Table Body component (11:58)
- 12-Add stock to list (13:04)
- 13-Edit Stock in list (4:41)
- 14-Remove Stock from list (2:34)
- 15-Open selected stock details and chart widget (5:47)
- 16-Load and Save Stocks list to local storage (3:57)
- 17-Save and Load from local Database (7:04)
- 18-Sort stocks by name and Sector (6:13)
- 19-Filter by stocks by sector (4:36)
- 20-Search Stocks by Symbol or Name (3:10)
Getting Started with React.js
Available in
days
days
after you enroll
Understanding React Components
Available in
days
days
after you enroll
Working with Redux
Available in
days
days
after you enroll
React Projects
Available in
days
days
after you enroll
- About 30 react projects (2:17)
- P01-00-e-signature-app (1:05)
- P01-01-e-signature-app-Create component and general styling (9:44)
- P01-02-e-signature-app-useState for name and date (6:08)
- P02-00-randomize-colors (0:49)
- P02-01-randomize-colors-use events and functions (12:20)
- P03-00-like-my-photo (0:40)
- P03-01-like-my-photo-Card design (5:23)
- P03-02-like-my-photo-Add React icons to the poject (7:16)
- P03-03-like-my-photo-useState to like on click and doubleClick (5:41)
- P04-00-tesimonials-app (0:55)
- P04-01-tesimonials-app-Button components (7:35)
- P04-02-tesimonials-app-useState and useEffect (11:20)
- P05-00-alerts (1:01)
- P05-01-alerts-create a alert component (7:15)
- P05-02-alerts-autoclose alert with delay (2:55)
- P06-00-temperature-controller (0:58)
- P06-01-temperature-controller-controller-desing (4:41)
- P06-02-temperature-controller-change-temperature using use state (3:28)
- P07-00-light-and-dark-mode (0:58)
- P07-01-light-and-dark-mode-create a blog component (6:11)
- P07-02-light-and-dark-mode-darkmode using useContext (14:08)
- P08-00-slide-to-unlock (0:30)
- P08-01-slide-to-unlock-Create the UI (9:00)
- P08-02-slide-to-unlock-Create Lock screen (4:57)
- P08-03-slide-to-unlock-creating the Lock screen state (4:06)
- P08-04-slide-to-unlock-Lock the screen (3:07)
- P09-00-sliderApp (0:41)
- P09-01-sliderApp-Create a slider Component (5:39)
- P10-00-hidden-search-bar (0:47)
- P11-00-magic-popup (0:50)
- P11-01-MagicPopup-Create a Popup component (9:12)
- P11-02-MagicPopup-Trigger a popup and close it (6:18)
- P11-03-MagicPopup-Time Triggered popup (6:44)
- P12-00-progras-bars (0:51)
- P12-01-progras-bars-Ui design and input oufocus with useRef and useEffect (5:49)
- P12-02-progras-bars-Create Progressbar component (7:23)
- P12-03-progras-bars-Add multiple Progressbars using map (4:17)
- P12-04-progras-bars-Manipulate the Progresbar data with useState (4:06)
- P12-05-progras-bars-Random Progresbar data with useEffect (2:21)
- P13-00-dialog-box (0:51)
- P13-01-dialog-box-DialogBox component UI design (6:26)
- P13-02-dialog-box-Hello DialogBox component (8:06)
- P13-03-dialog-box-Unsubscribe DialogBox component (6:52)
- P13-04-dialog-box-Baunce animation effect (5:22)
- Setting up th React development environment (7:24)
- httpswww.youtube.comwatchv=uEZpg0n7jcY (3:12)
- P14-01-filter-contacts-app-UI desing and Autofocus unsing useRef and useEffect (4:30)
- P14-03-filter-contacts-app-Contact component (7:49)
- P14-04-filter-contacts-app-Filer contacts (3:26)
- P15-00-simple-registration-form-validation (1:22)
- P15-01-simple-registration-form-validation-Form Ui (5:44)
- P15-02-simple-registration-form-validation-Handle inputs and Registrations (7:17)
- P15-03-simple-registration-form-validation-Input fields individual validation (3:21)
- P15-04-simple-registration-form-validation-Form Submission and Validation (5:16)
- P16-00-notes-app (1:42)
- P16-01-notes-app-Project UI design (3:51)
- P16-02-notes-app-Intall and use React Styled Components (9:13)
- P16-03-notes-app-Add New Note (6:22)
- P16-04-notes-app-Delete Note (2:11)
- P16-05-notes-app-Create Randon Note types (3:49)
- P17-00-reponsive-nav (0:54)
- P17-01-reponsive-nav-Create a nav component (3:33)
- P17-02-reponsive-nav-Create a Nav Item component (2:41)
- P17-03-reponsive-nav-Style the Nav using React Styled Components (6:21)
- P17-04-reponsive-nav-Show and Hide the navbar using React useState and useEffect (5:54)
- P17-05-reponsive-nav-Open and Close the Navbar using React useState and useEffect (3:58)
- P17-06-reponsive-nav-Show Active nav item and change page title using React useState and useEffect (4:39)
- P17-07-reponsive-nav-UPDATE - Adding pages to navigate to (11:22)
- P18-00-text-animation (1:56)
- P18-01-text-animation-Form UI style (3:58)
- P18-02-text-animation-Create a React FormGroup Component (4:54)
- P18-03-text-animation-Working with the form group component (1:41)
- P18-04-text-animation-Install and use AnimatedText component (8:06)
- P19-00-compound-interest-rate-calc (1:39)
- P19-01-compound-interest-rate-calc-UI Desing using FormGroup Components (6:29)
- P19-02-compound-interest-rate-calc-useState hook for values (3:33)
- P19-03-compound-interest-rate-calc-Create a component that calc the compoundet inretes (5:56)
- P19-04-compound-interest-rate-calc-Calc the compunded interest (3:47)
- P20-00-space-penguin (0:59)
- P20-01-space-penguin-Design the Space ENV (6:30)
- P20-02-space-penguin-Space ship component (3:47)
- P20-03-space-penguin-Earth and Moon Components (4:04)
- P20-04-space-penguin-Launch and Land the Ship (4:50)
- P20-05-space-penguin-Change the Space Ship in to a Penguin (4:16)
- P21-00-task-tracker (1:21)
- P21-01-task-tracker-Planing the components layout for the UI (2:49)
- P21-02-task-tracker-Taks tracker style using Styled components (9:16)
- P21-03-task-tracker-Input Task Component (7:30)
- P21-04-task-tracker-Create and Add a New Task (8:11)
- P21-05-task-tracker-Complete and Delete Task (7:13)
- Untitled (1:57)
- UntitleP14-00-filter-contacts-appd (1:35)
- 26-00-mortgage-calculator (2:05)
- 27-00-course-store (1:23)
- P22-00-card-game-ui (0:48)
- P22-01-card-game-ui-Design the Start Menu (7:34)
- P22-02-card-game-ui-Create Units Card Component (16:02)
- P23-00-animated-login-form (0:49)
- P23-01-animated-login-form-UI plaing and Desing using Components (6:46)
- P23-02-animated-login-form-Login Container design using Styled Components (7:41)
- P23-03-animated-login-form-Amimate using Styled Components (14:17)
- P24-00-phone-book (1:18)
- P24-01-phone-book-Phone Book main UI (4:12)
- P24-02-phone-book-Create a Contact React Components (8:04)
- P24-03-phone-book-Create a Contact List React Components (4:55)
- P24-04-phone-book-Display all contacts from the Contacts Deta base (5:13)
- P24-05-phone-book-Create the Toggle Search and Filter Contacts Components (5:09)
- P24-06-phone-book-Sort Contact A-Z and Z-A (3:42)
- P24-07-phone-book-Search contact (4:08)
- P25-00-expenses-calculator (3:42)
- P25-01-expenses-calculator-Components Planing (7:42)
- P25-02-expenses-calculator-Create a Expenses Form Component (6:47)
- P25-03-expenses-calculator-Create a Expenses List Component (4:28)
- P25-04-expenses-calculator-Create a List Item Component (10:11)
- P25-05-expenses-calculator-Style the budget using Styled components (5:18)
- P25-06-expenses-calculator-Add state to all components (3:25)
- P25-07-expenses-calculator-Add budget using useState , useEffect and useRef (3:36)
- P25-08-expenses-calculator-Save and Load data from Local Storage (2:02)
- P25-09-expenses-calculator-Handle all input and submission (3:40)
- P25-10-expenses-calculator-Add uniqe Id (5:58)
- P25-11-expenses-calculator-Display all expenses (7:20)
- P25-12-expenses-calculator-Clear local storage and add new expenses (1:53)
- P25-13-expenses-calculator-Handle Clear all expenses from storage and UI (2:27)
- P25-14-expenses-calculator-Handle Delete one expense from storage and UI (3:00)
- P25-15-expenses-calculator-Handle Edit one expense from storage and UI (7:43)
- P25-16-expenses-calculator-Calculate the total expenses and economies (2:58)
- P25-17-expenses-calculator-Add Alerts (7:55)
- P26-01-mortgage-calculator-Main comoponent and Ui design (8:26)
- P26-02-mortgage-calculator-Add State to all comoponents (4:16)
- P26-03-mortgage-calculator-Calculate the Loan Amountpayments (3:09)
- P26-04-mortgage-calculator-Calculate monthly payments (4:50)
- P26-05-mortgage-calculator-Display monthly payments and Alerts (3:31)
- P27-01-course-store-Project structure and UI design (4:50)
- P27-02-course-store-Create the Courses component (3:02)
- P27-03-course-store-Create a Course component and design (4:25)
- P27-04-course-store-Create a Deta Base for all Courses (6:24)
- P27-05-course-store-Currencies Deta Base and converter Buttons (5:10)
- P27-06-course-store-Covert the Currencies with the React useContext Hook (4:15)
- P27-07-course-store-Cahnge Course apeareance depending on its currency (3:02)
- P28-00-auth-app (0:52)
- P28-01-auth-app-Ui design (5:17)
- P28-02-auth-app-Form Wrapper and Shake animation (4:27)
- P28-03-auth-app-Authentication container (3:03)
- P28-04-auth-app-Authentication status using context (5:59)
- P28-05-auth-app-Authentication User name and password (5:21)
- P28-06-auth-app-Authentication Login Logout and Try agin (5:40)
- P29-00-speech-synthesizer (0:44)
- P29-01-speech-synthesizer-UI Structure and main component (3:58)
- P29-02-speech-synthesizer-Speech Narrator UI Component (6:52)
- P29-03-speech-synthesizer-Text splitter and Highlighted Text (7:03)
- P29-04-speech-synthesizer-Start Pause and Rate (8:05)
- P30-00-lazy-loading (1:46)
- P30-01-lazy-loading-ui (6:13)
- P30-02-lazy-loading-get post (6:09)
- P30-03-lazy-loading-Implimante Lazy load (2:54)
Check your inbox to confirm your subscription