React cho người mới bắt đầu: Hướng dẫn thực hành dành cho Publisher

Bước đầu học React dành cho Publisher! Học tất cả trong một, từ cú pháp cơ bản đến sản xuất và triển khai trang web mua sắm phản hồi (responsive). Thay vì chỉ là tập hợp các ví dụ React rời rạc, bạn sẽ được học và áp dụng các cú pháp cốt lõi cần thiết để xây dựng một trang web thực tế.

(5.0) 1 đánh giá

16 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
json-parsing
json-parsing
react.js
react.js
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
json-parsing
json-parsing
react.js
react.js

Bạn sẽ nhận được điều này sau khi học.

  • Hiểu rõ các khái niệm cốt lõi của React (Component, Props, State, Sự kiện)

  • Hoàn thành website mua sắm tập trung vào danh sách thẻ (card list)

  • Kinh nghiệm liên kết dữ liệu JSON API và nắm vững kiến thức cơ bản về Context API

  • Triển khai dự án hoàn thiện lên Vercel để lấy URL dịch vụ thực tế

  • Lọc theo danh mục, thương hiệu và khoảng giá

  • Phân trang

"Không nhận bây giờ là lỗ! Chỉ cần đăng ký kênh YouTube là học phí giảm một nửa"

Sự kiện Đăng ký & Thích & Bình luận

Hoàn thành nhiệm vụ đơn giản và nhận ngay mã giảm giá 50%. Đừng bỏ lỡ ưu đãi lớn nhất từ trước đến nay chỉ có trong thời gian giới hạn!

Tham gia sự kiện tại: https://forms.gle/wcD2wRVeaG7B7fSj7

Đặc điểm khóa học ✨

  • Giải thích thân thiện với người thiết kế web (Publisher): Kết nối các khái niệm React một cách tự nhiên từ tư duy HTML·CSS sẵn có

  • Tập trung vào dự án thực tế: Trải nghiệm React thông qua việc trực tiếp tạo UI cho trang web mua sắm

  • Hoàn thiện Portfolio: Cung cấp sản phẩm có thể sử dụng ngay để xin việc

Ví dụ thiết kế trung tâm thương mại

Tóm tắt chương trình học 📝

Phần 1. Định hướng (Orientation)

Hiểu lý do tại sao nên học React và môi trường chuẩn bị học tập.
Nêu rõ lý do tại sao React lại cần thiết dưới góc nhìn của một người làm publisher.

Nội dung cốt lõi
Mục đích học React, chuẩn bị công cụ phát triển, góc nhìn chuyển đổi từ Publisher → Frontend


Phần 2. Kiến thức cơ bản về React

Học các cú pháp và khái niệm cốt lõi để phát triển React.
Mục tiêu là làm quen với tư duy dựa trên thành phần (component).

Nội dung chính
Thiết lập môi trường Vite + React, cú pháp JSX, cấu trúc component, Props, State, xử lý sự kiện


Phần 3. Cú pháp thân thiện với Publisher

Học tập trung vào các mẫu rendering mà publisher thường xuyên sử dụng trong thực tế.
Kết nối trải nghiệm HTML/CSS vào React một cách tự nhiên.

Nội dung cốt lõi
Rendering có điều kiện, rendering danh sách (map), khái niệm key, phương thức áp dụng CSS (CSS Module, v.v.)


Phần 4. Mini Project Trang web mua sắm

Áp dụng các kỹ năng React cơ bản vào việc triển khai UI thực tế.
Trải nghiệm luồng công việc thực tế thông qua cấu trúc của một cửa hàng trực tuyến.

Nội dung chính
Cấu trúc Header/GNB, danh sách thẻ sản phẩm, nút giỏ hàng, bộ lọc danh mục, giao diện UI thích ứng (responsive)
Kinh nghiệm triển khai dự án bằng Vercel


Phần 5. Tổng kết

Tổng kết nội dung học tập dựa trên dự án đã hoàn thành.
Sau đó, đề xuất hướng học tập Front-end tiếp theo.

