Phần 01 – Giới thiệu – cài đặt – và chạy chương trình React JS đầu tiên

• Giới thiệu React JS Xem video

• Cài đặt công cụ Xem video

• Chạy app react js đầu tiên Xem video

Phần 02 – Khái niệm và 4 cách định nghĩa component trong React JS

• Khái niệm component Xem video

• Định nghĩa component cách số 1 Xem video

• Định nghĩa component bằng Anonymous function và Arrow Function Xem video

• Định nghĩa component bằng Class Xem video

Phần 03 – Khái niệm và cách truyền thông tin qua Props trong Component

• Khái niệm props trong component Xem video

• Phương pháp số 2 thao tác với props trong component Xem video

Phần 04 – Thực hành JSX và hàm ‘Map’ thông dụng

• Cách viết JSX Xem video

• Cách sử dụng hàm map trong react js Xem video

Phần 05 – Thực hành kiến thức Component qua bài tập chuyển đổi giao diện từ bootstrap 4 sang React JS

• Thực hành ‘component hoá’ giao diện HTML bằng React JS Xem video

• Sử dụng Public_URL Xem video

• Sử dụng phím tắt cho việc tạo component Xem video

• Hoàn thiện phần giao diện từ bootstrap sang React js Component Xem video

Phần 06 – Hai cách viết tương tác trong React JS

• Cách viết tương tác với hàm ko có tham số trong React js Xem video

• Cách viết tổng quát tương tác trong React js Xem video

Phần 07 – Khái niệm State – thao tác với state

• Hiểu về State trong React js Xem video

• Thực hành với State trong React JS – Tạo hàm render Xem video

Phần 08 – Thay đổi state và sử dụng thuộc tính Default Value

• Thực hành với State trong React JS – Thay đổi State Xem video

• Sử dụng thuộc tính defaultValue trong JSX Xem video

Phần 09 – Học về LifeCycle của React Component

• LifeCycle trong React JS Xem video

• Sử dụng thuộc tính Ref trong JSX Xem video

• Sử dụng LifeCycle cơ bản với Mounting Xem video

• Sử dụng 4 hàm trong LifeCycle updation Xem video

• Sử dụng các hàm Update cho Props trong LifeCycle – phần 1 Xem video

• Sử dụng các hàm Update cho Props trong LifeCycle – phần 2 Xem video

Phần 10 – Học về React Router và thực hành tạo giao diện

• Giới thiệu React Router Xem video

• Tạo giao diện trang chủ Xem video

• Tạo giao diện chức năng tin tức Xem video

• Tạo giao diện trang liên hệ Xem video

Phần 11 – Chuyển đổi từ giao diện thành React Component

• Tạo component Home, Footer, Nav Xem video

• Chuyển 4 trang HTML thành 6 Component React js Xem video

Phần 12 – Tích hợp React Router để thao tác không cần load lại trang

• Cài đặt React Router và sử dụng điều hướng cơ bản Xem video

• Xử lý điều hướng bằng Router không cần load lại trang Xem video

• Đặt trạng thái cho thanh điều hướng như Gmail bằng activeClassName Xem video

Phần 13 – Tạo dữ liệu và load dữ liệu Json trong React JS

• Tạo file dữ liệu Json chuẩn bị cho xử lý URL Xem video

• Load dữ liệu và tạo NewsItem Xem video

Phần 14 – Ánh xạ dữ liệu vào Component và tạo đường dẫn SEO

• Mapping dữ liệu vào component Xem video

• Tạo đường dẫn thân thiện với SEO trong React JS Xem video

Phần 15 – Cách truyền tham số thông qua URL và nhận dữ liệu từ tham số truyền vào

• Cách nhận tham số truyền vào thông qua URL Parameter Xem video

• Cách phun dữ liệu ra giao diện dựa trên tham số truyền vào từ URL Xem video

Phần 16 – Hoàn thiện chức năng tin liên quan cho demo

• Xử lý phần NewsRelated component Xem video

• Hoàn thiện phần tin liên quan Xem video

