Khóa Học Reactjs Cho Người Mới Bắt Đầu Hậu Nguyễn - Easy Frontend

Share Khóa học Hậu Nguyễn ReactJS cho người mới bắt đầu 2020 của giảng viên Hậu Nguyễn

Bạn Sẽ Học Được Gì?

✅ Kiến thức nền tảng của ReactJS

✅ Làm giao diện nhanh và đơn giản với Material UI

✅ Thiết kế và triển khai API cho một dự án thực tế

✅ Tự tay cài đặt phần đăng nhập, đăng ký cho dự án (điều mà những bạn mới ít có cơ hội được làm)

✅ Quản lý form hiệu quả với React Hook Form

✅ Quản lý state với Redux Toolkit

✅ Cách tổ chức files và folders như thế nào để dễ quản lý

✅ Cùng mình code một dự án Shopping Cart để các bạn thấy được việc vận dụng kiến thức vào thực hành như thế nào.

Giới Thiệu Khóa Học

Xin chào mọi người, sau một thời gian hoạt động trên kênh Youtube – Easy Frontend,

mình được mọi người yêu cầu làm một khoá học ReactJS đầy đủ để mọi người tham khảo đầy đủ, trọn vẹn về ReactJS, giúp các bạn tự tin hơn khi làm việc với ReactJS.

Với mong muốn góp một chút công sức vào việc phát triển cộng đồng Frontend Việt Nam, nên mình đã quyết tâm thực hiện khoá học này.

Khóa học được tổ chức theo thứ tự sau:

Thấu hiểu việc khó khăn khi theo đuổi một khoá học dài lang mang, nên mình đã nỗ lực tinh gọn phần lý thuyết, để mọi người nắm được ý cơ bản xong vào ngay phần thực hành. Hi vọng mọi người sẽ hứng thú hihi

Hi vọng khoá học mang lại nhiều kiến thức hay, sát với thực tế để các bạn có thể vận dụng ngay vào trong dự án của mình.

Chúc các bạn có một trải nghiệm học thật vui và thú vị nhé!

Nội dung khóa học

01 Tổng quan về ReactJS

001 React là gì_.mp4

002 4 cách khác nhau để code ReactJS.mp4

02 Cài đặt môi trường làm việc

001 Cài đặt và cấu hình cho VSCode.mp4

002 Cài đặt và cấu hình cho Git.mp4

003 Tạo ReactJS project với Create React App.mp4

004 Cấu trúc folder của ReactJS project.mp4

03 Setup auto deploy với Vercel

001 2 cách khác nhau để clone một Github repository.mp4

002 Tạo SSH key dưới local.mp4

003 Thêm SSH key vào tài khoản Github.mp4

004 Push code lần đầu lên Github.mp4

005 Cấu hình auto deploy với Vercel.mp4

04 Tổng quan về component

001 JSX - Cú pháp được sử dụng trong ReactJS.mp4

002 Mount component lên DOM với ReactDOM.render().mp4

003 Component - Trung tâm vũ trụ của ReactJS.mp4

004 Phân biệt giữa Container và Presentational component.mp4

005 Bài tập phân tích cây component 1.mp4

006 Bài tập phân tích cây component 2.mp4

007 Bài tập phân tích cây component 3.mp4

05 Props và Composition

001 Props là gì_ Composition là gì_.mp4

002 Props type checking.mp4

003 Render elements in reactjs.mp4

004 Folder structure.mp4

005 Lab_ TodoList.mp4

006 Lab_ AlbumList.mp4

06 State và dữ liệu trong ReactJS

001 State là gì_.mp4

002 Lab_ Active Todo.mp4

003 Lab_ Filter Todo.mp4

004 So sánh giữa Props và State.mp4

07 Component life cycles

001 Tổng quan về các life cycles.mp4

002 constructor().mp4

003 componentDidMount().mp4

004 componentWillUnmount().mp4

