English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 74 lectures (6h 28m) | 4.12 GB
Discover React, Redux Toolkit, Hooks, React router, Form validations, NPM, and much more
You heard about it. Born from a collaboration between Instagram and Facebook : React
React is a Javascript library used to create web interfaces. It’s extremely powerfull, performant and modular.
And since it’s out, everybody is talking about it , it is used by Facebook, Netflix, Yahoo ,AirBnB and many others !
React is the web technology you must know, it is the most popular javascript library used at the moment to create web app. There is a lot of market demand for it; that is why It’s an extremely valuable asset to add to your developper tool belt.
This courses teaches the very basis of React and Redux with all the modern features you want and need to know.
“React + Redux – The guide (2023 Edition)” aim to make you fluent with React and Redux as fast as possible.
We will discover all the basics and the core concepts of React and Redux. We will mostly use practice to do that, since, to me, it is the most efficient way to learn.
In this course we will start from the very basis and we will build together several apps using React but also Redux.
If you never heard about Redux, just keep in mind that it is used in 90% of professional React projects to manage the data of you app. That is why it’s a very important library to know when learning React. They are very often combined.
We will apply everything you’ll learn in these videos through real example and real web apps.
Also, for each video you will watch, there will be a correction available, to make it easier for you to follow.
Finally these courses are specifically designed to be accessible and easy to understand, with a lot of schema and examples, so, you don’t need to be an algorithm killer or 15 years of experience developper to understand it. It’s made for all.
I will explain what I know assuming that you don’t now React nor Redux at all.
And off course, all of that : in a good mood and teached in a casual way !
Summary
- Setup a React 18 project
- Setup Redux with Redux Toolkit
- Components
- Contexts
- States
- Props
- Hooks ( useEffect, useContexts, useNavigation, useSelector, useDispatch)
- Forms and validations
- Navigation with React router
- Callback functions
- ES6 functions (map, reduce, filter)
- Styling (css modules, JSS, Bootstrap)
- Understand NPM
- Write in Redux store
- Read from Redux
- Understanding slices,actions reducers
- Set up a fake server with Json-server
- Asynchronous requests
What you’ll learn
- Build blazing fast single page app with React 18
- How to create reusable components to build a scalable app
- Understand the ecosystem and all the tools that comes with React like, NPM, Redux, ES6, React router…
- How to architecture a project correctly.
Table of Contents
Introduction
1 Welcome !
2 What is React
Contexts
3 Contexts
4 Using contexts
5 Contexts or Redux
Setup
6 Code editor, NodeJS, NPM
7 Create an app with create-react-app
8 Understanding NPM & NPX (optional)
9 Project quick tour
Get help
10 How to get help
React core concepts
11 Create components
12 Props – part 2
13 States
14 Styling
15 Callback functions
16 All the things you can render
17 Understanding imports (optional)
18 Format your code
19 Props – part 1
Training project – Create a difficulty picker
20 Project overview
21 Picker – part 1
22 Picker – part 2
23 Loops
24 map() – ES 6 function (optional)
25 Improve our Picker using map()
Application TV Show Adviser
26 Project overview
27 Tv show detail component
28 Rating component
29 Static images – Display the logo
30 TV show list item
31 Fetching recommendations
32 TV show list
33 EventCallback – Clicking a recommendation
34 Searchbar – Design part
35 Searchbar – Handling keystrokes
36 Set up our project
37 Our project architecture
38 Bootstrap (optional)
39 Layouting the app
40 Data fetching – fetch popular shows
41 Hook – useEffect()
42 Saving data in states – Set popular tv show
Deploying a React app
43 Deploy using Vercel
44 Strict mode
Redux introduction – Expense tracker project
45 What is Redux and why Redux
46 Redux setup
47 Initializing the store with values
48 Redux actions
49 useDispatch() – Writing in the Redux store
50 useSelector() – Read the Redux store
51 Reduce – ES6 function (optional)
52 Income input component
53 Total component
React + Redux project – Note manager
54 Project overview
55 Note form component explained
56 Note form component structure
57 Create a note
58 Form validations
59 Form validation – Part 1
60 Form validations – Part 2
61 Acessing URL parameters
62 Note detail component
63 Toggle Note form component from editable to read only
64 Update note
65 React router – Navigation
66 Delete note
67 Filter notes
68 Setup project
69 Setup React router and our pages
70 JSON server – Setup a fake backend
71 Header component
72 Storing the notes
73 Text card component
74 Note list container
Resolve the captcha to access the links!