강의

멘토링

커뮤니티

Programming

/

Web Development

Lần đầu gặp gỡ React: Hướng dẫn thực chiến dành cho Publisher

React bước đầu dành cho Publisher! Học từ cú pháp cơ bản đến thiết kế và triển khai website thương mại điện tử responsive trong một khóa học. Không phải là tổng hợp các ví dụ React rời rạc mà là học và áp dụng cú pháp cốt lõi cần thiết cho việc thiết kế website thực tế.

13 học viên đang tham gia khóa học này

Độ khó Cơ bản

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

  • ezweb
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, Event)

  • Hoàn thành website thương mại điện tử tập trung vào danh sách thẻ

  • Kinh nghiệm tích hợp 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 chỉnh lên Vercel để có được URL dịch vụ thực tế

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

  • Phân trang

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

  • Giải thích thân thiện với Publisher: Kết nối tự nhiên các khái niệm React từ tư duy HTML·CSS hiện có

  • Tập trung vào dự án thực tế: Trực tiếp xây dựng giao diện trang thương mại điện tử để thấu hiểu React

  • Hoàn thành portfolio: Cung cấp sản phẩm có thể sử dụng ngay cho mục đích xin việc

Ví dụ về thiết kế trung tâm mua sắm

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

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

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

Nội dung cốt lõi
Mục đích học React, chuẩn bị công cụ phát triển, quan điểm 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 component.

Nội dung cốt lõi
Cấu hình môi trường Vite + React, cú pháp JSX, cấu trúc component, Props, State, xử lý sự kiện


3부. Ngữ pháp thân thiện với Publisher

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

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


4부. Dự án Mini Cửa hàng Trực tuyến

Áp dụng kiến thức cơ bản về React 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 trang thương mại điện tử.

Nội dung cốt lõi
Cấu trúc Header/GNB, danh sách thẻ sản phẩm, nút giỏ hàng, lọc danh mục, giao diện responsive
Kinh nghiệm triển khai sử dụng Vercel


Phần 5. 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 frontend.

Nội dung cốt lõi
Hướng dẫn về đánh giá dự án, điểm chỉnh sửa code và lộ trình mở rộng frontend

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

  • Trang web thương mại điện tử tập trung vào danh sách thẻ

  • Hỗ trợ Responsive (PC / Mobile)

  • Triển khai chức năng nút giỏ hàng và bộ lọc danh mục

  • Tải dữ liệu thực tế thông qua tích hợp API

  • Dự án portfolio đã hoàn thành triển khai



  • Xem trước phiên bản triển khai cuối cùng: https://ez-shop-three.vercel.app/

Chuẩn bị trước khi học 🛠

  • HTML / CSS / JavaScript cơ bản

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

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

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

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

Không chỉ đơn thuần học cú pháp react, mà còn triển khai toàn bộ trang chủ của website như một dự án thực tế. Trong quá trình triển khai dự án, chúng ta sẽ học theo trình tự: bí quyết viết cấu trúc HTML cần thiết cho dự án bằng cách tham khảo thiết kế, bí quyết về style khi viết CSS để khớp với thiết kế, và bí quyết viết script theo từng chức năng.


Triển khai dự án dựa trên thiết kế tham khảo.

# Tạo và Triển khai Dự án React 📘

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

phát triển vs-code

Triển khai Filtering và Sorting📘

Dựa trên nội dung đã học trong phần cơ bản về React, bạn sẽ tra cứu thông tin sản phẩm và hiển thị sản phẩm thông qua list rendering (map). Trong danh sách sản phẩm được hiển thị, bạn sẽ triển khai filtering và sorting theo điều kiện.

lọc, sắp xếp

Triển khai Phân trang 📘

Hiển thị 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ị sản phẩm của trang tương ứng.

phân trang

Triển khai 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 các thiết bị khác nhau.

responsive

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

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

  • Đã học HTML/CSS/JS nhưng React còn xa lạ với Publisher

  • Những bạn muốn thêm dự án dựa trên React vào portfolio

  • Web Designer/Web Publisher preparing to expand their career into Frontend Development

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 (để triển khai)

Xin chào
Đây là

2,706

Học viên

58

Đánh giá

4

Trả lời

4.9

Xếp hạng

11

Các khóa học

■ [Hiện tại] Giảng viên Web Publishing, Front-end tại Học viện Nghệ thuật Máy tính Green
■ [Hiện tại] 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
■ Front-end Publisher, Giảng viên chuyên nghiệp về Front-end Publishing
■ Giảng viên hướng dẫn 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 /2024 Sổ tay gia sư thực hành Kỹ thuật viên Thiết kế Web SD Edu Yu-seon-bae / Sidae Gosi Planning

Tái bản 11.2024 /2025 Sách hướng dẫn thực hành Thiết kế đồ họa Web SD Edu / 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 chi nhánh Sinchon - Giảng viên xuất sắc 05.2017 Học viện Green Computer chi nhánh Sinchon - Giảng viên xuất sắc 05.2016 Học viện Green Computer chi nhánh Sinchon - Giảng viên xuất sắc 10.2015 Học viện Green Computer chi nhánh Sinchon - Giảng viên xuất sắc

 

 

 

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á

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

1.587.061 ₫

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!