Nội dung chính
Đánh giá dự án, các điểm cần lưu ý khi dọn dẹp mã nguồn, hướng dẫn lộ trình mở rộng kiến thức Frontend

Sản phẩm cuối cùng 🛒

  • Trang web mua sắm tập trung vào danh sách thẻ

  • Hỗ trợ hiển thị phản hồi (PC / Mobile)

  • Thực hiện chức năng nút giỏ hàng và bộ lọc danh mục

  • Kết nối API để tải dữ liệu thực tế

  • Dự án portfolio đã hoàn tất triển khai



  • Xem trước bản phát hành cuối cùng: https://ez-shop-three.vercel.app/

Những điều cần chuẩn bị trước khi học 🛠

  • Cơ bản về HTML / CSS / JavaScript

  • Cài đặt Node.js & VS Code

  • Tài khoản GitHub (dùng để triển khai)

Nội dung học tập chính và đặc điểm📚

Tiến độ bài giảng theo phong cách thực tế 📘

Không chỉ đơn thuần là học cú pháp React, bạn sẽ được thực hiện toàn bộ trang chủ của một trang web giống như một dự án thực tế. Trong quá trình thực hiện dự án, trình tự học tập sẽ bao gồm: bí quyết xây dựng cấu trúc HTML cần thiết dựa trên thiết kế, bí quyết viết CSS sao cho khớp với thiết kế, và bí quyết viết script theo từng chức năng.


Thực hiện dự án bằng cách tham khảo thiết kế.

Tạo và thực hiện dự án React 📘

Tạo dự án bằng cách sử dụng React và triển khai dự án bằng cách sử dụng HTML, CSS, React (JavaScript).

Phát triển bằng vs-code

Thực hiện Filtering, sorting 📘

Dựa trên những nội dung đã học ở phần cơ bản về React, thực hiện truy vấn thông tin sản phẩm và hiển thị sản phẩm thông qua render danh sách (map). Thực hiện chức năng filtering và sorting theo điều kiện từ danh sách sản phẩm đã hiển thị.

lọc, sắp xếp

Thực hiện phân trang 📘

Hiển thị các sản phẩm được chỉ định theo điều kiện từ danh sách sản phẩm đã xuất và khi nhấp vào nút, các sản phẩm của trang tương ứng sẽ được hiển thị.

phân trang

Thực hiện responsive 📘

Sử dụng Media Query để điều chỉnh số lượng sản phẩm hiển thị phù hợp với nhiều loại thiết bị khác nhau.

đáp ứng tốt (responsive)

Câu hỏi thường gặp

Q1. Tôi không giỏi JavaScript thì có thể theo học được không?

A. Bạn cần hiểu về các cú pháp cơ bản (if, for, hàm, mảng, đối tượng).

Tuy nhiên, khóa học không yêu cầu kiến thức về cú pháp nâng cao hay trình độ thuật toán, và tôi sẽ giải thích tập trung vào các khái niệm JavaScript thực sự cần thiết để học React.

Hãy học các kiến thức cơ bản trong bài giảng dưới đây.

https://inf.run/NC35Q

Q2. Tôi là một người làm Publisher (cắt HTML/CSS), liệu học React có giúp ích gì không?

Vâng, nó sẽ giúp ích rất nhiều.

Khóa học này được thiết kế để giúp bạn hiểu về React dưới góc nhìn của một người làm Publisher tập trung vào HTML/CSS, vì vậy đây sẽ là điểm khởi đầu tốt để bạn mở rộng vai trò thành một nhà phát triển Front-end.

Q3. Tôi mới làm quen với Component hàm và Hook thì có thể tham gia khóa học được không?

Không có vấn đề gì cả.

Khóa học sẽ không đề cập đến Class component mà sẽ giải thích từng bước về Functional component và các Hook thiết yếu như useState, useEffect.

Q4. Tôi có cần chuẩn bị trước thiết kế hay kế hoạch không?

Vì chúng tôi cung cấp sẵn thiết kế nên bạn không cần chuẩn bị thêm tài nguyên nào khác.