Phần 17 – Cách gửi nhận dữ liệu bằng Form trong React JS

• Bắt đầu xử lý form gửi nhận dữ liệu với Redirect Xem video

• Cách nhận dữ liệu dưới dạng mảng trong react js form Xem video

• Tối ưu hoá code React JS Xem video

• Xử lý phần thẻ select trong React form Xem video

• Xử lý phần nhận thông tin file trong React form Xem video

Phần 18 – Project thiết kế backend với dữ liệu LocalStorage

• Giới thiệu Project làm giao diện backend quản lý User bằng React js Xem video

• Download giao diện Bootstrap Admin Xem video

Phần 19 – Thiết kế UX và cắt HTML CSS

• Thiết kế giao diện UX demo chức năng trước khi code Xem video

• Code HTML phần giao diện quản lý theo thiết kế phác thảo Xem video

• Hoàn thiện giao diện quản lý demo trực tiếp trên chrome Xem video

Phần 20 – Tạo Project React và chuyển đổi từ giao diện HTML sang React

• Tạo project Xem video

• Chuyển đổi giao diện thành 4 component Xem video

• Thanh lọc các warning cho project Xem video

Phần 21 – Xử lý các tương tác cơ bản

• Xử lý các tương tác cơ bản trên Frontend bằng React Js Xem video

• Xử lý hiển thị Form thông báo ứng với trường hợp chung component Xem video

Phần 22 – Thực hành kết nối các component cha con và component ngang cấp

• Cách kết nối từ component con sang component bố trong React Js Xem video

• Cách kết nối giữa hai component ngang cấp Xem video

• Hoàn thiện phần thực hành thao tác giữa các component ngang cấp Xem video

Phần 23 – Tạo dữ liệu cho project và đẩy dữ liệu ra giao diện

• Tạo dữ liệu cho project và in test Xem video

• Đẩy dữ liệu ra bảng sử dụng Map Xem video

Phần 24 – Logic các bước làm và cách lập trình chức năng tìm kiếm

• Tự động co dãn giao diện sử dụng col Xem video

• Kết nối component bố và con thông qua props Xem video

• Lấy text tìm kiếm trong Search Component đẩy về App Component Xem video

Phần 25 – Lập trình chức năng thêm mới thành viên bằng React JS

• Logic các bước thực hiện chức năng thêm mới thành viên Xem video

• Lấy dữ liệu thành viên được thêm mới bằng sự kiện onChange Xem video

• Đẩy dữ liệu vào state Xem video

• Lấy nội dung gửi lên App và đóng gói đối tượng Xem video

• Cập nhật thông tin thành viên mới vào dữ liệu Json Xem video

Phần 26 – Hoàn thiện chức năng thêm mới bằng cách tự sinh ID khi tạo mới dữ liệu

• Xoá trắng nội dung sau khi thêm mới Xem video

• Tự tạo id không trùng lặp bằng UUID Xem video

Phần 27 – Phân tích logic thực hiện chức năng sửa thông tin

• Chức năng sửa thông tin thành viên Xem video

• Kết nối component để truyền dữ liệu Xem video

• Truyền thông tin user cần sửa từ tableDataRow lên App Xem video

Phần 28 – Tạo Form sửa dữ liệu và load nội dung khi được kích hoạt

• Tạo form sửa thông tin của người dùng Xem video

• Tạo hàm thay đổi trạng thái hiển thị của form Xem video

• Load nội dung cần sửa vào form Xem video

Phần 29 – Hoàn thiện chức năng sửa thông tin thành viên

• Sử dụng state lưu trữ thông tin trong quá trình sửa thông tin Xem video

• Chuyển dữ liệu đã sửa lên Component App Xem video

• Hoàn thiện chức năng sửa dữ liệu Xem video

Phần 30 – Lập trình chức năng xóa thông tin thành viên

• Gửi dữ liệu xoá lên component cha Xem video

• Xoá thông tin người dùng sử dụng hàm filter trong ES2015 Xem video

Phần 31 – Dữ liệu hóa ứng dụng với LocalStorage

• Bộ 3 hàm thao tác với localStorage – set – get – remove Xem video

• Lưu trữ dữ liệu vào localStorage và hoàn thiện ứng dụng Xem video

Phần 32 – Cách đóng gói ứng dụng và chạy ứng dụng trên Xamp server

• Đóng gói ứng dụng chạy trên server với npm run build Xem video

• Cách chạy ứng dụng react app trên Xamp Xem video

• Cách chạy React App băng cách sử dụng dòng lệnh Xem video

Phần 33 – Cách đồng bộ code, download code, chạy code và quản lý bằng Github

• Cách đồng bộ code, download code và quản lý code với Git trên Visual studio code – Tạo tài khoản github Xem video

• Cách tạo tài khoản, tạo repo, upload lên github Xem video

• Cách tải code và chạy code Xem video

Phần 34 – Bắt đầu với Redux – what & why

• Giới thiệu Redux Xem video

• Sử dụng toán tử 3 chấm Xem video

• Cách viết tắt ghi đè và thêm mới với toán tử 3 chấm Xem video

Phần 35 – Phân tích cấu trúc một ứng dụng Redux

• Cấu trúc của một store Redux Xem video

• Chạy thử cấu trúc redux cơ bản để hiểu cách hoạt động của store – reducer – action Xem video

Phần 36 – Thực hành với Redux và hàm Subscribe

• Thực hành với Redux Store Xem video

• Thực hành với Redux Store với chỉ thị xoá bằng filter Xem video

• Hàm Subscribe trong store Xem video

Phần 37 – Tạo ứng dụng kết hợp React – Redux

• Cài đặt plugin React-redux ES6 snippet Xem video

• Tạo ứng dụng kết hợp React – Redux Xem video

Phần 38 – Cách sử dụng hàm MapDispatchToProps

• Truy xuất dữ liệu trong store từ component con Xem video

• Cách chia tách Reducer thành từng file Xem video

• Cách gọi hàm trong Store từ component con Xem video

• Hàm mapDispatchToProps Xem video

Phần 39 – Giới thiệu Project mới với Redux và Firebase

• Tổng kết phần cơ bản về cách viết code với redux Xem video

• Bước 1 – Tạo giao diện ứng dụng trong 5 phút Xem video

Phần 40 – Học cách sử dụng Firebase trong 30 phút

• Học nhanh cách sử dụng cơ sở dữ liệu FireBase Xem video

• Thực hành thao tác dữ liệu với Firebase Xem video

Phần 41 – Thực hành thêm sửa xóa dữ liệu Firebase từ React JS

• Kết nối React js – Firebase Xem video

• Lấy dữ liệu của bảng dữ liệu thông qua DataSnapshot Xem video

• Sửa dữ liệu trong Firebase Xem video

• Thêm dữ liệu vào Firebase bằng 2 cách Xem video

Phần 42 – Cài đặt redux – khởi tạo store – khởi tạo reducer

• Bắt đầu xử lý dữ liệu cho ứng dụng quản lý ghi chú Xem video

• Bước số 2 – click vào nút lấy được dữ liệu Xem video

• Bước 3 – Đẩy dữ liệu lên firebase sử dụng React js thuần Xem video

• Cài đặt redux – khởi tạo store – khởi tạo reducer Xem video

Phần 43 – Thực hành kết nối Store và Component hoàn thiện chức năng thêm mới dữ liệu vào Firebase

• Ba bước cơ bản kết nối store và component Xem video

• Truyền tham số vào xử lý trong Store Xem video

Phần 44 – Chức năng in dữ liệu ra danh sách

• Hoàn thiện chức năng thêm mới dữ liệu vào firebase với redux Xem video

• Xử lý gọi dữ liệu ra danh sách bằng redux – bước 1 Xem video

• Xử lý gọi dữ liệu ra danh sách bằng redux – bước 2 Xem video

Phần 45 – Thực hành kết nối App và NoteItem với Redux Store

• Kết nối App với Store Xem video

• Kết nối NoteItem với Store Xem video

Phần 46 – Chức năng sửa dữ liệu

• Thực hành chức năng sửa ghi chú với redux Xem video

• Đẩy dữ liệu cần sửa lên trên Store và theo dõi với hàm subscribe Xem video

• Đẩy dữ liệu cần sửa hiện thị lên Form Xem video

• Lấy dữ liệu ban đầu bằng cách áp dụng React lifeCycle Xem video

• Đẩy dữ liệu lên trên store khi click vào nút ‘Lưu’ Xem video

• Hoàn thiện chức năng sửa ghi chú của ứng dụng Xem video

Phần 47 – Chức năng xoá dữ liệu

• Hoàn thiện chức năng xoá ghi chú Xem video

Phần 48 – Xử lý điều hướng sử dụng Store

• Xử lý điều hướng sử dụng Store Xem video

• Hoàn thiện chức năng điều hướng thêm mới ghi chú ko cần load lại trang Xem video

Phần 49 – Tuỳ biến tiêu đề theo chức năng

• Luyện tập Redux Store qua trường hợp tuỳ biến tiêu đề theo chức năng Xem video

• Hiển thị thông báo các thao tác bằng plugin của React js Xem video

Phần 50 – Lập trình phần hiển thị thông báo cho các thao tác chức năng

• Định nghĩa state trong Store qui định việc hiển thị của thông báo Xem video

• Bật tắt thông báo tương ứng với thao tác chức năng trong ứng dụng Xem video

• Xử lý tắt thông báo bằng hai cách Xem video

Phần 51 – Tổng kết

• Truyền tham số nội dung vào thông báo thông qua state Xem video

• Hoàn thiện chức năng thông báo – bài tập – và tổng kết Xem video

Phần 52 – Cài đặt và tạo cơ sở dữ liệu PostgreSQL

• Giới thiệu phần Node JS kết hợp với React JS Xem video

• Cài đặt cơ sở dữ liệu PostgreSQL version 10 Xem video

• Thực hành tạo cơ sở dữ liệu – Tạo bảng – Insert dữ liệu với PostgreSQL Xem video

Phần 53 – Khởi tạo project

• Cài đặt các phần mềm cần sử dụng – Khởi tạo project Xem video

• Khởi tạo frontend React Js Xem video

Phần 54 – Kết nối Node js và PostgreSql

• Đổi cổng kết nối của node js Xem video

• Kết nối Node js và cơ sở dữ liệu Xem video

Phần 55 – Phân tích logic của một ứng dụng

• Lấy dữ liệu từ postgreSql thông qua Node js Xem video

• Phân tích logic của một ứng dụng Javascript Fullstack Xem video

Phần 56 – Dựng frontend bằng React js

• Tạo giao diện frontend sử dụng bootstrap 4 Xem video

• Sử dụng React JS làm frontend Xem video

• Kết nối các Component trong React JS Xem video

Phần 57 – Giao tiếp dữ liệu từ Node js sang React JS

• Kết nối Node JS và React JS thông qua axios Xem video

• Cách hứng dữ liệu từ NoteJS trong React JS Xem video

Phần 58 – Giao tiếp dữ liệu từ React js sang Node JS

• Gửi dữ liệu từ React JS lên Node JS Xem video

• Xử lý thêm dữ liệu trong Node JS Xem video

• Hoàn thiện thao tác thêm dữ liệu trong React JS Xem video

• Tạo form nhập liệu với React JS Xem video

• Lấy dữ liệu trong React JS Xem video

• Chuyển dữ liệu từ React JS về Node JS Xem video

• Setup proxy cho kết nối riêng của backend và frontend Xem video

• Tự động update nội dung khi thêm mới – phần 1 Xem video

• Tự động update nội dung khi thêm mới – phần 2 Xem video

Phần 59 – Tổng kết ứng dụng

• Cách quản lý code bằng github – download và chạy file project Xem video

• Tổng kết ứng dụng Node React Xem video