React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
- Description
- Curriculum
- FAQ
- Notice
- Reviews
Nobles Center does not issue a Certificate for this course, it’s an affiliate program from Udemy
this course now allows you to take your React knowledge to the next level and build fullstack web apps based on React, NodeJS, MongoDB and Express!
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular – in this course, you will learn it from scratch at the example of a complete project!
MERN stands for MongoDB, Express.js, React.js and Node.js – and combined, these four technologies allow you to build amazing web applications.
In this course, we’ll build an entire project and you will learn how these different technologies work together step by step. We’ll first have a look at all the individual building blocks, so that we then can also combine them all into one amazing application by the end of the course.
This course also doesn’t stop after the basics – instead, you’ll also learn how to add file upload, authentication, authorization and how to deploy your application in different ways to different hosting services.
This course is taught by two instructors – Max (React.js, Node/ Express) and Manuel (MongoDB) who have years of experience of working with these technologies and teaching them to other people. We took and combined our experiences to deliver you the best possible MERN stack course you can find out there.
In detail, this course offers:
-
Brief refreshers on the core technologies (React, Node, Express, MongoDB)
-
Project sections for each technology where the theoretic knowledge is applied
-
Detailed theory about the MERN stack and the different ways of combining the technologies
-
A complete course project where all the technologies come together into one application
-
File (image) upload in both React.js (sending the file) and Node/ Express (receiving the file)
-
User authentication (signup + login)
-
User authorization (controlling access to certain resources)
-
Detailed deployment instructions – including different ways of deploying the application
-
Tons of quizzes and extra resources!
By the end of this course, you’ll feel comfortable building your own MERN stack applications and you can build up on all the knowledge taught throughout this course to dive into your own projects and use-cases.
What are the requirements for taking this course?
-
NO prior MERN stack knowledge is required
-
Basic React.js knowledge is strongly recommended – a refresher is provided as part of the course but this course is NOT meant to teach React from the ground up
-
Basic Node + Express knowledge is recommended but not a must-have
As always, this course comes with a 30-day money-back guarantee.
We’d love to dive into this course together with you!
-
9
Module Introduction -
10
Understanding the Big Picture
-
11
Diving Into the Frontend
-
12
Understanding the Backend
-
13
REST vs GraphQL
-
14
Connecting Node & React
-
15
MERN - Essentials -
16
Creating our Development Environment & the Development Servers
-
17
Diving Deeper Into the Code
-
18
Useful Resources & Links
-
24
Module Introduction
-
25
What is React?
-
26
A Note About The NodeJS Version
-
27
React 18
-
28
Setting Up a Starting Project
-
29
Understanding JSX
-
30
Understanding Components
-
31
Working with Multiple Components
-
32
Using Props to pass Data between Components
-
33
Rendering Lists of Data
-
34
Handling Events
-
35
Efficient Child<=>Parent Communication
-
36
Working with "State"
-
37
More on State
-
38
Fetching User Input (Two-way Binding)
-
39
React.js Basics
-
40
Wrap Up
-
41
Useful Resources & Links
-
42
Module Introduction
-
43
Important: Use React Script v5
-
44
Starting Setup, Pages & Routes
-
45
Adding a UsersList Page / Component
-
46
Adding a UserItem Component
-
47
Styling our App & More Components
-
48
Presentational vs Stateful Components
-
49
Adding a Main Header
-
50
Adding Navlinks
-
51
Implementing a Basic Desktop & Mobile Navigation
-
52
Understanding Portals
-
53
Handling the Drawer State
-
54
Animating the Sidedrawer
-
55
Rendering User Places & Using Dynamic Route Segments
-
56
Getting Route Params
-
57
Adding Custom Buttons
-
58
Adding a Modal
-
59
Rendering a Map with Google Maps
-
60
Continuing without a Credit Card
-
61
Optional: More on the useEffect() Hook
-
62
Adding a Custom Form Input Component
-
63
Managing State in the Input Component
-
64
Adding Input Validation
-
65
Sharing Input Values & Adding Multiple Inputs
-
66
Managing Form-wide State
-
67
Finishing the "Add Place" Form
-
68
Starting Work on the "Update Place" Page
-
69
Adjusting the Input Component
-
70
Creating a Custom Form Hook (useForm)
-
71
Optional: More on (Custom) React Hooks
-
72
Adjusting the Form Hook
-
73
Fixing Minor Issues
-
74
Showing a Deletion Warning
-
75
Adding an "Auth" Page & Login Form
-
76
Adding Signup + "Switch Mode" Button
-
77
Adding Auth Context for App-wide State Management
-
78
Listening to Context Changes
-
79
Adding Authenticated & Unauthenticated Routes
-
80
More Auth Context Usage
-
81
Wrap Up
-
82
Useful Resources & Links
Productivity Hacks to Get More Done in 2018
— 28 February 2017
- Facebook News Feed Eradicator (free chrome extension) Stay focused by removing your Facebook newsfeed and replacing it with an inspirational quote. Disable the tool anytime you want to see what friends are up to!
- Hide My Inbox (free chrome extension for Gmail) Stay focused by hiding your inbox. Click "show your inbox" at a scheduled time and batch processs everything one go.
- Habitica (free mobile + web app) Gamify your to do list. Treat your life like a game and earn gold goins for getting stuff done!