Khóa học được xây dựng dựa trên các ví dụ và cấu trúc được cung cấp sẵn, giúp bạn có thể tập trung vào việc hiện thực hóa UI và thấu hiểu cú pháp React.

Q5. Tôi có thể sử dụng dự án này làm portfolio được không?

Vâng, bạn có thể sử dụng được.

Dự án nhỏ về trung tâm mua sắm bao gồm từ việc tách các component, quản lý trạng thái cho đến quy trình triển khai, nên rất phù hợp để sử dụng làm ví dụ cho portfolio của bạn.

Q6. Có hướng dẫn quy trình triển khai thực tế không?

Vâng, có bao gồm nội dung đó.

Tôi sẽ hướng dẫn bạn quy trình triển khai dự án React bằng Vercel, giúp bạn trải nghiệm luồng triển khai dịch vụ thực tế.

Q7. Sau khi hoàn thành khóa học này, tôi nên học thêm những gì?

Tôi khuyên bạn nên học theo thứ tự: Next.js, TypeScript, thư viện quản lý trạng thái (Zustand, Redux) và cuối cùng là liên kết API.

Tôi cũng sẽ hướng dẫn lộ trình học tập Frontend trong phần cuối của bài giảng.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người làm nghề Publisher đã học HTML/CSS/JS nhưng còn lạ lẫm với React

  • Những ai muốn thêm dự án dựa trên React vào portfolio của mình

  • Nhà thiết kế web/Người cắt web (Web Publisher) đang chuẩn bị mở rộng sự nghiệp sang lĩnh vực Front-end.

Cần biết trước khi bắt đầu?

  • Cơ bản về HTML / CSS / JavaScript

  • Cài đặt Node.js & VS Code

  • Tài khoản GitHub (dùng để triển khai)

Xin chào
Đây là ezweb

2,819

Học viên

63

Đánh giá

4

Trả lời

4.9

Xếp hạng

14

Các khóa học

■ [Hiện tại] Giảng viên Front-end tại ESTSOFT KDT
■ Giảng dạy Web Publishing, Front-end tại Học viện Nghệ thuật Máy tính Green
■ Vận hành kênh YouTube về Web Publishing 'Rock's Easyweb'
■ Giảng viên Web Publishing tại Học viện Máy tính The Joeun
■ Giảng viên Web Publishing tại Học viện Máy tính Hanbit
■ Chuyên gia Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng dạy Portfolio Thiết kế Web UI/UX


[ Sách ]
Xuất bản 19.07.2021 / Sách hướng dẫn sử dụng Figma hoàn hảo cho Thiết kế Web & Web Publishing / BJ Public

Xuất bản ngày 25.08.2022 / Lần đầu học Coding với Web Publishing / Nhà xuất bản Youngjin

Xuất bản 10.2023 /Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web 2024 SD Edu Yu-seon-bae / Sidae Gosi Planning

Tái bản 11/2024 /Sổ tay hướng dẫn thực hành Kỹ thuật viên Thiết kế Web 2025 SD Edu của Tiền bối Yoo / Sidae Gosi Planning

Tái bản 11.2025 /2026 Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web SD Edu của Tiền bối Yoo / Sidae Gosi Planning

 

[ Giải thưởng ]
08.2022 Học viện Green Computer Art chi nhánh Jongno - Giảng viên xuất sắc 06.2021 Học viện Green Computer Art chi nhánh Jongno - Giảng viên xuất sắc 06.2018 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 05.2017 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 05.2016 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc 10.2015 Học viện Green Computer Art chi nhánh Sinchon - Giảng viên xuất sắc

 

 

 

Thêm

Chương trình giảng dạy

Tất cả

33 bài giảng ∙ (9giờ 28phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

1 đánh giá

5.0

1 đánh giá

  • qjagkrfn5041님의 프로필 이미지
    qjagkrfn5041

    Đánh giá 10

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Khóa học khác của ezweb

    Hãy khám phá các khóa học khác của giảng viên!

    Khóa học tương tự

    Khám phá các khóa học khác trong cùng lĩnh vực!

    1.611.779 ₫