005 componentDidUpdate().mp4

006 Fix error cant setState on unmounted component.mp4

08 Tổng quan về react hooks

002 Tổng quan về hooks.mp4.mp4

003 useState() - Những điều cần biết.mp4

004 useEffect() - Những điều cần lưu ý.mp4.mp4

005 Custom hook là gì_.mp4.mp4

006 useCallback vs useMemo.mp4.mp4

09 Routing trong ReactJS

001 Tổng quan về routing trong ReactJS.mp4

002 Tạo routing cho từng feature.mp4

003 Sự khác biệt giữa Link và NavLink.mp4

004 Sự khác biệt giữa Route và Switch.mp4

005 Giới thiệu route matching.mp4

006 Tạo redirect rule với Redirect.mp4

007 Routing hooks.mp4

008 Nested routing.mp4

009 Not Found.mp4

010 Sync filters to URL params.mp4

011 Sync state to URL.mp4

10 Prettier và Material UI

001 Config Prettier đơn giản.mp4

002 Cài đặt thư viện Material UI.mp4

11 Hướng dẫn tổ chức module API

001 Giới thiệu API module.mp4

002 Cài đặt axiosClient.mp4

003 Cài đặt categoryApi.mp4

004 Demo gọi API để lấy dữ liệu.mp4

12 Làm việc với Form trong ReactJS

002 Chọn thư viện quản lý form.mp4

003 Giới thiệu React Hook Form API.mp4

004 Cách tổ chức Form Module.mp4

005 Cài đặt TodoForm.mp4

006 Tạo custom field_ InputField.mp4

007 Làm form validation với Yup.mp4

008 Handle form submit.mp4

13 Quản lý state với Redux

001 Tổng quan về Redux.mp4.mp4

002 Một ví dụ đơn giản về Redux.mp4.mp4

003 Dùng Redux đơn giản hơn với Redux Toolkit.mp4.mp4

004 Ví dụ sử dụng Redux Toolkit.mp4.mp4

005 Setup counterSlice.mp4.mp4

006 Setup Redux Store.mp4.mp4

007 Kết nối tới Redux từ component.mp4.mp4

008 Debug Redux dễ dàng với Redux Devtool.mp4.mp4

009 Xử lý relative import với jsconfig.json.mp4.mp4

14 Những cách khác nhau để styles cho component

001 Giới thiệu sơ lược các cách để styles.mp4

002 Inline styles.mp4

003 CSS Styles.mp4

004 SCSS + BEM.mp4

005 CSS Module.mp4

006 Styled component.mp4

007 Material Styles.mp4

15 Authentication Module

001 Giới thiệu module Auth.mp4

002 Làm giao diện thanh header.mp4

003 Gắn link vào menu item trên header.mp4

004 Tạo dialog để hiển thị form đăng ký.mp4

005 Setup form đăng ký.mp4

006 Style cho form đăng ký.mp4

007 Tạo custom field_ PasswordField.mp4

008 Validation_ Full Name.mp4

009 Validation_ Email.mp4

010 Validation_ Password.mp4

011 Validation_ Retype Password.mp4

012 Setup API đăng ký.mp4

013 Setup userSlice.mp4

014 Tạo async action_ register().mp4

015 Sử dụng async action trên component như thế nào_.mp4

016 Fix lỗi import package từ node_modules ra sai link.mp4

017 Hiển thị loading khi gọi action đăng ký.mp4

018 Hiển thị thông báo với notistack.mp4

019 Thông báo thành công.mp4

020 Parse error khi đăng ký thất bại.mp4

021 Thêm close icon vào dialog.mp4

022 Setup API đăng nhập.mp4

023 Tạo giao diện cho form đăng nhập.mp4

024 Tạo nút chuyển đổi qua lại giữa đăng nhập và đăng ký.mp4

025 Tạo hằng số cho dự án.mp4

026 Khởi tạo redux state từ localStorage.mp4

027 Hiển thị header khi đã đăng nhập.mp4

028 Tạo drop down menu cho user icon.mp4

029 Làm tính năng đăng xuất.mp4

16 Shopping Cart - Trang danh sách sản phẩm-2

008 Xử lý thumbnail cho sản phẩm.mp4

010 Làm chức năng Pagination.mp4

016 Lọc theo khoảng giá.mp4

020 Code phần hiển thị filters.mp4

022 Đồng bộ filters lên URL.mp4

16 Shopping Cart - Trang danh sách sản phẩm

001 Giới thiệu về tính năng giỏ hàng.mp4

002 Setup routing cho feature Product.mp4

003 Phân tích layout trang Product Listing.mp4

004 Setup layout cho Product Listing.mp4

005 Viết API lấy danh sách sản phẩm.mp4

006 Làm skeletons cho danh sách sản phẩm.mp4

007 Hiển thị danh sách sản phẩm.mp4

008 Xử lý thumbnail cho sản phẩm.mp4

009 Format giá sản phẩm theo đơn vị VND.mp4

010 Làm chức năng Pagination.mp4

011 Fix giao diện Pagination.mp4

012 Sắp xếp theo giá sản phẩm.mp4

013 Phân tích cách làm filters.mp4

014 Lọc theo danh mục sản phẩm.mp4

015 Giao diện lọc danh mục sản phẩm.mp4

016 Lọc theo khoảng giá.mp4

017 Giao diện lọc khoảng giá.mp4

018 Lọc theo dịch vụ sản phẩm.mp4

019 Phân tích cách hiển thị filters.mp4

020 Code phần hiển thị filters.mp4

021 Dùng useMemo() để cải thiện tí xíu.mp4

022 Đồng bộ filters lên URL.mp4

023 Hỗ trợ nút back trên trình duyệt.mp4

17 Shopping Cart - Trang chi tiết sản phẩm

001 Giới thiệu trang chi tiết sản phẩm.mp4

002 Setup layout cho trang chi tiết sản phẩm.mp4

003 Code component ProductThumbnail.mp4

004 Custom hook fetch dữ liệu sản phẩm.mp4

005 Code component ProductInfo.mp4

006 Cách kiểm tra và update packages trong dự án.mp4

007 Form add to cart.mp4

008 Code QuantityField.mp4

009 Code component ProductMenu.mp4

010 Code các sub-components của product.mp4

011 An toàn render dữ liệu HTML lên UI.mp4

012 Show progress khi fetch dữ liệu.mp4

18 Shopping Cart - Trang giỏ hàng

001 Giới thiệu tính năng giỏ hàng.mp4

002 Setup feature Cart.mp4

003 Tạo actions cho cart items.mp4

004 Tạo selectors cho cart items.mp4

005 Handle nút add to cart.mp4

006 Thêm icon giỏ hàng lên header.mp4

19 Và nhiều nội dung khác nữa! _

20. Update

18 Shopping Cart - Trang giỏ hàng

001 Giới thiệu tính năng giỏ hàng.mp4

002 Setup feature Cart.mp4

003 Tạo actions cho cart items.mp4

004 Tạo selectors cho cart items.mp4

005 Handle nút add to cart.mp4

006 Thêm icon giỏ hàng lên header.mp4

19 Hành trình mới - React 2022 updates

001 Hành trình mới - React 2022 updates.mp4

003 npm vs yarn (nguồn khoá javascript).mp4

003 npm vs yarn (nguồn_ khoá javascript).mp4

004 Module Bundler (nguồn khoá javascript).mp4

004 Module Bundler (nguồn_ khoá javascript).mp4

005 Setup ReactJS project với ViteJS.mp4

006 Deploy to Vercel.mp4

007 Share ViteJS project online.mp4

20 ReactJS typescript cơ bản

001 Nội dung chương 20.mp4

20 Và nhiều nội dung khác nữa! _