Lập trình Frontend - ReactJS

-Tổng quan, giới thiệu về lập trình web
-Giới thiệu về khóa học, lộ trình
-Giới thiệu git, github và 1 số lệnh cơ bản để thao tác với git
-Giới thiệu và làm quen một số thẻ trong HTML

-Giới thiệu về HTML, các thẻ hay sử dụng trong thực tế
-Dùng các thẻ HTML thực hành tạo một số component đơn giản
-Các cách viết CSS trong dự án (Inline, Internal, External)
-Giới thiệu các thuộc tính cơ bản hay dùng trong CSS
-Cách đặt tên CSS ( BEM, ...)

-Tìm hiểu về Box Model và Position để căn chỉnh CSS cho các thành phần trong HTML

- Giới thiệu về thuộc tính display và flex để bố cục website thêm linh hoạt và đẹp mắt
- Phân biệt được các giá trị inline, block, inline-block

- Giới thiệu về Responsive trong CSS, tầm quan trọng tại sao phải biệt cách sử dụng Responsive
để làm cho một website có thể sử dụng được dưới mọi thiết bị
- Sử dụng boostrap để làm 1 vài component hay gặp: card product, ...
- Áp dụng các kiến thức để xây dựng layout 1 trang web

- Làm tiếp bài thực hành
- Hướng dẫn deploy lên github
- Làm bài kiểm tra cuối module

-Cách khởi tạo biến trong js (phân biệt 3 từ khóa var, let và const, biến cục bộ, biến toàn cục)
-Datatypes (các kiểu dữ liệu trong JS, giới thiệu 5 kiểu dữ liệu nguyên thủy: number, string, boolean, null và undefined)
-Toán tử trong JS
-Comment trong JS
-Giới thiệu về scope trong JS

-Cách sử dụng vòng lặp if, if-else, if-else lồng nhau
-Cách sử dụng và phân biệt các vòng lặp for, while, do-while
-Giới thiệu về toán tử 3 ngôi.

-Array là gì
-Cú pháp khai báo
-Các thao tác trên array (CRUD)
-Duyệt mảng
-Tập trung vào bài tập thực hành để học viên quen hơn

-Object là gì
-Các thao tác với object (CRUD)
-Duyệt object
-Điểm khác nhau giữa kiểu dữ liệu tham chiếu và kiểu dữ liệu nguyên thủy
-Function là gì, cách khai báo và sử dụng function
-Giới thiệu về callback

- DOM và Event trong JS

-Tim hiểu về Event loop trong JS
-Các cách xử lý bất đồng bộ trong JS (callback, promise, async-await)
-Cách sử dụng try-catch"

-Local storage, session storage, cookie
-Một số thuật toán hay dùng và clean code
-Giới thiệu thêm các kiến thức bổ trợ (location, history trên bwoser)
-Debug trong JS

-Áp dụng các kiến thức html, css và js đã học để làm 1 project quản lý sinh viên với các chức năng:
+C: Thêm mới sinh viên
+R: In ra toàn bộ thông tin sinh viên đang có
+U: Update thông tin sinh viên
+D: Xóa thông tin sinh viên
+S: Tìm kiếm thông tin sinh viên
(Dựng giao diện có thể sử dụng boostrap để tiết kiệm thời gian)
(Nếu còn thời gian có thể làm thêm chức năng sắp xếp)

-Giới thiệu API là gì, cách sử dụng API
-Sử dụng mock api để lưu trữ thông tin
-Deploy project, làm bài test

-Tìm hiểu và thực hành các chức năng trong ES6
-Một số tính năng trong các phiên bản ECMAScript khác (nullish operator, optional chaning)

-Tìm hiểu về các kiểu dữ liệu cơ bản trong typescript
-Kiểu dữ liệu tĩnh (Type Annotations).
-Interfaces và Type Aliases.
-Generics.
-Tìm hiểu về cách sử dụng modules và namespaces để tổ chức mã và giải quyết vấn đề xung đột tên.
-Hiểu về cách sử dụng decorator để thêm metadata vào các lớp và phương thức trong TypeScript.
-Tìm hiểu về các loại kiểu dữ liệu phức tạp như union types, intersection types, conditional types, mapped types, và các kỹ thuật tiên tiến khác.
-Sử dụng TypeScript Compiler (tsc) để biên dịch mã TypeScript thành JavaScript.
-Tìm hiểu về các công cụ hỗ trợ phát triển như Visual Studio Code, Webpack, hoặc Gulp để làm việc với TypeScript.
-Hiểu cách tạo hoặc sử dụng các file type definitions (.d.ts) để mô tả kiểu dữ liệu của các thư viện bên thứ ba.
-Tìm hiểu về cách sử dụng async/await và Promise trong TypeScript để xử lý bất đồng bộ.
-Tìm hiểu về cách xử lý lỗi và sử dụng kiểu dữ liệu Error trong TypeScript.
- Thực hành và nắm chắc OOP trong TypeScript

