Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
MERN Stack
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

Loại khoá học: Web Development

Build fullstack React.js applications with Node.js, Express.js & MongoDB (MERN) with this project-focused course.

image
50.000 VND
1.899.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

We built the bestselling React course on 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!

Bạn sẽ học được gì

Learn how to connect ReactJS with NodeJS, Express & MongoDB

Build an entire project from scratch!

Refresh the basics about ReactJS, NodeJS, Express and MongoDB

Learn how to implement Authentication & Authorization

Add File Upload to ReactJS + Node/ Express Applications

Yêu cầu

  • Basic knowledge about ReactJS is required
  • ReactJS Hooks knowledge is recommended
  • Basic knowledge about Node, Express and MongoDB is recommended but not a must-have
  • NO expert React knowledge or MERN knowledge is required

Nội dung khoá học

14 sections

Introduction

7 lectures
Introduction
01:47
What is the "MERN Stack"?
07:31
MERN - A First Overview
02:11
Join our Online Learning Community
00:25
Course Outline
02:13
How To Get The Most Out Of The Course
02:54
Using the Course Resources
00:33

The MERN Stack - Theory

10 lectures
Module Introduction
01:18
Understanding the Big Picture
08:04
Diving Into the Frontend
04:06
Understanding the Backend
05:10
REST vs GraphQL
07:54
Connecting Node & React
05:50
MERN - Essentials
7 questions
Creating our Development Environment & the Development Servers
11:24
Diving Deeper Into the Code
09:45
Useful Resources & Links
00:13

Planning the App

5 lectures
Module Introduction
04:50
Understanding the General App Idea
02:35
Sketching out the Frontend
09:37
Data & API Endpoints used in our App
05:19
Required SPA Pages for the Frontend
02:56

React.js - A Refresher

18 lectures
Module Introduction
01:12
What is React?
03:13
A Note About The NodeJS Version
00:21
React 18
00:53
Setting Up a Starting Project
04:03
Understanding JSX
05:31
Understanding Components
02:50
Working with Multiple Components
07:04
Using Props to pass Data between Components
06:52
Rendering Lists of Data
04:30
Handling Events
07:24
Efficient Child<=>Parent Communication
04:38
Working with "State"
05:54
More on State
04:20
Fetching User Input (Two-way Binding)
05:52
React.js Basics
5 questions
Wrap Up
02:11
Useful Resources & Links
00:11

React.js - Building the Frontend

40 lectures
Module Introduction
02:32
Starting Setup, Pages & Routes
17:21
Adding a UsersList Page / Component
09:29
Adding a UserItem Component
03:41
Styling our App & More Components
07:17
Presentational vs Stateful Components
03:22
Adding a Main Header
09:46
Adding Navlinks
05:05
Implementing a Basic Desktop & Mobile Navigation
04:20
Understanding Portals
03:00
Handling the Drawer State
04:07
Animating the Sidedrawer
05:14
Rendering User Places & Using Dynamic Route Segments
16:12
Getting Route Params
02:16
Adding Custom Buttons
02:53
Adding a Modal
17:25
Rendering a Map with Google Maps
14:36
Continuing without a Credit Card
01:08
Optional: More on the useEffect() Hook
01:21
Adding a Custom Form Input Component
09:42
Managing State in the Input Component
11:51
Adding Input Validation
08:02
Sharing Input Values & Adding Multiple Inputs
08:11
Managing Form-wide State
09:11
Finishing the "Add Place" Form
03:19
Starting Work on the "Update Place" Page
08:45
Adjusting the Input Component
02:38
Creating a Custom Form Hook (useForm)
11:02
Optional: More on (Custom) React Hooks
00:55
Adjusting the Form Hook
11:19
Fixing Minor Issues
04:32
Showing a Deletion Warning
05:27
Adding an "Auth" Page & Login Form
09:05
Adding Signup + "Switch Mode" Button
11:18
Adding Auth Context for App-wide State Management
07:04
Listening to Context Changes
02:11
Adding Authenticated & Unauthenticated Routes
05:49
More Auth Context Usage
02:44
Wrap Up
01:08
Useful Resources & Links
00:11

Node.js & Express.js - A Refresher

10 lectures
Module Introduction
01:40
What is Node.js?
02:55
Writing our First Node.js Code
08:20
Sending Requests & Responses
13:34
What is Express.js?
01:15
Adding Express.js
11:39
Understanding the Advantages of Express.js
08:32
How Code Execution Works
03:16
Node & Express Basics
5 questions
Useful Resources & Links
00:12

Node.js & Express.js - Building our REST API

19 lectures
Module Introduction
02:17
Setting up our Project
02:29
Implementing Basic Routing
11:21
Adding Place-Specific Routes
09:39
Getting a Place By User ID
04:37
Handling Errors
10:51
Adding our own Error Model
04:45
Adding Controllers
06:42
Adding a POST Route & Using Postman
13:21
Handling Errors for Unsupported Routes
02:13
Adding Patch Routes to Update Places
08:03
Deleting Places
04:07
Finalizing the "Get Places by User ID" Resource
02:44
Setting Up the User Routes (Signup, Login, Get Users)
13:23
Validating API Input (Request Bodies)
10:19
Validating Patch Requests & User Routes
06:14
Using Google's Geocoding API to Convert an Address Into Coordinates
16:20
Wrap Up
01:27
Useful Resources & Links
00:12

Working with MongoDB & Mongoose - A Refresher

16 lectures
Module Introduction
01:15
What is MongoDB?
01:26
SQL vs NoSQL
03:41
Connecting React to a Database?
01:44
Setting Up MongoDB
05:26
Creating a Simple Backend & Connecting it to the Database
05:50
Creating a Document with MongoDB
07:52
Getting Data from the Database
06:11
Installing Mongoose
01:31
Understanding Models & Schemas
03:51
Creating a Product
03:23
Connecting to the Database & Saving the Product
07:28
Getting Products
04:12
Understanding the ObjectID
03:18
Wrap Up
01:42
Useful Resources & Links
00:09

Connecting the Backend to the Database - MongoDB & Mongoose

20 lectures
Module Introduction
01:27
Installing Mongoose & Connecting our Backend to MongoDB
06:32
Creating the Place Schema & Model
06:34
Creating & Storing Documents in the Database
07:26
Getting Places by the PlaceID
08:07
Getting Places by the UserID
05:53
Updating Places
06:10
Deleting Places
03:43
How Users & Places are Related
01:34
Creating the User Model
06:27
Using the User Model for Signup
11:43
Adding the User Login
04:19
Getting Users
05:37
Adding the Relation between Places & Users
05:03
Creating Places & Adding it to a User
13:59
Deleting Places & Removing it From the User
07:47
Getting Places - An Alternative
05:38
Cleaning Up our Code
02:32
Wrap Up
01:43
Useful Resources & Links
00:09

Connecting the React.js Frontend to the Backend

19 lectures
Module Introduction
01:31
Initial Setup
01:01
Sending a POST Request to the Backend
10:30
Optional: The fetch() API
00:35
Handling CORS Errors
06:58
Getting Started with Error Handling
07:59
Proper Error Handling in the Frontend
05:05
Sending a Login Request
03:35
Getting Users with a GET Request
10:22
Creating a Custom Http Hook
10:50
Improving the Custom Http Hook
08:29
Using the Http Hook to GET Users
03:47
Adding Places (POST)
13:06
Loading Places by User Id
07:59
Updating Places
12:23
Deleting Places
07:40
Fixing NavLinks & "My Places"
01:06
Final Adjustments
03:42
Useful Resources & Links
00:10

Adding File Upload

12 lectures
Module Introduction
01:13
Building an ImageUpload Component
10:36
Finishing & Using the ImageUpload Component (in a Form)
12:16
On the Backend: Using Multer to Save Files
08:52
Filtering Files on the Backend (Images Only!)
03:03
Wiring Frontend and Backend Up
05:09
Connecting Users to Images
06:19
Serving Images Statically
03:33
Uploading Images for New Places
06:08
Deleting Images When Places Get Deleted
02:59
Wrap Up
01:32
Useful Resources & Links
00:10

Adding Authentication

20 lectures
Module Introduction
01:08
How Authentication Works (in a MERN App)
05:01
Hashing the User Password
05:31
Logging Users In (with Hashed Passwords)
03:10
Generating Tokens (JWT) on the Backend
09:01
Optional: More on JSON Web Tokens
00:07
Backend Route Protection with Auth Middleware
12:48
Using & Attaching JWT (Tokens) in React
07:17
Using Tokens to Update and Delete Places
02:26
Adding Authorization
07:35
Authorization on "Delete Places"
03:01
Storing the Token in the Browser Storage
06:09
Adding Auto-Login (Basic Version)
05:13
Managing the Token Expiration Date
04:54
Finished Auto-Login & Auto-Logout
08:03
Creating a Custom Authentication Hook
03:45
Authentication - Summary
01:49
General App Improvements
04:40
Authentication & Authorization
3 questions
Useful Resources & Links
00:10

Application Deployment

14 lectures
Module Introduction
00:55
Deployment Steps Overview
02:29
Using Environment Variables (Node.js)
08:25
Environment Variables in React Apps
07:26
Preparing API Keys & Credentials
05:47
Building the React App
04:31
Adding Code Splitting to React
07:14
Understanding Possible Deployment Alternatives
03:49
Deploying a Standalone REST API (Example: Heroku)
10:46
Deploying a Standalone React SPA (Example: Firebase Hosting)
09:12
Fixing Style Issues
01:35
Deploying a Combined App
10:24
Storing Files/ Uploads
02:20
Wrap Up
00:45

Roundup & Next Steps

2 lectures
Course Roundup
00:55
Bonus Content
00:17

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi