The complete React Fullstack course ( 2021 edition )

76h 58m 6s
English
Paid
April 1, 2024

Do you want to learn the whole process of building your App ?. This is the course for you. We will start from the very beginning, from "I don't even know how use it..and why would I“ to actually understanding how React works and make it communicate with other technologies like Node js. 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.

More

Since I believe that the best way to fully learn is by coding, after each important section we will put everything in practice with some course projects, and after you have a strong base of React we will journey into Servers and Databases, Redux and deploying  apps to production.

We will use ES6, the latest version of javascript. 

Don’t know ES6 ?

Don’t sweat it, there is a full bonus section where we will show you all the ES6 magic.

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

  • The very basics of React. How to install and the logic behind it.

  • Once you know the basics of React we will journey into the confusing stuff.

  • After you have a strong base of React we will create a full practice project.

  • Everybody is using Redux, so we will learn how to use redux with our React Apps.

  • Since our app will need a database, you will learn how to use MongoDB and mongoose.

  • Apply security, authentication, restricting routes, hashing passwords and JWT’s.

  • We will create a second practice project using React, Redux, Node Server and MongoDB.

  • Of course, we will learn the whole process of publishing you app using Heroku, Git and Github.

  • Webpack is part of the fullstack, so we will discuss the basics of Webpack .

  • You also get a Full ES6 course

What about the instructor experience ?

Well I've been around for 10 years now, built lots of applications for small projects and big companies like Citi,Fox, Disney and a lot more.

Today I work as developer for a major company developing applications in React or Angular mostly, but I like to teach in my spare time.

How about the target audience?

  • This course is for almost everyone, a little bit of Javascript is required.We will use ES6 but you can learn as we go.

  • If you want to take your coding to the next level, this is the course for you. 

Requirements:
  • Knowing a little bit of HTML, CSS and Javascript, everything else you will learn it as we go.
Who this course is for:
  • From beginners in javascript to intermediate.

What you'll learn:

  • You will learn the whole React WebApp building process, from your pc to the server.
  • Work with nosql databases ( Firebase, MongoDB and Moongoose)
  • How to deploy applications to services like Firebase and Heroku.
  • Learn how Redux work and apply it on a real life application.
  • Learn what NODE js is and How it works and create your own server,
  • Learn the b

Watch Online The complete React Fullstack course ( 2021 edition )

Join premium to watch
Go to premium
# Title Duration
1 Intro 01:30
2 Installing Node JS 01:45
3 IDE 01:39
4 The boilerplate 05:17
5 The bundle 04:45
6 From the ground up 09:53
7 Behind the scenes 08:38
8 Project structure 12:42
9 Types of components 05:39
10 Adding some style 14:18
11 Events 11:53
12 State 16:36
13 Props part one 14:23
14 Props part two 09:44
15 Props part three 07:29
16 React children 03:59
17 More on styling 07:02
18 Filtering the news 12:53
19 Lifecycles 14:45
20 Lifecycles part 2 19:03
21 React hooks intro 04:30
22 UseState hook 13:34
23 UseState hook part 2 16:05
24 UseEffect 13:05
25 UseCallback 26:13
26 UseRef 13:43
27 Context API part one 18:28
28 Context API part two 11:48
29 Installation 05:03
30 The context and css 15:30
31 Ref and validation 14:29
32 Adding players to the list 07:06
33 Showing the list of players 07:54
34 Next and Toastify 13:36
35 Getting the looser 11:28
36 Introduction 05:22
37 The route process 03:03
38 The main route file 04:19
39 Setting up routes 05:44
40 Linking 08:53
41 A better layout 05:31
42 Params 05:48
43 More on react router 06:00
44 React router switch 05:19
45 Redirections 07:40
46 Handling 404 04:32
47 Introduction 08:11
48 Pure components 14:12
49 Adjacent elements 07:07
50 HOC part 1 11:11
51 HOC part 2 11:52
52 Transitions 14:05
53 Transitions part 2 11:53
54 CSS transitions 08:20
55 Transitions group 13:27
56 Honorable mentions 06:23
57 Introduction 03:31
58 Connecting 10:21
59 Action creators and reducers 05:10
60 Combine reducers 05:58
61 Creating a valid reducer 10:59
62 Redux devtools 07:17
63 Dispatching actions 11:53
64 Map state to props 06:36
65 Redux hooks 13:03
66 Types 06:14
67 Making requests 09:27
68 Installation and router 12:53
69 Setting up Redux 11:28
70 Header and main layout 09:07
71 Api Server with json server 07:19
72 Fetching home posts 18:24
73 Fetching home posts part 2 19:14
74 Home masonry 12:47
75 Creating the add newsletter 21:15
76 Finishing newsletter 19:04
77 Newsletter fix and creating post page 18:40
78 Post cleanup and 404 12:34
79 Formik - Starting 12:34
80 Formik - Validating 13:40
81 Formik - Using Yup 06:15
82 Formik - Hooks 06:55
83 Formik - Custom components 13:57
84 Formik - Custom fields 13:37
85 Custom - Creating the state and input 15:30
86 Custom - Updating formdata 15:48
87 Custom - Validations 13:41
88 Custom - Submit form 14:45
89 Custom - Select and textarea 17:05
90 Adding a contact form to daily news 14:25
91 Daily news, storing the message. 11:48
92 The userReducer 24:41
93 What node is 04:54
94 Using the REPL 05:14
95 Blocking and non-blocking 07:45
96 Threads,Event Loop, Call stack and task queue 13:02
97 Final thoughts 06:16
98 Creating a node server 09:16
99 Sending responses 11:09
100 Creating routes 07:10
101 Express - creating server 12:11
102 Express - Params and querystrings 07:08
103 Express - Middleware part one 05:29
104 Express - Middleware part two 06:44
105 Express - Body parser 17:36
106 Express and React 20:06
107 Introduction 03:05
108 Creating a cluster 08:16
109 Connecting 08:13
110 Adding data to the DB 14:17
111 Creating a model and schema 10:57
112 Mongoose POST 14:31
113 Mongoose GET 09:47
114 Mongoose REMOVE 10:29
115 Mongoose UPDATE 16:00
116 Using postman 07:02
117 Creating a project 15:27
118 Register a user (no-hash) 09:25
119 Hashing passwords 17:51
120 Sign in users 19:34
121 JWT part one 09:17
122 JWT part two 12:31
123 JWT part three 16:35
124 Auth middleware 09:40
125 Deploying part one 14:20
126 Deploying part two 17:29
127 SERVER: Installations 11:01
128 SERVER: Init server and connecting to DB 15:40
129 SERVER: Creating the user model 19:03
130 SERVER: Creating the routes file 08:45
131 SERVER: Hashing and checking email 16:07
132 SERVER: Register user 13:13
133 SERVER: Sign in user 11:59
134 SERVER: Validating tokens 19:59
135 SERVER: Creating roles 14:09
136 SERVER: Testing roles 15:50
137 SERVER: Updating profile 14:56
138 SERVER: Updating email 14:53
139 SERVER: Articles model 15:40
140 SERVER: Posting article 15:30
141 SERVER: Patch, delete, get article by ID 17:39
142 SERVER: Find by ID 05:47
143 SERVER: Load more 17:53
144 SERVER: Pagination route 25:00
145 Starting with REACT 13:01
146 Creating a store 12:35
147 Header and sidedrawer 17:32
148 Finishing sidedrawer 10:57
149 Creating the home cars 22:00
150 Getting articles from loadmore part one 22:43
151 Getting articles from loadmore part two 12:45
152 Showing notifications part one 18:33
153 Showing notifications part two 07:55
154 Creating the login-register form 21:28
155 Register users 19:42
156 Sign in users 07:10
157 Auto sign in users 19:30
158 Creating a loader 02:38
159 Logout users 09:30
160 Admin layout 11:25
161 Changing layouts 20:03
162 Routes guard 20:34
163 Guarding nav links 15:18
164 Hotfix for the sign in and sign out 05:46
165 Creating the article section 17:22
166 Showing article data 14:07
167 Clearing articles 06:29
168 Add article part one 17:07
169 Add article part two 17:44
170 Using field array with actors 17:25
171 Creating the WYSIWYG editor 19:49
172 Finishing WYSIWYG 12:36
173 Posting article 17:47
174 Amin pagination part one 16:12
175 Amin pagination part two 16:33
176 Amin pagination part three 05:46
177 Changing article status 22:23
178 Removing articles part one 12:41
179 Removing articles part two 14:41
180 Editing articles part one 18:29
181 Editing articles part two 11:32
182 Email stepper part one 19:52
183 Email stepper part two 19:38
184 Email stepper part three 13:49
185 Updating user profile 17:52
186 Deploying 17:04
187 Contact form 20:07
188 Dispatching contact 17:05
189 Creating the email service 16:23
190 Testing the email service 04:47
191 Verifying users trough email 16:57
192 Verify, creating the front end 19:52
193 Finish verify account 11:12
194 Creating categories - server 12:21
195 Creating the categories layout 17:07
196 Categories to Redux 20:50
197 Fixing the add article category 16:00
198 Fixing the edit articles category 03:45
199 Creating client search - server 14:04
200 Creating client search - client part 1 19:50
201 Creating client search - client part 2 10:41
202 Creating the admin search - server 06:29
203 Creating the admin search - client part 1 18:54
204 Creating the admin search - client part 2 08:45
205 Uploading files to the server - part 1 17:41
206 Uploading files to the server - part 2 18:37
207 Uploading files to a service 20:35
208 Intro 01:19
209 Installing Node JS 01:53
210 IDE 01:49
211 Using a boilerplate 06:56
212 The bundle 07:55
213 Creating a simple app 06:54
214 Using JSX 07:01
215 Structuring 15:50
216 Using classes 06:41
217 A little bit of styles 10:58
218 Events 10:57
219 Component state 13:30
220 Working with props 13:45
221 Working with props 2 13:16
222 Props, from class to class 05:51
223 Childrens 03:13
224 More on styling 07:41
225 Using third party libraries 12:18
226 Filter the news 19:11
227 React Lifecycles 15:34
228 React Lifecycles 2 18:48
229 React hooks 03:34
230 Conclusion 02:35
231 Use state 08:17
232 Use state 2 07:01
233 Use state 3 16:01
234 Use effect 05:06
235 Introduction 03:48
236 Router process 11:16
237 Setting up routes 09:36
238 Linking 04:04
239 Make it a little bit better 05:43
240 Params 04:33
241 Memory, hash and navlink 03:25
242 Switch 05:59
243 Redirections 04:12
244 Intro and installation 06:29
245 Routes and json server 12:24
246 Finishing home 16:22
247 Creating the artists page 13:43
248 Getting albums 05:44
249 Conditional rendering 12:14
250 Pure components 08:25
251 Adjacent elements 06:26
252 Hight order components 1 08:33
253 Hight order components 2 12:18
254 Animations 13:56
255 Transitions with classes 09:46
256 CSS transitions 08:55
257 TGroup - the template 05:23
258 Animating with TGroup 11:00
259 Typechecking 14:47
260 Typechecking 2 10:19
261 Controlled vs uncontrolled 08:33
262 Intro and install 10:48
263 Creating header and footer 11:10
264 Creating the slider 16:03
265 Creating the Home subscription 14:48
266 Finishing the Home Subs 09:15
267 Adding home posts/ blocks 18:15
268 Home Poll 12:21
269 Finishing Home Poll 11:18
270 Creating the article post 11:09
271 Creating the teams component 20:35
272 Adding the modal 15:54
273 Finishing the modal 04:58
274 Introduction 03:08
275 Creating a store 11:03
276 Action creators and reducers 05:53
277 Creating reducers 15:14
278 Connecting 12:44
279 Dispatching an action 05:52
280 Making a better code 06:14
281 Using types 06:16
282 Working with promises 11:05
283 Redux and functional component 07:54
284 Redux and Hooks 11:35
285 Introduction 01:09
286 Creating a state for your forms 09:48
287 Templating form elements 14:10
288 Adding events to form elements 13:00
289 Creating a validation function 09:11
290 Displaying error messages 08:31
291 Remaining form elements 14:33
292 Posting data 15:58
293 Starting with formik 10:05
294 Validating with formik 15:29
295 Submitting with formik 07:06
296 Formik and yup 09:18
297 Intro 04:54
298 REPL my terminal 05:37
299 Using node on a project 05:21
300 Write in node 05:37
301 Exporting in node 07:53
302 Blocking and non blocking 11:22
303 Threads, events loop and call stack 04:30
304 Threads, events loop and call stack 2 06:30
305 Threads, events loop and call stack 3 07:54
306 Right to the bone 04:06
307 Intro 03:42
308 Simple server 09:14
309 Sending an HTML response 04:16
310 Sending a JSON response 07:08
311 Routing 06:18
312 Express intro 13:15
313 Express params and query string 04:58
314 Express middleware 04:55
315 Express middleware 2 05:48
316 Express posting data 18:29
317 Node server and react 12:42
318 Node server and react 2 08:16
319 Intro 04:13
320 Installing mongo and mongo driver 12:49
321 Using the mongo driver 16:11
322 Using the mongo driver 2 12:12
323 Mongoose , models and schemas 10:37
324 Mongoose posting 11:34
325 Mongoose getting 08:36
326 Mongoose remove 08:08
327 Mongoose updating 14:39
328 Using postman 06:39
329 Creating a server 15:26
330 Adding users 09:30
331 Using bcrypt 07:23
332 Hashing passwords 10:41
333 Hashing passwords 2 07:43
334 Hashing passwords 3 10:08
335 What is a JWT 12:22
336 Generating a token 11:24
337 Validating tokens 16:29
338 Auth middleware 07:09
339 Log out users 06:54
340 Creating a Heroku project 08:00
341 Connecting mongo DB cloud 14:40
342 Finishing deploy 14:23
343 Introduction 06:54
344 Creating a server 15:25
345 User model 14:59
346 Hashing password 06:02
347 Login users 13:02
348 Validating tokens 10:33
349 Logout users 04:20
350 Books model 12:08
351 Posting a book 07:42
352 Get, patch and delete a book. 13:12
353 Getting all books 10:57
354 Setting up redux 15:34
355 Creating the header and the sidenav 15:15
356 Adding links to the sidenav 11:28
357 Creating the login 15:56
358 Dispatching a login action 11:15
359 Login in and catch errors 09:22
360 Auth HOC 17:23
361 Logout user 11:10
362 Sidenav options 10:47
363 Creating the add posts section 18:37
364 Validating fields 15:32
365 Posting the book 15:07
366 Finishing the add book post 08:46
367 Creating the edit book 18:44
368 Creating the edit book 2 15:59
369 Finishing the edit book 06:13
370 Admin posts section 17:20
371 Get home articles 08:09
372 Get home articles 2 13:07
373 Home loadmore 04:58
374 Article view 16:24
375 Deploying to heroku 11:07
376 Deploying to heroku 2 19:31
377 Introduction to ES6 02:40
378 CONST and LET 04:49
379 CONST and LET: Using scope 07:06
380 CONST and LET: Real life example 07:05
381 CONST and LET: Exercise one - solution 03:11
382 CONST and LET: Exercise two - solution 05:22
383 Template strings 05:52
384 Template strings 2 07:56
385 Template strings 3 04:29
386 Template strings 4 02:32
387 Template strings: Exercise one - solution 02:59
388 Template strings: Exercise two - solution 04:37
389 Foreach 06:48
390 Foreach 2 03:35
391 Foreach 3 04:09
392 Foreach: Exercise - solution 05:30
393 Map 06:03
394 Map 2 04:20
395 Map: Exercise one - solution 02:02
396 Map: Exercise two - solution 03:12
397 Filter 03:01
398 Filter 2 03:55
399 Filter: Exercise one - solution 01:50
400 Filter: Exercise two - solution 06:12
401 Find 03:38
402 Find 2 08:38
403 Every & some 06:06
404 Every & some 2 02:16
405 Reduce 05:41
406 Reduce 2 04:31
407 Reduce: Exercise one - solution 01:43
408 Reduce: Exercise two - solution 05:23
409 For....of 04:07
410 Fat arrow functions 04:42
411 Fat arrow functions 2 05:45
412 Fat arrow functions: Exercise solution 06:22
413 Object literals 03:41
414 Object literals 2 04:31
415 Object literals: Exercise - solution 02:32
416 Default function arguments 04:11
417 Default function arguments: Exercise - solution 01:13
418 Rest operator 04:24
419 Spread operator 03:13
420 Rest and Spread: Exercise two - solution 02:19
421 Classes 02:47
422 Classes 3 03:24
423 Classes 4 04:07
424 Destructuring 07:03
425 Destructuring 2 03:18
426 Destructuring 3 03:38
427 Destructuring 4 04:12
428 Promises and fetch 03:24
429 Promises and fetch 2 06:53
430 Promises and fetch 3 07:37
431 Promises and fetch 4 02:32
432 Strings and numbers 06:37
433 Strings and numbers 2 04:37
434 Modules 07:11
435 Modules 2 04:19
436 Modules 3 06:08
437 Generators 08:08
438 Generators 2 06:47
439 Generators 3 06:41
440 Generators 4 07:01
441 Generators 5 05:12
442 Iterating sets 03:59
443 Iterating map 06:03

