The complete React Fullstack course ( 2021 edition )
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.
- Knowing a little bit of HTML, CSS and Javascript, everything else you will learn it as we go.
- 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 )
# | 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 |