The complete React Fullstack course ( 2021 edition )

76h 58m 6s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online The complete React Fullstack course ( 2021 edition )

0:00
/
#1: Intro

All Course Lessons (443)

#Lesson TitleDurationAccess
1
Intro Demo
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

Unlock unlimited learning

Get instant access to all 442 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

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

Sources: udemy
Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps wi
34 hours 4 minutes 17 seconds
React Supabase Full Course

React Supabase Full Course

Sources: fireship.io
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres. The Supabase Course is a project-based course that builds a Reddit-inspired web app f...
1 hour 39 minutes 49 seconds
Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
React and WebRTC 2023 & Sharing Location App with Video Chat

React and WebRTC 2023 & Sharing Location App with Video Chat

Sources: udemy
Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump str
8 hours 11 minutes 54 seconds
Building a Component Library with Storybook

Building a Component Library with Storybook

Sources: learn.handlebarlabs.com
Learn to create a library of components that are easy to use, self documenting, and easily tested. I've found that using Storybook to define my component's API
1 hour 10 minutes 41 seconds