강의

멘토링

커뮤니티

Programming

/

Front-end

React bắt đầu với Next.js

Mới bắt đầu với React? Bạn cần suy nghĩ về cách học nhanh nhưng vẫn nắm vững các khái niệm cơ bản của React. Hãy bắt đầu với Next.js và JavaScript với kiến thức tối thiểu. Chúng ta sẽ phát triển chỉ những ví dụ thiết yếu cần thiết cho việc phát triển trong thực tế. Ví dụ Todo rất quan trọng nên phải phát triển 2 lần. Một lần tập trung vào component, lần tiếp theo tập trung vào routing được xử lý theo đường dẫn của trình duyệt! Đối với đăng nhập, hãy sử dụng Zustand! Bạn có thể xử lý trạng thái toàn cục với lượng code thực sự ít.

(4.9) 7 đánh giá

108 học viên

  • zk202308a5410
react19
next.js15
신입프론트엔드
웹개발
네카라쿠배
JavaScript
React
Web Application
Ajax

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

  • Cách cấu thành component và component

  • Trạng thái (state) và thuộc tính (props) của component

  • Ứng dụng React tích hợp với API server

  • Xử lý routing sử dụng Next.js

  • Quản lý trạng thái với Zustand

Bắt đầu React một cách dễ dàng!

Nếu bạn mới bắt đầu học React?

  • Phải có thể sử dụng props và state của component một cách đúng đắn.

  • Bạn cần biết cách xử lý bất đồng bộ thông qua giao tiếp với máy chủ.

  • Cần có khả năng xử lý trạng thái toàn cục của ứng dụng như đăng nhập.


Bắt đầu với JavaScript.. sử dụng framework với cấu hình tối thiểu

  • Nếu bạn chưa quen với TypeScript thì có thể bắt đầu từ JavaScript trước cũng được.

  • Nếu React với nhiều thư viện và cấu hình phức tạp thì hãy bắt đầu với framework như Next.js.

  • Next.js hỗ trợ cả component client hoạt động trên trình duyệt và component server hoạt động trên máy chủ.

  • Những người mới bắt đầu học nên ưu tiên học về client component trước, sau đó mới học về server component.


Học thông qua các ví dụ!

  • 'Trăm lần nghe không bằng một lần thấy' và 'trăm lần thấy không bằng một lần thực hành'.

  • Chỉ việc biến đổi một ví dụ đơn giản theo nhiều cách khác nhau cũng đã giúp học được rất nhiều.

  • Cần phải học các bí quyết thông qua các ví dụ chứ không phải chỉ là kiến thức.

Học các ví dụ cần thiết trong thực tế!

  • Next.js cơ bản cung cấp chức năng routing hiển thị các component cụ thể theo đường dẫn.

  • Dữ liệu Todo hãy giao tiếp với API server và xử lý bằng dữ liệu JSON.

  • React 19에서

    Hãy thử sử dụng useActionState() để xử lý các thẻ.

  • Bạn có thể tạo custom hook của riêng mình không?

  • Quản lý trạng thái toàn cục hãy xử lý đơn giản bằng cách sử dụng Zustand


Bắt đầu với Easygoing React một cách dễ dàng!

  • Ban đầu bắt đầu với JavaScript cũng không sao.

  • Ban đầu bạn có thể bắt đầu mà không cần thiết kế cũng không sao.

  • Ban đầu bạn có thể bắt đầu từ một cấu trúc đã hoàn thiện cũng được.

Nội dung học tập

  • Tìm hiểu component là gì.

  • Tìm hiểu về thuộc tính/trạng thái của component.

  • Chúng ta sẽ tạo chức năng tích hợp với các dịch vụ bên ngoài.

  • Quản lý trạng thái bằng Zustand là xu hướng hiện tại

Phần (1) Môi trường phát triển

Thiết lập môi trường phát triển và chạy ứng dụng sử dụng Next.js

