React + Redux - The beginner guide. (2023 edition)

Focused View

Robin Lebhar

16:20:52

48 View

01 - Introduction

001 Welcome !.mp4

00:52

002 What is React.mp4

06:53

02 - Setup

001 Create an app with create-react-app.mp4

02:43

002 CONGRATULATIONS !.html

external-links.txt

03 - Get help

001 How to get help.mp4

03:34

external-links.txt

04 - React core concepts

001 Virtual DOM.mp4

05:50

002 Coding our root component.mp4

05:58

003 What about all these files.mp4

04:46

004 All the things you can render.mp4

05:22

005 (optional) - ES6 imports.mp4

03:30

006 Code editor, NodeJS, NPM.mp4

01:46

007 Format your code.mp4

01:13

008 Theme and plugins.html

008 extensions-EN.pdf

009 Props - part 1.mp4

05:27

010 Props - part 2.mp4

04:26

011 States.mp4

09:04

012 Unexpected states behaviours.mp4

04:10

013 Styling.mp4

08:37

014 Multiples css modules classes in one className.mp4

01:26

015 Callback functions.mp4

06:01

016 Babel the transpiler.mp4

06:00

017 Webpack the asset bundler.mp4

04:57

018 CONGRATULATIONS !.html

external-links.txt

05 - Understanding npm and npx quickly

001 (optional) - Understanding NPM & NPX.mp4

09:30

06 - Training project - Create a difficulty picker

001 Project overview.mp4

01:16

002 Picker - part 1.mp4

13:31

003 Picker - part 2.mp4

06:37

004 Events and arrow functions.mp4

09:59

005 Loops.mp4

04:39

006 (optional) - The map() ES6 function.mp4

03:15

007 Improve our Picker using map().mp4

02:55

008 CONGRATULATIONS !.html

external-links.txt

07 - Application TV Show Adviser

001 Project overview.mp4

01:21

002 Update on The Movie Database register flow.html

003 Set up our project.mp4

02:29

004 Our project architecture.mp4

03:06

005 Bootstrap (optional).mp4

04:17

006 Quick note about fonts.html

007 Layouting the app.mp4

07:48

007 index.html

008 (optional) - Handling errors with Try, Catch, Finally and Throw.mp4

07:15

009 (optional) - ES6 Promises - AsyncAwait.mp4

12:33

010 Data fetching - fetch popular shows.mp4

08:06

011 Hook - useEffect().mp4

05:16

012 useEffect cleanup function.mp4

09:27

013 Saving data in states - Set popular tv show.mp4

09:24

014 Tv show detail component.mp4

04:38

015 Rating component.mp4

10:18

016 Static images - Display the logo.mp4

05:48

017 TV show list item.mp4

10:48

018 Fetching recommendations.mp4

05:05

019 TV show list.mp4

06:04

020 Styling the scrollbar.mp4

03:00

021 EventCallback - Clicking a recommendation.mp4

03:24

022 Searchbar - Design part.mp4

04:52

023 Searchbar - Handling keystrokes.mp4

05:50

024 Handling requests errors.mp4

03:11

025 Cleaning the input after a request.mp4

05:32

026 CONGRATULATIONS !.html

external-links.txt

08 - Deploying a React app

001 Deploy using Vercel.mp4

03:04

002 Strict mode.mp4

04:13

003 CONGRATULATIONS !.html

09 - Redux introduction - Expense tracker project

001 What is Redux and why Redux.mp4

03:18

002 Project expense tracker.mp4

01:10

003 Redux setup.mp4

04:56

004 Initializing the store with values.mp4

04:57

005 Redux actions.mp4

06:55

006 useDispatch() - Writing in the Redux store.mp4

05:09

007 useSelector() - Read the Redux store.mp4

05:31

008 Income input component.mp4

04:22

009 [Optional] - ES6 - Reduce.mp4

03:35

010 Total component.mp4

06:22

011 A Redux diagram.mp4

09:18

011 redux-diagram.zip

012 Persisting the store.mp4

13:18

013 Redux middleware.mp4

12:48

014 CONGRATULATIONS !.html

external-links.txt

10 - React + Redux project - Note manager

001 Project overview.mp4

02:04

002 Setup project.mp4

01:45

003 React router - Navigation.mp4

01:33

004 Setup React router and our pages.mp4

06:11

005 JSON server - Setup a fake backend.mp4

05:57

005 note-api-collection.zip

006 Header component.mp4

07:57

007 Storing the notes.mp4

07:39

008 Text card component.mp4

12:32

009 Note list container.mp4

04:54

010 Note form component explained.mp4

01:42

011 Note form component structure.mp4

06:26

012 Create a note.mp4

08:54

013 Form validations.mp4

01:16

014 [Optional] - ES6 - Spread operator.mp4

06:56

015 Form validation - Part 1.mp4

08:52

016 Form validations - Part 2.mp4

03:45

017 ES6 - Destructuring assignment.mp4

05:47

018 Acessing URL parameters.mp4

04:48

019 Note detail component.mp4

04:25

020 Toggle Note form component from editable to read only.mp4

05:06

021 Update note.mp4

05:44

022 ES6 - filter.mp4

04:20

023 Delete note.mp4

08:04

024 Filter notes.mp4

09:35

025 CONGRATULATIONS !.html

external-links.txt

11 - Firebase Authentification

001 Introduction.mp4

03:31

001 mockups.zip

002 Initializing routes.mp4

03:07

003 Signin form structure.mp4

04:57

004 Generic input component.mp4

04:55

005 Auth layout part 1.mp4

12:49

005 bg.zip

005 logo.zip

006 Auth layout part 2.mp4

04:23

007 Submiting the signin form.mp4

03:54

008 The Firebase auth flow explained.mp4

03:49

009 Initialize Firebase.mp4

09:09

010 Signin API.mp4

05:06

011 Storing the user in Redux.mp4

06:46

012 Display sweet alert after signin.mp4

06:25

013 HOC explained High Order Components.mp4

02:39

014 Protect our routes using an HOC.mp4

10:54

015 Persisting the redux auth slice.mp4

04:19

015 store-config.txt

016 Display the user profil Selector.mp4

12:35

017 Signup.mp4

05:43

018 CONGRATULATIONS !.html

external-links.txt

12 - Firestore A real backend with real time updates

001 Fetching a collection from Firestore.mp4

10:36

002 Create, update and delete with Firestore.mp4

04:19

003 Protecting our backend.mp4

03:19

004 Enabling real time updates.mp4

08:53

005 CONGRATULATIONS !.html

external-links.txt

13 - Contexts

001 Contexts.mp4

03:09

002 Using contexts.mp4

09:32

003 Contexts or Redux.mp4

03:14

external-links.txt

14 - Create your hooks

001 Mini project Randimages.mp4

02:09

001 sketch.zip

002 Create a list of images.mp4

10:46

003 Custom hooks explained.mp4

11:09

004 useScrollPosition hook.mp4

09:08

005 A bit of styling.mp4

05:11

006 Pagination using the custom hook.mp4

11:02

007 Downloading an image.mp4

03:12

008 CONGRATULATIONS !.html

external-links.txt

15 - Jest and React testing library

001 Introduction.mp4

09:52

002 Warning on folder naming.html

003 Coding our math functions.mp4

05:49

004 Jest struggling finding your files.html

005 Test our functions with describe(), it(), and expect().mp4

11:49

006 Quickly coding the calculator.mp4

14:01

007 Handling the calculators warning and errors.mp4

05:16

008 Jest render() , getByText(), getByRole().mp4

10:23

009 Find elements using findByTestId and data-testid.mp4

11:48

010 Simulate user inputs with fireEvent().mp4

05:35

011 Test coverage.mp4

08:43

012 Source componentsRandomUserRandomUser.jsx.html

013 Wait for elements with find().mp4

07:20

014 Working with asynchronous requests.mp4

08:19

015 CONGRATULATIONS !.html

external-links.txt

16 - Advanced hooks

001 useRef hook.mp4

08:42

002 Memoization - memo useMemo useCallback.mp4

11:38

003 React 18 - states batching.mp4

04:50

004 CONGRATULATIONS !.html

external-links.txt

17 - Portfolio Multi language + Firebase + ChakraUI

001 Dynamic portfolio introduction.mp4

05:45

002 Setup a React app with Vite bundler.mp4

10:10

003 Setup ChakraUI and theme.mp4

08:14

004 Setup fonts with ChakraUI.mp4

03:55

005 Header component.mp4

09:42

006 Landing page , layout system with ChakraUI.mp4

09:48

007 Customize a Badge.mp4

05:12

008 Translate our texts.mp4

12:32

009 Change language.mp4

04:51

010 Default language from browser and cache.mp4

03:22

011 Image Slider.mp4

10:31

012 Image slider modal.mp4

08:27

013 Prepare the latest projects section.mp4

11:26

013 fake-projects.txt

014 Badges.mp4

09:30

014 colors.txt

015 Footer.mp4

07:00

016 Firebase + Rowy setup.mp4

08:07

017 React firebase setup.mp4

04:06

018 Fetching all the projects.mp4

10:48

019 Translating data coming from back-end.mp4

03:44

external-links.txt

Description

Discover React, Redux Toolkit (RTK) , Hooks, Firebase, React router, Form validations, i18n, Deployment, Testing, Chakra

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.

Who is this for?

Programmers looking to learn the last version React and Redux

Engineers who already know React but want to master the concepts.

What You Need to Know?

A Mac, Linux or Windows computer

Basic knowledges in HTML/CSS/JS is highly recommended

More details

Description
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
-- 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.
Who this course is for:
Programmers looking to learn the last version React and Redux
Engineers who already know React but want to master the concepts.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Robin Lebhar

Instructor's Courses

ENGLISH My name is Robin, I am a French engineer. Most specifically I am FullStack lead developper.I had the chance to work as web architect and lead developer in small and larger companies, in France, Canada and US.I am fond of modern web technologies and I really want to demistify the development. I want people to understand that , you don't need to be a code genius to be a great developer. You just need patience and motivation.I had 7 courses on Udemy France, and I was best seller thanks to my React and Redux course.My method is to move step by step with you, provide simple explanations, schemas and corrections.I try to talk with you in a casual way, like I would with a friend and not with a student.My courses are for all audiences, doesn't matter that you are a super beginner or a super experienced developer ;)--------------------------------------------------FRANCAISJe m'appel Robin, Je suis Ingénieur et plus spécifiquement je suis Lead developpeur full stack. Depuis bientôt 10 ans.J'ai eu la chance de travailler en tant qu'architecte et lead developpeur dans entreprises de toutes tailles, en France, au Canada et aux Etats-Unis.Je suis passionné par les nouvelles techno web et mobiles et je veux vraiment démistifier le developpement en général. Je veux que les gens comprenent qu'il n'y a pas besoin d'être un génie du code ou des maths pour être un super developpeur. Il faut juste de la patience et de la motivation.J'ai pour méthode d'avancer pas à pas et je m'éfforce de fournir des explications simples, d'aller à l'essentiel et de fournir des schémas et des corrections pour accompagner mes explications.Je te parlerai comme on parle a un ami et non pas comme un prof parlerai à un étudiant.Mes cours sont pour tous le monde qu'importe que tu sois un developpeur super experimenté ou grand débutant :)

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.