강의

멘토링

커뮤니티

NEW
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ế.

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

  • ezweb
실습 중심
리액트감잡기
react
웹퍼블리셔
프론트엔드
HTML/CSS
Responsive Web
json-parsing
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,640

Học viên

54

Đánh giá

4

Trả lời

4.9

Xếp hạng

11

Các khóa học

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

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!

Ưu đãi có thời hạn

30 ₫

50%

1.609.851 ₫

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!