Scribd
Upload
21 views

Lesson 1 Introduction

The document outlines a course on front-end web development with React. It describes 5 modules that will be covered including React basics, frontend UI with Material UI, Redux, communicating with APIs, and TypeScript. It also provides information on evaluation strategy, requirements to pass the course, and includes an introduction to full stack development and setting up development environments.

Uploaded by

anphuchoa2912
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Lesson 1 Introduction

The document outlines a course on front-end web development with React. It describes 5 modules that will be covered including React basics, frontend UI with Material UI, Redux, communicating with APIs, and TypeScript. It also provides information on evaluation strategy, requirements to pass the course, and includes an introduction to full stack development and setting up development environments.

Uploaded by

anphuchoa2912
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

INTRODUCTION

LESSON 1 – MR. MINH SANG

1
COURSE
INTRODUCTION

2
FRONT-END WEB DEVELOPMENT WITH REACT

 ReactJs basic
 Frontent UI (Material UI)
 Redux
 Communicate API
 Optional: different way to build reactjs web instead of javascript

3
EVALUATION STRATEGY

 Must attend more than 80% of contact hours (if not, not allow to take exam).
 Evaluating
• 02 Progress Tests (PT: 15%)
• 08 Labs (L: 20%)
• 01 Assignment (AS: 15%)
• 01 Practical Exam (PE: 20%)
• (Practical exam pass only when the score of PE >= 4))
• Final Exam (FE: 30%)
• Final result = 15%(PT) + 20%(L) + 15%(AS) + 20%(PE) + 30% (FE)
 Pass:
• Every on-going assessment component > 0
• Final Exam score >= 4 and 4
• Final result >= 5
MODULE 1: REACTJS BASIC

 Install React app


 React Components
Lab1
 React Hook
Lab 2
 React Router, Single Page Applications
Lab 3

5
MODULE 2: FRONTEND UI

 Install/ configure Material UI


 Material Components
Lab 4
 CSS Preprocessor
Lab 5

6
MODULE 3: REDUX

 Redux
 React form
Lab 6

7
MODULE 4: COMMUNICATE API

 Client-Server Communication
 Brief Representational State Transfer (REST)
 FETCH & React Animation
Lab 7

8
MODULE 5: TYPESCRIPT

 Configure
 Function
Lab 8

9
FULL STACK WEB
DEVELOPMENT
AND SETUP
DEVELOPMENT
EVIRONMENT 10
FULL STACK WEB DEVELOPMENT AND SETUP DEVELOPMENT
EVIRONMENT

 Understand what is meant by full stack in the context of web development


 Distinguish between front-end, back-end and full stack web development
 Set up a Git repository and perform basic Git operations
 Set up and use online Git repositories
 Use Node-based modules to perform basic operations.

11
WHAT IS FULL STACK WEB DEVELOPMENT?

 Front end / Client-side


• HTML, CSS and Javascript
 Back end / Server-side
• Various technologies and approaches – PHP, Java, ASP.NET, Ruby, Python

12
TRADITIONAL WEB DEVELOPMENT

13
FULL STACK JAVASCRIPT DEVELOPMENT

14
FULL STACK WEB DEVELOPMENT

15
SUMMARY

 Understand what is meant by full stack in the context of web development


 Distinguish between front-end, back-end and full stack web development

16

You might also like