Similar courses to The complete React Fullstack course ( 2021 edition )

Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Duration 36 hours 13 minutes 15 seconds
React Hooks

React Hooks

Duration 3 hours 47 minutes 48 seconds
Working with React and Go (Golang)

Working with React and Go (Golang)

Duration 24 hours 48 minutes 43 seconds
MERN Invoice Web App with Docker,NGINX and ReduxToolkit

MERN Invoice Web App with Docker,NGINX and ReduxToolkit

Duration 24 hours 38 minutes 4 seconds
Node.js, Express & MongoDB Dev to Deployment

Node.js, Express & MongoDB Dev to Deployment

Duration 9 hours 4 minutes 14 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass

PHP Symfony 4 API Platform + React.js Full Stack Masterclass

Duration 19 hours 24 minutes 17 seconds
Complete DApp - Solidity & React - Blockchain Development

Complete DApp - Solidity & React - Blockchain Development

Duration 15 hours 21 minutes 24 seconds
Testing React Apps with React Testing Library

Testing React Apps with React Testing Library

Duration 6 hours 48 minutes 20 seconds
Build a Notion Clone with React and TypeScript

Build a Notion Clone with React and TypeScript

Duration 7 hours 57 minutes 47 seconds
Bedrock: Jumpstart your next SaaS product