inflearn logo

Làm quen với React: 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á

15 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

Đặc điểm của bài giảng ✨

  • Giải thích thân thiện với người làm 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 xây dựng giao diện người dùng (UI) cho trung tâm mua sắm

  • Hoàn thiện portfolio: Cung cấp sản phẩm đầu ra 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 lộ trình học tập 📝

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

Hiểu lý do tại sao nên học React và chuẩn bị môi trường 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 cốt lõi
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

Tập trung học 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 chính
Render có điều kiện, render danh sách (map), khái niệm key, phương thức áp dụng CSS (CSS Module, v.v.)


Phần 4. Dự án nhỏ: 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 quy trình làm 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 phản hồi (responsive)
Kinh nghiệm triển khai (deploy) bằng Vercel


Phần 5. Tổng kết và Kết thúc

Tổng hợp 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ị tương thích (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/

Chuẩn bị trước khi khóa học bắt đầu 🛠

  • Kiến thứ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 độ giảng dạy 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 website 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 trên VS Code

Thực hiện Filtering, sorting 📘

Dựa trên những nội dung đã học trong phần React cơ bản, tiến hành truy vấn thông tin sản phẩm và hiển thị sản phẩm thông qua kết xuất danh sách (map). Thực hiện chức năng filtering (lọc) và sorting (sắp xếp) 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 ra, và khi nhấp vào nút sẽ hiển thị các sản phẩm của trang tương ứng.

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 nhanh (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 có hiểu biết 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ề ngữ pháp nâng cao hay trình độ thuật toán, mà tôi sẽ tập trung giải thích các khái niệm JavaScript thực sự cần thiết cho việc 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 nhân viên thiết kế web (publisher), 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 từ 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 Frontend.

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

Không 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. Có cần phải 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 phải 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 không?

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

Dự án mini về trang web mua sắm bao gồm từ việc chia nhỏ 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 hồ sơ năng lực (portfolio).

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 đó.

Chúng 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 ở 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,793

Học viên

63

Đánh giá

4

Trả lời

4.9

Xếp hạng

13

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á 9

    Đá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.608.475 ₫