Sử dụng Next.js cho phép bạn phát triển dự án trong trạng thái đã hoàn thành tất cả các cài đặt cơ bản.

Phần (2) Component! Component! Component!

Viết các tính năng mong muốn bằng component.

Làm thế nào để chia nhỏ component?

Làm thế nào để thực hiện giao tiếp giữa các component?

Hãy cùng học các cú pháp JavaScript cơ bản cần thiết để triển khai.

Áp dụng thiết kế cho ví dụ Todo đầu tiên bằng cách sử dụng AI.

Phần (3) Container và Presentation

Nếu nhiều component cần giao tiếp với nhau để tạo ra kết quả thì sao?

  • Trạng thái của component

  • Thuộc tính của component

  • Mảng và filter trong JavaScript

  • Destructuring assignment

  • Toán tử spread

Phần (4) Todo được xử lý định tuyến

Để tạo ra một ví dụ thực tế hơn, chúng ta cần 'Định tuyến (Routing)' để tạo ra màn hình phù hợp với thanh địa chỉ của trình duyệt.


  • Next.js cung cấp routing như một tính năng cơ bản.

  • Next.js cũng cung cấp layout như một tính năng cơ bản.

  • Hãy tạo thói quen sử dụng Fetch API.

  • Hãy tìm hiểu lý do tại sao chỉ nên sử dụng.


Phần (5) Hãy cùng sử dụng Zustand.

Zustand là thư viện quản lý trạng thái toàn cục phổ biến nhất trong thực tế. Chỉ với vài dòng code là có thể quản lý trạng thái toàn cục.

  • Bạn cũng có thể lưu trữ kết quả trong localStorage.

  • Cách sử dụng đơn giản hơn so với các thư viện khác.

Đây là khóa học dành cho người mới bắt đầu với React.

Đây là khóa học nhập môn dành cho những ai muốn học React.

  • Bạn cần biết cách khai báo biến trong JavaScript.

  • Chúng ta cần tìm hiểu về câu lệnh điều khiển và câu lệnh lặp.

  • Bạn cần phải hiểu về hàm và mảng.

  • Bạn cần có kinh nghiệm xử lý sự kiện bằng HTML và JS trong trình duyệt.

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

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

  • Người muốn thử React lần đầu tiên

  • Người mới bắt đầu với Next.js

  • Người muốn học nhanh các khái niệm của React

  • Người muốn hiểu về cấu trúc và vai trò của frontend và backend

  • Người muốn áp dụng Zustand vào React

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

  • Kiến thức cơ bản về JavaScript (biến, câu lệnh điều khiển, mảng, hàm)

Xin chào
Đây là

2,140

Học viên

154

Đánh giá

272

Trả lời

4.8

Xếp hạng

5

Các khóa học

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

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

Tất cả

37 bài giảng ∙ (8giờ 7phú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ả

7 đánh giá

4.9

7 đánh giá

  • 123ddd님의 프로필 이미지
    123ddd

    Đánh giá 5

    Đánh giá trung bình 5.0

    5

    32% đã tham gia

    • c01님의 프로필 이미지
      c01

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      講義を聞いた後、React.jsにある程度自信がつきました。 (), {}, state, set, アロー関数, フックの基本機能...などをなぜ使うのかわかるような気がします。

      • codingbeer님의 프로필 이미지
        codingbeer

        Đánh giá 11

        Đánh giá trung bình 4.2

        Đã chỉnh sửa

        5

        100% đã tham gia

        シンプルな核心概念講義、良いですね。

        • zk202308a5410
          Giảng viên

          お久しぶりです。😭😭

      • moomgyucha8486님의 프로필 이미지
        moomgyucha8486

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        32% đã tham gia

        • wtkim님의 프로필 이미지
          wtkim

          Đánh giá 27

          Đánh giá trung bình 4.9

          5

          32% đã tham gia

          418.122 ₫

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

          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!