-Tìm hiểu về các kiểu dữ liệu cơ bản trong typescript
-Kiểu dữ liệu tĩnh (Type Annotations).
-Interfaces và Type Aliases.
-Generics.
-Tìm hiểu về cách sử dụng modules và namespaces để tổ chức mã và giải quyết vấn đề xung đột tên.
-Hiểu về cách sử dụng decorator để thêm metadata vào các lớp và phương thức trong TypeScript.
-Tìm hiểu về các loại kiểu dữ liệu phức tạp như union types, intersection types, conditional types, mapped types, và các kỹ thuật tiên tiến khác.
-Sử dụng TypeScript Compiler (tsc) để biên dịch mã TypeScript thành JavaScript.
-Tìm hiểu về các công cụ hỗ trợ phát triển như Visual Studio Code, Webpack, hoặc Gulp để làm việc với TypeScript.
-Hiểu cách tạo hoặc sử dụng các file type definitions (.d.ts) để mô tả kiểu dữ liệu của các thư viện bên thứ ba.
-Tìm hiểu về cách sử dụng async/await và Promise trong TypeScript để xử lý bất đồng bộ.
-Tìm hiểu về cách xử lý lỗi và sử dụng kiểu dữ liệu Error trong TypeScript.
- Thực hành và nắm chắc OOP trong TypeScript

-Xây dựng project ReactJS
-Cấu trúc folder project (tạo bằng toolchain CRA)
-Tim hiểu về JSX,so sánh JSX và HTML
- Component là gì?
- Thực hành tạo các Component hay được dùng

-Props cơ bản
-Cách truyền dữ liệu từ component cha xuống component con
-Validate props (sử dụng props type)
-Default props
-List rendering
-Rendering có điều kiện

-Event trong ReactJS
-Cách khai báo, sử dụng state
-So sánh state và props

-Hướng dẫn cài đặt và sử dụng thư viện routing
-Setup routing cho project thực hành
-Hướng dẫn setup routing cho project cuối khóa

-Sử dụng formik và yup để validate form
-Giới thiệu thư viện Ant Design và demo 1 số component có trong Ant Design
-Giới thiệu thư viện Reactstrap và demo 1 số component có trong Reactstrap
-Thực hành làm form đăng nhập, đăng ký

-Tìm hiểu về side effect
-Giới thiệu về life cycle trong react
-Call Api trong react
-Cách sử dụng useEffect (sự khác nhau giữa các dependency khi truyền vào useEffect)
-Tìm hiểu công dụng và cách sử dụng useMemo, useCallback và react memo

-Tìm hiểu công dụng và cách sử dụng useRef
-So sánh biến thường, biến được tạo từ useRef và biến được tạo từ useState
-Sử dụng useContext để lưu trữ và sử dụng dữ liệu

-Giới thiệu các hook khác
-Hướng dẫn tạo 1 custom hook

-Hướng dẫn cài đặt và sử dụng Redux
-Thực hành làm CRUD với redux

-Tìm hiểu và hướng dẫn cài đặt, sử dụng react query

-Thực hành làm project blog.
-Các chức năng có trong project blog:
1. Quản lý bài viết.
2. Bình luận và phản hồi.
3. Tìm kiếm và lọc.
4. Thống kê và báo cáo.
5. Bảng tin và thông báo.
...
Bổ sung thêm các chức năng tùy thuộc vào tình hình học của lớp

-Thực hành làm project blog.
-Các chức năng có trong project blog:
1. Quản lý bài viết.
2. Bình luận và phản hồi.
3. Tìm kiếm và lọc.
4. Thống kê và báo cáo.
5. Bảng tin và thông báo.
...
Bổ sung thêm các chức năng tùy thuộc vào tình hình học của lớp

-Hỗ trợ, giải đáp và hướng dẫn các bạn làm các nội dung liên quan đến frontend trong project cuối khóa
-Test cuối module + ES6 và Type script