Starting with React & Redux: Build modern apps (2nd edition)

30h 13m 51s
English
Paid

Course description

We will start from beginning to actually building a few applications.You will learn all the logic and practice behind React in different modules, and as we advance through  the course we will be increasing the difficulty.  Since I believe that the best way to fully learn is by coding, after each section we will put everything in practice with some course projects, and after you have a strong base of React we will journey into REDUX, the most beloved state manager.

Read more about the course

To sum everything up, you will learn in this course:

  • The very basics of React.How toy install and run it.How to create different types of components.
  • Learn the tools React provides, just like State and React Lifecycles to handle you application.
  • Work with events and use them in a real life scenario and the importance of props to handle the application
  • How to use React Router to navigate through pages and create transition with React Transition Group
  • How to do typechecking with React Proptypes
  • Learn how to use the Redux cycle properly and handle the information that flows in your entire application
  • We will learn the importance of middlewares.
  • Much more of course...

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 220 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Starting with React & Redux: Build modern apps (2nd edition)

0:00
/
#1: Welcome !!

All Course Lessons (220)

#Lesson TitleDurationAccess
1
Welcome !! Demo
01:48
2
Project overview
04:05
3
IDE
01:13
4
Installing NODE and Using a CLI
11:58
5
The bundle
05:58
6
Starting with the code
09:07
7
JSX behind the scenes
09:10
8
Importing components
08:26
9
Types of components
05:31
10
Adding styles
10:20
11
Events
11:40
12
The STATE
15:05
13
Using Props
10:46
14
Using props 2
14:04
15
Props to class
06:02
16
Childrens
03:43
17
More with styles
06:59
18
Styles plugins
06:35
19
Filtering the news
15:04
20
Installing routes
05:38
21
How it works and creating components
07:21
22
Using routes
06:28
23
Linking
10:53
24
Working with params
06:50
25
Other features from react router
07:19
26
Switch
03:51
27
Redirections
06:55
28
404 and WITHROUTER
09:57
29
Getting ready
11:15
30
Adding header and banner
15:57
31
Bringing the HOME list
10:42
32
Creating the artist detailed view
18:42
33
Component lifecycles
07:22
34
Component lifecycles 2
19:27
35
Conditional rendering
10:24
36
Pure components
08:30
37
Adjacent elements
05:44
38
HOC''s
08:48
39
HOC''s Continued
13:37
40
Using transitions
17:29
41
Using transitions 2
08:56
42
Transitions group
11:51
43
CSS Transitions
15:44
44
Proptypes
10:23
45
Proptypes 2
08:28
46
Controlled components
07:59
47
installation and setup
08:49
48
Routes, Footer and header
09:30
49
Adding a slider
20:05
50
Adding subs
19:36
51
Adding subs...continued
10:08
52
Home blocks
13:26
53
Adding a poll
14:59
54
Finishing the poll
06:13
55
Adding the teams section
14:43
56
Finishing the teams section
08:55
57
Creating the team view
13:27
58
Redux introduction
08:37
59
Creating a Store
07:54
60
The redux flow
05:56
61
Combining reducers
06:35
62
Creating a valid reducer
07:32
63
Creating an action
04:44
64
MapStateToProps and connect
12:44
65
MapDispatchToProps
05:48
66
Types
07:58
67
Using middleware
07:45
68
Installations
06:59
69
Adding Redux
14:10
70
Getting home data
16:46
71
Latest news component
07:06
72
Other news section
08:57
73
Articles page
16:06
74
Adding likes component
12:33
75
Finishing the likes
08:59
76
Clearing data
04:46
77
Introduction to hooks
01:50
78
UseState
13:54
79
UseState 2
13:51
80
UseEffect
16:43
81
UseReducer
12:28
82
Preparing the app for the context
10:00
83
Context and UseContext
15:30
84
Introduction
01:37
85
Windows Users: Installing Node JS
08:04
86
Mac Users: Install Node JS
01:54
87
Runing the Boilerplate: Create React App
05:01
88
Bundle
03:08
89
Getting Started
03:24
90
Imports and render
05:46
91
Project structure
03:42
92
Exporting components
07:08
93
Type of components
06:25
94
Adding some Style
08:16
95
Synthetic Events
09:21
96
ES6 Constructor
08:18
97
Using React State
04:07
98
Changing State
04:33
99
Changing State 2
04:57
100
Working with Props
05:50
101
Working with Props 2
05:33
102
Working with Props 3
07:48
103
Working with Props 4
07:54
104
Filter the news
07:52
105
Filter the news 2
06:49
106
Conclusions
02:17
107
Introduction to React Router
04:17
108
Router Process
02:40
109
Setting up Routes
07:05
110
Using Routes
06:20
111
Linking
03:50
112
Params
08:20
113
More on React Router
09:18
114
Setup and installation
05:48
115
Creating the Routes
07:26
116
Adding a banner
12:23
117
Fetching the list
10:09
118
Showing the list
10:52
119
Styling the list
03:57
120
Creating the detail
10:48
121
Showing the bio
05:45
122
Styling the bio
05:11
123
Album List
10:37
124
Component Lifecycles
09:16
125
Component Lifecycles 2
06:58
126
Component Lifecycles 3
04:07
127
Transitions
04:23
128
Transition enter
07:51
129
Transition leave and appear
06:44
130
Transition from variables
06:53
131
Transition imports
09:24
132
Proptypes intro
02:43
133
Using Proptypes
06:30
134
More on Proptypes
09:27
135
Using Refs
05:27
136
Controlled Components
06:15
137
Uncontrolled Component
05:11
138
INTRO
03:51
139
Installation
06:56
140
Setting up Routes
07:58
141
Adding header and footer
03:17
142
Styling header and footer
09:23
143
Slider
09:14
144
Slider 2
09:58
145
Slider styles
04:36
146
Subscribe component
13:58
147
Saving subscribers
05:53
148
Handling errors
12:21
149
Styling subscribers
04:10
150
Home blocks
10:35
151
Showing the blocks
04:55
152
Styling the blocks
12:45
153
Creating the poll
12:13
154
Creating the poll 2
08:32
155
Adding Hits
06:54
156
Styling the poll
03:59
157
Getting the Teams
11:12
158
Adding effects to the teams
08:14
159
Filtering teams
12:58
160
Styling teams
05:38
161
Rendering team details
10:54
162
Rendering team details 2
04:47
163
Styling the detail
08:50
164
Intro to Redux
02:45
165
Connecting Redux
08:39
166
Action creators and Reducers
04:13
167
Reducers
05:25
168
Reducers 2
08:16
169
Action creators
04:59
170
Connecting
13:54
171
Containers
04:31
172
Setting up
05:58
173
Creating components
13:19
174
Creating search
06:04
175
Setting up Redux
05:20
176
Binding actions
11:26
177
Requests and Middleware
10:37
178
Redux promise
04:58
179
Adding the reducer
02:48
180
Showing results
11:43
181
Creating the list
08:32
182
Creating the detail
09:23
183
Adding reducers
07:28
184
Fixing state
05:41
185
Fixing state 2
03:20
186
Car detail view
08:40
187
Clearing state
06:00
188
Installing
05:33
189
Setting up redux
04:38
190
Setting up routes
03:54
191
Header and Footer
03:56
192
Header and Footer Styles
06:10
193
Home - Latest News
09:45
194
Home - Latest news - Store Data
10:47
195
Home - Latest News - JSX
06:43
196
Home -Latest News - Style
06:03
197
Home - Fetching other news
09:06
198
Home - Rendering other news
08:02
199
Home - Styling other news
10:22
200
Home - Fetching Gallery
09:07
201
Home - Render Gallery JSX
08:58
202
Home - Styling Gallery
04:09
203
News - Fetching article
14:47
204
News - Render Article JSX
07:58
205
News - Styling article
06:48
206
Gallery - Fetching data
10:17
207
Gallery - Render JSX
11:00
208
Gallery - Adding styles
04:04
209
Likes & Dislikes widget
09:44
210
Likes & Dislikes widget 2
05:28
211
Likes & Dislikes widget 3
10:12
212
Likes & Dislikes widget 4
02:35
213
Likes & Dislikes - Styles
05:33
214
Using and Index for types - convention
10:04
215
Intro and setup
08:08
216
Adding form elements
06:53
217
Validation
08:13
218
Validation 2
05:30
219
Submitting Form
08:46
220
Form on success
06:53

Unlock unlimited learning

Get instant access to all 219 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering Next.js - 50+ Lesson Video Course on React and Next

Mastering Next.js - 50+ Lesson Video Course on React and Next

Sources: masteringnuxt.com
The premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!
5 hours 9 minutes 45 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Sources: udemy
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to
28 hours 38 minutes 19 seconds
MERN 2024 Edition - MongoDB, Express, React and NodeJS

MERN 2024 Edition - MongoDB, Express, React and NodeJS

Sources: udemy
Welcome to the immersion in the MERN Stack! This course will help you master all aspects of building a fully functional "Jobify" application using MongoDB.
19 hours 7 minutes
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds