Mô tả

*2023 Edition*  - React last version / Redux last version


About this course

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 !

See you soon !

* Summary *


  • -- Setup a React 18 project with tools like "Create React App" or "Vite"

  • -- Setup Redux with Redux Toolkit

  •  -- Components

  • -- States

  • -- Props

  •  -- Hooks ( useEffect, useContexts, useRef, useNavigation, useRoute, useSelector, useDispatch, useMemo)

  • -- Contexts

  • -- Refs

  • -- Forms and validations

  • -- Authentification + Signup with Firebase

  • -- Using Firebase Firestore as real time back-end

  • -- 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

  • -- Redux middlewares

  • -- Make redux persistent to keep your data even after refreshing

  • -- Set up a fake server with Json-server

  • -- Asynchronous requests

  • -- React app deployment on the web

  • -- Testing with Jest and React testing library

  • -- Custom hooks

  • -- Make your app support multiples languages with i18n

And much much more incoming soon.


Codiku.

Bạn sẽ học được gì

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.

Yêu cầu

  • A Mac, Linux or Windows computer
  • Basic knowledges in HTML/CSS/JS is highly recommended

Nội dung khoá học

24 sections

Introduction

2 lectures
Welcome !
00:52
What is React ?
06:53

Setup

3 lectures
Create an app with create-react-app
02:43
Create a React app
3 questions
CONGRATULATIONS !
Processing..

React core concepts

27 lectures
Virtual DOM ?
05:50
Coding our root component
05:58
How to get help
03:34
What about all these files ?
04:46
Components
2 questions
All the things you can render
05:22
What can you render ?
4 questions
Render several components
1 question
(optional) - ES6 imports
03:30
Code editor, NodeJS, NPM
01:46
Format your code
01:13
Theme and plugins
00:10
Props - part 1
05:27
Props - part 1
2 questions
Props - part 2
04:26
Props - part 2
1 question
States
09:04
States
3 questions
Unexpected states behaviours
04:10
Styling
08:37
Multiples css modules classes in one className
01:26
Styling
1 question
Callback functions
06:01
Callbacks
2 questions
Babel the transpiler
06:00
Webpack the asset bundler
04:57
CONGRATULATIONS !
Processing..

Understanding npm and npx quickly

1 lectures
(optional) - Understanding NPM & NPX
09:30

Training project - Create a difficulty picker

10 lectures
Project overview
01:16
Picker - part 1
13:31
Picker - part 2
06:37
Events and arrow functions
09:59
Loops
04:39
Loops
1 question
(optional) - The map() ES6 function
03:15
Map
1 question
Improve our Picker using map()
02:55
CONGRATULATIONS !
Processing..

Password Generator project

13 lectures
Project overview
01:07
Project's architecture
07:16
Project setup
04:29
Base structure
11:18
Header
04:42
Form
09:32
Footer structure
04:03
Submiting the form
12:23
Password generation algorithm
04:38
Generate password
11:02
Shuffling Fisher Yates algorithm
02:24
Shuffle
07:11
Copying to clipboard
01:47

Application TV Show Adviser

27 lectures
Project overview
01:21
Update on The Movie Database register flow.
00:26
Set up our project
02:28
Our project architecture
03:06
Bootstrap (optional)
04:17
Quick note about fonts
00:14
Layouting the app
07:48
(optional) - Handling errors with Try, Catch, Finally and Throw
07:15
(optional) - ES6 Promises - Async/Await
12:33
Data fetching - fetch popular shows
08:06
Hook - useEffect()
05:16
useEffect
3 questions
useEffect cleanup function
09:27
Saving data in states - Set popular tv show
09:24
Tv show detail component
04:38
Rating component
10:18
Static images - Display the logo
05:48
TV show list item
10:48
Fetching recommendations
05:05
TV show list
06:04
Styling the scrollbar
03:00
Event/Callback - Clicking a recommendation
03:24
Searchbar - Design part
04:51
Searchbar - Handling keystrokes
05:50
Handling requests errors
03:11
Cleaning the input after a request
05:32
CONGRATULATIONS !
Processing..

Deploying a React app

4 lectures
Deploy using Vercel
03:04
Strict mode
04:13
Environment variables
08:55
CONGRATULATIONS !
Processing..

Redux introduction - Expense tracker project

14 lectures
What is Redux and why Redux ?
03:18
Project expense tracker
01:10
Redux setup
04:56
Initializing the store with values
04:57
Redux actions
06:55
useDispatch() - Writing in the Redux store
05:09
useSelector() - Read the Redux store
05:30
Income input component
04:22
[Optional] - ES6 - Reduce
03:35
Total component
06:22
A Redux diagram
09:18
Persisting the store
13:18
Redux middleware
12:48
CONGRATULATIONS !
Processing..

React + Redux project - Note manager

26 lectures
Project overview
02:04
Setup project
01:45
React router - Navigation
01:33
Setup React router and our pages
06:11
JSON server - Setup a fake backend
05:57
Header component
07:57
Storing the notes
07:39
Text card component
12:32
Note list container
04:54
Note form component explained
01:42
Note form component structure
06:26
Create a note
08:54
Form validations
01:16
[Optional] - ES6 - Spread operator
06:56
Form validation - Part 1
08:52
Form validations - Part 2
03:45
ES6 - Destructuring assignment
05:47
Acessing URL parameters
04:48
Note detail component
04:25
Toggle Note form component from editable to read only
05:06
Update note
05:44
ES6 - filter
04:20
Delete note
08:04
Filter notes
09:34
Wrong date order
01:13
CONGRATULATIONS !
Processing..

Firebase Authentification

18 lectures
Introduction
03:31
Initializing routes
03:07
Signin form structure
04:57
Generic input component
04:55
Auth layout part 1
12:49
Auth layout part 2
04:23
Submiting the signin form
03:54
The Firebase auth flow explained
03:49
Initialize Firebase
09:09
Signin API
05:06
Storing the user in Redux
06:46
Display sweet alert after signin
06:25
HOC explained : High Order Components
02:38
Protect our routes using an HOC
10:54
Persisting the redux auth slice
04:19
Display the user profil / Selector
12:35
Signup
05:43
CONGRATULATIONS !
Processing..

Firestore : A real backend with real time updates

5 lectures
Fetching a collection from Firestore
10:36
Create, update and delete with Firestore
04:19
Protecting our backend
03:19
Enabling real time updates
08:53
CONGRATULATIONS !
Processing..

Contexts

3 lectures
Contexts
03:09
Using contexts
09:32
Contexts or Redux ?
03:14

Create your hooks

8 lectures
Mini project : Rand'images
02:09
Create a list of images
10:46
Custom hooks explained
11:09
useScrollPosition hook
09:08
A bit of styling
05:11
Pagination using the custom hook
11:02
Downloading an image
03:12
CONGRATULATIONS !
Processing..

Jest and React testing library

16 lectures
Introduction
09:52
Starter
00:04
Warning on folder naming
00:20
Coding our math functions
05:49
Jest struggling finding your files
00:18
Test our functions with describe(), it(), and expect()
11:49
Quickly coding the calculator
14:01
Handling the calculators warning and errors
05:16
Jest render() , getByText(), getByRole()
10:22
Find elements using findByTestId and data-testid
11:47
Simulate user inputs with fireEvent()
05:34
Test coverage
08:43
Source : components/RandomUser/RandomUser.jsx
00:05
Wait for elements with find()
07:20
Working with asynchronous requests
08:19
CONGRATULATIONS !
Processing..

Advanced hooks

5 lectures
useRef hook
08:42
Memoization - memo / useMemo / useCallback
11:38
React 18 - states batching
04:50
useReducer
12:51
CONGRATULATIONS !
Processing..

Portfolio : Vite + Multi language + Firebase + ChakraUI

20 lectures
Dynamic portfolio introduction
05:45
Setup a React app with Vite bundler
10:09
Setup ChakraUI and theme
08:14
Setup fonts with ChakraUI
03:55
Header component
09:42
Landing page , layout system with ChakraUI
09:48
Customize a Badge
05:12
Translate our texts
12:32
Change language
04:51
Default language from browser and cache
03:22
Image Slider
10:31
Image slider modal
08:27
Prepare the latest projects section
11:26
Badges
09:30
Footer
07:00
Firebase + Rowy setup
08:07
React firebase setup
04:06
Fetching all the projects
10:47
Translating data coming from back-end
03:44
CONGRATULATIONS
Processing..

Typescript - Introduction

4 lectures
A complete Typescript course
00:33
Introduction
06:26
Setup and compile Typescript
09:52
CONGRATULATIONS !
Processing..

Typescript - Core concepts

10 lectures
Primitives
06:15
Functions, default and optionals parameters
07:30
Objects
05:06
Arrays
07:12
Object Oriented programming : a super quick refresher
07:59
Interface
06:10
Classes
04:35
Private, Public and Static
05:05
Tuples
02:13
CONGRATULATIONS !
Processing..

Typescript - Mini project - Bank accounts

8 lectures
Execute Typescript in a Node environement
03:08
Calm down Nodemon
00:10
Bank account
04:45
Exercise - Part 1 - Casting
04:16
Exercise - Part 2 - Interests
04:57
Exercise - Part 3 - Favorite accounts
06:49
Exercise - Part 4 - Writing a story
03:36
CONGRATULATIONS !
Processing..

Typescript - More important concepts

11 lectures
Unions
07:57
"Is" operator to narrow types
04:53
Enums
05:50
Types and Heritage
07:41
"get" and "set" accessors
05:48
The "protected" access modifier
03:17
Implements
03:46
Abstracts
06:52
Generics
07:01
Generic classes
06:41
CONGRATULATIONS !
Processing..

Typescript - Exercise : Wizard and Spells

6 lectures
Introduction
05:20
Spell classes
06:14
Wizard class
06:45
Story
04:01
Conditional typing
04:40
CONGRATULATIONS !
Processing..

Typescript - Decorators

2 lectures
Class decorators
05:21
Method decorators
08:32

Typescript - A React + TS project

21 lectures
App presentation
02:13
Set up a React Typescript project with Vite
05:07
The trivia API explained
04:16
Setup Chakra UI to quickly layout the app
03:02
Layout
10:25
Slider
13:30
Save qty and go to next step
09:42
Fetching the categories
07:47
Displaying categories
09:20
Handle mixed categories
02:11
Set quiz difficulty
07:57
Loading quiz questions
11:25
Displaying questions and answers
08:53
Lottie animations
10:03
Shuffling questions and coloring answers
05:33
Progress bar
05:16
Timer
12:27
Score
11:51
Fixing the categories loading
02:59
CONGRATULATIONS !
Processing..
That's a wrap... for now.
00:38

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.