Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Web Application with React JS and Redux
What You Will Learn and How to Get Help in React js with Redux course?
What We Will Learn? (1:54)
React Project Files and Course Documents
FAQ about Web Application with React, Redux
What Is React and Why Should We Use React?
What is React? (5:12)
Why a Library or Framework Is Needed (3:00)
Why Should we use React (2:13)
Quiz
First Look at React
React vs Vanilla JavaScript (4:37)
Setting up our Development environment. (4:16)
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
Creating the layout (13:13)
Introduction of the Application (2:19)
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
Refs (4:10)
Section Overview (0:26)
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)
React Router
What is React-Router (2:52)
Section Overview (0:45)
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)
Components & 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)
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)
Context API
Section Overview (0:46)
Why State Management Libraries Are Needed (4:07)
Context API (3:54)
Stages of Using the Context API (1:38)
Let’s Start Using the Context API (12:03)
Context Provider (9:42)
Data Management (11:07)
Creating Multiple Context (10:03)
LocaleStorage (12:42)
Using Custom Hooks (9:08)
Quiz
useReducer
What is useReducer (3:38)
Section Overview (1:06)
Project Setup (12:16)
useReducer (10:48)
Let's Start Using the Reducer Function (9:00)
Counter Reducer (11:37)
Context API Project
Project Introduction and API Source (4:27)
Section Overview (1:30)
Project Setup and File Structure (13:00)
Creating the Route Structure (4:05)
Header and Navbar (17:11)
Search Page (10:01)
News Card (10:00)
Home Page (12:13)
Context and Theme (11:46)
Slider (11:34)
Categories Page (12:34)
Filtering by Country (6:00)
Data Extraction With Custom Hook (18:21)
Redux
Redux (2:45)
Section Overview (3:53)
Redux Folder (9:10)
Counter Component and createStore (4:34)
useDispatch and useSelector (6:12)
How to Use Folders With Redux (10:51)
combineReducer (10:34)
Todo Component (11:51)
Todo Reducer (14:35)
Clear Action (5:23)
Quiz
Redux Toolkit
Section Overview (0:50)
Redux Toolkit (3:02)
Let’s Start Using Redux Toolkit (14:46)
Using Actions in Redux Toolkit (7:37)
Todo Example (6:01)
Todo Slice (6:07)
addTodo & deleteTodo (5:03)
What is Redux Thunk (9:10)
Let’s Start Using Thunk in Redux Toolkit (15:15)
Post Component (11:04)
Quiz
Redux Toolkit Project
Creation of File Structure (8:21)
Project Introduction (3:03)
Route Structure and Navbar (11:21)
Login Page (8:18)
authSlice (12:01)
NewsSlice (11:06)
News Page and Card Structure (11:01)
What we did in this Application (5:53)
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
Redux Toolkit With React Router v6.4+
Section Overview (1:18)
Project Introduction and API Resource (2:40)
Creation of the Project With Vite (9:26)
Creating the Folder Structure (7:13)
Creation of Route Structure (10:38)
Navbar (6:32)
Login Page (5:04)
Manage User State With Redux Toolkit (7:12)
Manage Movies Data With Redux Tollkit (10:20)
Movies Page (11:24)
Using Loader in MovieDetail Page (9:54)
Todo Example
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock