Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Ultimate React Bundle
Introduction
01-01-Welcome to the course (1:55)
01-02-What is React & why learn it  (4:52)
01-03-What you need to know before React (3:24)
01-04-Environmental Setup (13:03)
01-React Demo (11:33)
Links & Resources
Section summary
React Basics
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
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
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
14-01-Section overview of React Styled Components (0:51)
14-02-About React Styled Components (3:37)
14-03-Pros and cons of React Styled Components (3:05)
14-04-React Styled Components example (17:40)
14-05-Create a ModalStyle Component (6:10)
Project - Employee Payroll App
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
What is Tailwind CSS (7:36)
16-02-How to install & setup Tailwind CSS for React (8:20)
Project - Complex Checklist App using Tailwind CSS
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
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
Introduction to React.js
Setting up a React.js project
JSX in React.js
Understanding React Components
Functional Components
Class Components
Props and State in React
Working with Redux
Introduction to Redux
Actions and Reducers
Connecting Redux with React.js
React Projects
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)
17-13-Create a Alert component for list actions
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock