Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React JS: Learn React JS From Scratch with Hands-On Projects
What We Will Learn?
What You Will Learn and How to Get Help? (1:22)
Project Files
What is React and Why should we use React
Why a Library or Framework Is Needed (3:00)
What is React? (5:12)
Why Should we use React (2:13)
Quiz
First Look at React
Setting up our Development environment. (4:16)
React vs Vanilla JavaScript (4:37)
Look at React Official Documentation (1:25)
Pure React (9:08)
Setting up a project with create-react-app (8:46)
Quiz
Working With Components Props and JSX
Rendering the root component (4:46)
Debugging (4:32)
Creating and reusing a component (4:24)
What is JSX (3:10)
Creating more component (4:35)
JavaScript logic in component (4:27)
Separation of concerns (3:22)
Styling React applications (7:38)
Props (8:14)
Props & one-way data flow (2:32)
Rendering list (12:41)
Conditional Rendering 1 (5:08)
Conditional Rendering 2 (3:45)
Extraction JSX into a new component (3:14)
Destructuring props (4:48)
React fragments (1:31)
Dynamic Classes (4:41)
Quiz
State, Events, and Forms
Section Overview (0:39)
Let’s build a new project (14:10)
Handling Events (7:54)
What is state? (3:52)
Creating a state with useState (7:25)
Set state manually! (3:20)
Adding open-close button (5:47)
React Developer Tools (4:17)
Updating state based on current state (4:09)
Quiz
Shopping List and Fundamentals of State Management
Introduction of the Application (2:19)
Creating the layout (13:13)
Rendering a list component (12:01)
Rendering a form component (11:47)
Controlled Elements (13:27)
Let’s think about state (3:54)
Lifting state up (11:01)
Deleting an item (4:32)
Updating an item (5:04)
Calculating package quantities (7:02)
Shorting items (7:57)
Sample Application – Language Card
Project Setup (6:25)
Application Introduction (1:17)
Components Structure (5:05)
Let’s start using data (7:51)
Let’s start Creating the card structure (13:02)
Class-Based Component and LifeCycles Hooks
Counter example with Class-Based component (5:50)
Class-Based Component (6:00)
Working with event handlers (6:45)
Class-Based component vs Functional component (3:16)
Quiz
useEffect Hook and Data Fetching
Counter example with useEffect hook (10:48)
useEffect Hook (5:22)
Dependency Array (3:17)
Clean-Up function (5:34)
useState + useEffect + Data fetching (12:35)
Project Structure (9:21)
Component structure & styling (14:07)
Using an async function & axios (8:16)
Quiz
Custom Hook and Refs
Section Overview (0:26)
Refs (4:10)
Why we use useRef Hook (2:11)
Refs to select DOM elements (4:13)
What is this Custom Hook (2:31)
Custom Hook counter example (8:22)
Quiz
React Router
Section Overview (0:45)
What is React-Router (2:52)
Creating a regular application (6:11)
Adding a React-Router to the project (9:43)
Link & NavLink (4:34)
Server side rendering & Client side rendering (5:27)
Creation of components & Application layout (9:21)
Component & Pages Layout and Styling (16:08)
Component & Pages Layout and Styling - 2 (12:40)
Personnel Page (9:37)
Dynamic routing (6:47)
useParams & useLocation (10:34)
PersonnelDetail Page (11:47)
useNavigate vs Link (3:23)
notFound page & Navigate (5:11)
Error handling (6:13)
Loading (8:48)
Nested Routes (11:25)
Absolute Path & Relative Path (4:42)
Private Router (8:19)
Quiz
RecipeApp Project
File structure (8:49)
Project Introduction & API source (2:53)
Creation of Routes (9:28)
Let’s start creating the pages (12:52)
Navbar (10:20)
Home Page (10:47)
Header (13:46)
Card (15:49)
Detail Page (9:44)
Login & Logout (6:45)
React Router v6.4+
Setting up a file structure (9:14)
Section Overview (1:00)
React Router v6.4+ (5:26)
Building the App Layout & Nested Routes (9:00)
Fetching data with loaders (12:00)
useNavigation (3:54)
Error Handling (6:36)
Dynamic Path (12:07)
Quiz
Extraction JSX into a new component
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock