CÔNG TY CỔ PHẨN XUẤT NHẬP KHẨU THỦY SẢN CỬU LONG AN GIANG (CL-FISH CORP)-DL370

Địa chỉ: 90 Hùng Vương, P. Mỹ Quý, TP Long Xuyên, Tỉnh An Giang

Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

“CẢI TIẾN HOẶC LÀ CHẾT”

CÁC SƠ ĐỒ CẤU TRÚC NỘI DUNG

CHƯƠNG TRÌNH ĐÀO TẠO:
REACT, NODEJS, EXPRESS & MONGODB -
THE MERN FULLSTACK GUIDE
TRANG WEB UDEMY.COM

Duyệt Ban Giám Đốc Người thực hiện

Nguyễn Xuân Hải Lê Thị Mỹ Hạnh

07/2024
 CUU LONG FISH JOINT STOCK COMPANY (CL-FISH CORP.)- DL370
90 Hung Vuong street, My Quy Industrial Zone, LongXuyenCity, An Giang Province, Vietnam
Tel: (84)-296-3931000 Fax : (84)-296-3932446

BẢNG DANH MỤC CÁC SƠ ĐỒ CẤU TRÚC NỘI

DUNG CHƯƠNG TRÌNH ĐÀO TẠO:
REACT, NODEJS, EXPRESS & MONGODB -
THE MERN FULLSTACK GUIDE
TRANG WEB UDEMY.COM

* Tổng Cộng: 15 Sơ đồ

TÊN MÃ SỐ
STT TÊN SƠ ĐỒ
SƠ ĐỒ
1. Udemy.com

2. Introduction

3. The MERN Stack - Theory

4. Planning the App

5. React.js - A Refresher

6. React.js - Building the Frontend

7. Node.js & Express.js - A Refresher

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

9. Working with MongoDB & Mongoose - A Refresher

Connecting the Backend to the Database - MongoDB &
10.
Mongoose
11. Connecting the React.js Frontend to the Backend

1/2
 CUU LONG FISH JOINT STOCK COMPANY (CL-FISH CORP.)- DL370
90 Hung Vuong street, My Quy Industrial Zone, LongXuyenCity, An Giang Province, Vietnam
Tel: (84)-296-3931000 Fax : (84)-296-3932446

TÊN MÃ SỐ
STT TÊN SƠ ĐỒ
SƠ ĐỒ
12. Adding File Upload

13. Adding Authentication

14. Application Deployment

15. Roundup & Net Steps

Cửu Long, ngày 24 tháng 07 năm 2024

Duyệt BGĐ Người lập

Nguyễn Xuân Hải Lê Thị Mỹ Hạnh

2/2
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

REACT, NODEJS, EXPRESS & MONGODB -

THE MERN FULLSTACK GUIDE

1 Introduction

2 The MERN Stack - Theory

3 Planning the App

4 React.js - Building the Frontend

5 Node.js & Express.js - A Refresher

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

7 Working with MongoDB & Mongoose - A Refresher

8 Connecting the React.js Frontend to the Backend

9 Adding File Upload

10 Adding Authentication

11
10
Application Deployment

12 Roundup & Net Steps

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

INTRODUCTION

1 Introduction

2 What is the “MERN Stack”

3 MERN - A First Overview

4 Join our Online Learning Community

5 Course Outline

6 How To Get The Most Out Of The Course

7 Using the Course Resources

8 Course Setup
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

THE MERN STACK - THEORY

1 Module Introduction

2 Understanding the Big Picture

3 Diving Into the Frontend

4 Understanding the Backend

5 REST vs GraphQL

6 Connecting Node & React

7 MERN - Essentials

8 Creating our Development Environment & the Development

Servers
9 Diving Deeper Into the Code

10 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

PLANNING THE APP

1 Module Introduction

2
s App Idea
Understanding the General

3 Sketching out the Frontend

4 Data & API Endpoints used in our App

5 Required SPA Pages for the Frontend

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

REACT.JS - A REFRESHER
1 Module Introduction

2 What is React?

3 A Note About The NodeJS Version 10

4 React 18

5 Understanding JSX

6 Understanding Components

7 Working with Multiple Components

8 Using Props to pass Data between Components

9 Rendering Lists of Data

10 Handling Events

11
10
Efficient Child<=>Parent Communicatio

12 Working with "State"

13 More on State

14 Fetching User Input (Two-way Binding)

15
10
React.js Basics

16
10
Wrap Up

17
10
Useful Resources & Links
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

REACT.JS - BUILDING THE FRONTEND

1 Module Introduction

2 Important: Use React Script v5

3 Starting Setup, Pages & Routes

4 Adding a UsersList Page / Component

5 Adding a UserItem Component

6 Styling our App & More Components

7 Presentational vs Stateful Components

8 Adding a Main Header

9 Adding Navlinks

10 Implementing a Basic Desktop & Mobile Navigation

1111 Understanding Portals

12 Handling the Drawer State

13 Animating the Sidedrawer

14 Rendering User Places & Using Dynamic Route Segments

15 Getting Route Params

16 Adding Custom Buttons

17 Adding a Modal
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

18 Rendering a Map with Google Maps

19 Rendering a Map with Google Maps

20 Optional: More on the useEffect() Hook

21 Adding a Custom Form Input Component

t
22 Managing State in the Input Component

23 Adding Input Validation

s
24 Sharing Input Values & Adding Multiple Inputs

25 Managing Form-wide State

26 Finishing the "Add Place" Form

27 Starting Work on the "Update Place" Page

28 Adjusting the Input Component

s
29 Creating a Custom Form Hook (useForm)

30 Optional: More on (Custom) React Hooks

31 Adjusting the Form Hook

32 Fixing Minor Issues

10

33
10
Showing a Deletion Warning

34
10
Adding an "Auth" Page & Login Form
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

35 Adding Signup + "Switch Mode" Button

36 Adding Auth Context for App-wide State Management

37 Adding Authenticated & Unauthenticated Routes

Listening
t to Context Changes
38
k
t
39 More Auth Context Usage

40 Wrap Up

41 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

NODE.JS & EXPRESS.JS - A REFRESHER

1 Module Introduction

2 What is Node.js?

3 10 Code
Writing our First Node.js

4 Sending Requests & Responses

5 What is Express.js?

6 Adding Express.js

7 Understanding the Advantages of Express.js

8 How Code Execution Works

9 Node & Express Basics

10 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

NODE.JS & EXPRESS.JS - BUILDING OUR REST API

1 Module Introduction

2 Setting up our Project

3 Implementing Basic Routing

4 Adding Place-Specific Routes

5 Getting a Place By User ID

6 Handling Errors

7 Adding our own Error Model

8 Adding Controllers

9 Adding a POST Route & Using Postman

10 Handling Errors for Unsupported Routes

11 Adding Patch Routes to Update Places

12 Deleting Places

13 Finalizing the "Get Places by User ID" Resource

14 Setting Up the User Routes (Signup, Login, Get Users)

15 Validating API Input (Request Bodies)

16
10
Validating Patch Requests & User Routes

17
10
Using Google's Geocoding API to Convert an Address Into
Coordinates
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

18 Wrap Up

19 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

WORKING WITH MONGODB & MONGOOSE -

A REFRESHER
1 Module Introduction

2 What is MongoDB?

3 SQL vs NoSQL 10
4 Connecting React to a Database?

5 Setting Up MongoDB

6 Creating a Simple Backend & Connecting it to the Database

7 Creating a Document with MongoDB

8 Getting Data from the Database

9 Installing Mongoose

10 Understanding Models & Schemas

11
10
Creating a Product

o
12 Connecting to the Database & Saving the Product

13 Getting Products

14 Understanding the ObjectID

15
10
Wrap Up

16
10
Useful Resources & Links
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

CONNECTING THE BACKEND TO THE DATABASE

- MONGODB & MONGOOSE
1 Module Introduction

2 Installing Mongoose & Connecting our Backend to MongoDB

3 Creating the Place Schema & Model

4 Creating & Storing Documents in the Database

5 Getting Places by the PlaceID

6 Getting Places by the UserID

7 Updating Places

8 Deleting Places

9 How Users & Places are Related

10 Creating the User Model

11 Using the User Model for Signup

12 Adding the User Login

13 Getting Users

14 Adding the Relation between Places & Users

15 Creating Places & Adding it to a User

16
10
Deleting Places & Removing it From the User

17
10
Getting Places - An Alternative
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

18 Cleaning Up our Code

19 Wrap Up

20 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

CONNECTING THE REACT.JS FRONTEND

TO THE BACKEND
1 Module Introduction

2 Initial Setup

3 Sending a POST Request to the Backend

4 Optional: The fetch() API

5 Handling CORS Errors

6 Getting Started with Error Handling

7 Proper Error Handling in the Frontend

8 Sending a Login Request

9 Getting Users with a GET Request

10 Creating a Custom Http Hook

11 Improving the Custom Http Hook

12 Using the Http Hook to GET Users

13 Adding Places (POST)

14 Loading Places by User Id

15 Updating Places

16
10
Deleting Places

17
10
Fixing NavLinks & "My Places"
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

18 Final Adjustments

19 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

ADDING FILE UPLOAD

1 Module Introduction

2 Building an ImageUpload Component

3 Finishing & Using the ImageUpload Component (in a Form)

4 On the Backend: Using Multer to Save Files

5 Filtering Files on the Backend (Images Only!)

6 Wiring Frontend and Backend Up

7 Connecting Users to Images

8 Serving Images Statically

9 Uploading Images for New Places

10 Deleting Images When Places Get Deleted

1111 Wrap Up

12 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

ADDING AUTHENTICATION
1 Module Introduction

2 How Authentication Works (in a MERN App)

3 Hashing the User Password

4 Logging Users In (with Hashed Passwords)

5 Generating Tokens (JWT) on the Backend

6 Optional: More on JSON Web Tokens

7 Backend Route Protection with Auth Middleware

8 Using & Attaching JWT (Tokens) in React

9 Using Tokens to Update and Delete Places

10 Adding Authorization

11 Authorization on "Delete Places"

12 Storing the Token in the Browser Storage

13 Adding Auto-Login (Basic Version)

14 Managing the Token Expiration Date

15 Finished Auto-Login & Auto-Logout

16
10
Creating a Custom Authentication Hook

17
10
Authentication - Summary
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

18 General App Improvements

19 Authentication & Authorization

20 Useful Resources & Links

 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

APPLICATION DEPLOYMENT
1 Module Introduction

2 Deployment Steps Overview

3 10
Using Environment Variables (Node.js)

4 Environment Variables in React Apps

5 Preparing API Keys & Credentials

6 Building the React App

7 Adding Code Splitting to React

8 Understanding Possible Deployment Alternatives

9 Deploying a Standalone REST API (Example: Heroku)

10 Deploying a Standalone React SPA (Example: Firebase Hosting)

11
10
Fixing Style Issues

12 Deploying a Combined App

13 Storing Files/ Uploads

14 Wrap Up
 CUU LONG FISH JOINT STOCK COMPANY (CL- FISH CORP.) – DL 370
Address: 90 Hung Vuong, My Qui Industrial, Long Xuyen City, An Giang Province
Email: [email protected] Tel: +84-2963-932821 Web: www.clfish.com

ROUNDUP & NET STEPS

1 Course Roundup

Bonus Content
2