강의

멘토링

로드맵

Programming

/

Front-end

Học mã hóa bản sao YTMusic Next từ những điều cơ bản (với next.js 14, UI Master)

Sao chép trang web YoutubeMusic với React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand. Bạn có thể nắm vững kiến ​​thức cơ bản về mặt tiền web, bắt đầu với kiến ​​thức cơ bản về NextJS và tập trung vào giao diện người dùng.!

(4.4) 37 đánh giá

448 học viên

  • dodocoding
실습 중심
클론코딩
Next.js
React
TailwindCSS
zustand
Clone Coding

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Bộ định tuyến ứng dụng Next.js

  • (Lý thuyết) Phản ứng hồi hộp (Truyền phát, Hydrat hóa dần dần)

  • (Lý thuyết) Phương thức kết xuất Next.js và CSR, SSR, Hydration

  • Next.js RSC, RCC, sử dụng ứng dụng khách

  • TailwindCSS, RadixUI, Shadcn

  • Mã hóa trình phát nhạc YT

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

  • Khái niệm cơ bản về gõ Typescript

  • Cách phát triển giao diện người dùng đáp ứng

Công nghệ NextJS đang được các nhà phát triển FE săn đón hiện nay!
Chúng tôi chỉ bao gồm những phần bạn cần để thực hành NextJS 🍭

Sau khi học React, sẽ rất khó để tiếp tục một dự án sử dụng NextJS nếu chỉ xem tài liệu chính thức.
Vì vậy, thông qua mã hóa YoutubeMusic Clone, nó nhanh chóng và dễ dàng,
Chỉ trong một ngày! Chúng tôi đã tạo ra một khóa học giúp bạn thành thạo NextJS.
Khóa học này có thể đóng vai trò là nền tảng cho dự án NextJS của riêng bạn.

Các tính năng của khóa học này

📌 Hướng dẫn ghi chú bài giảng : Mục tiêu từng chương, điểm ôn tập và nhiều thông tin khác (tài liệu chính thức, khái niệm, v.v.)

📌 Cung cấp các điểm kiểm tra bài giảng : Đừng lo lắng nếu bạn không tuân thủ quy tắc! Có các nhánh cụ thể theo từng chương.

📌 10% lý thuyết, 90% thực hành : Chúng tôi giải thích những khái niệm khó nhất về kết xuất, thành phần máy chủ và hydrat hóa.

📌 Danh mục đầu tư : Bạn có thể nhận được kết quả thông qua mã hóa bản sao.

Tôi giới thiệu điều này cho những người này

Từ React đến Next
Tôi muốn mở rộng!

Tôi biết cách sử dụng React, nhưng
Nếu bạn bị kẹt ở Next,
Khóa học này thật hoàn hảo!

Dự án Next.js
Tôi muốn làm điều đó!

Dựa trên Next.js
Nếu bạn cần thực hiện một dự án ngay lập tức,
Đây sẽ là một hướng dẫn hữu ích.

Dễ dàng với mã hóa bản sao
Chúc bạn học vui vẻ!

Dựa trên cơ sở mã phù hợp
Mở rộng dự án của bạn theo cách của riêng bạn!

Sau giờ học

  • Bạn có thể sao chép bất kỳ trang web nào bạn thấy bằng Next.js. 😲

  • Bạn có thể tiếp tục dự án của mình thông qua Next.js AppRouter.

  • Bạn có thể quản lý trạng thái toàn cầu bằng Zustand.

  • Bạn sẽ tìm hiểu về nhiều phương pháp kết xuất khác nhau, bao gồm PageRouter, React CSR, SSR và Hydration.

  • Vercel cho phép tôi giới thiệu các dự án tôi đã tạo ra với người khác.

  • Sự kết hợp TailwindCSS + Radix UI + Shadcn cho phép bạn phát triển UI nhanh hơn bất kỳ ai khác.


Học những điều này 🏄🏾‍♀️

Next.js 14 AppRouter & ServerComponent

Bạn sẽ học cách cấu trúc toàn bộ dự án của mình với AppRoute. Bạn cũng sẽ tìm hiểu lý thuyết về thời điểm và lý do nên sử dụng các thành phần máy chủ. Thông qua sự phát triển của FE rendering, bạn sẽ tìm hiểu về lịch sử của Vanilla JS > React > NextJS PageRouter > AppRoute.

Thiết kế đáp ứng + Web tương tác

Chúng tôi đang giới thiệu một chiến lược hỗ trợ màn hình di động và máy tính bảng. Chúng tôi đã tinh chỉnh giao diện người dùng với kiểu dáng và chi tiết, bao gồm các ngăn kéo chỉ hiển thị trên màn hình di động. Có lẽ bạn có thể gói nó trong một webview và xây dựng một ứng dụng từ đầu?

Trình phát nhạc với Zustand

Tìm hiểu Player bằng công cụ quản lý trạng thái toàn cục Zustand. Công cụ này bao gồm các kỹ năng UI chi tiết để nâng cao trải nghiệm người dùng. Bạn sẽ tích hợp các sự kiện với Zustand để phát nhạc trên bất kỳ trang nào.

Thành phần UI & Typescript

Sắp xếp các giao diện người dùng khác nhau thành các thành phần. Và, nếu cần, hãy học cách áp dụng TypeScript để ngăn ngừa lỗi trong dự án của bạn.

Những điều cần lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Tôi sử dụng Node.js, VS Code và Github.


Tài liệu học tập

Kiến thức và biện pháp phòng ngừa của người chơi

  • Kiến thức cơ bản về HTML, CSS và React

  • Tạo kiểu với TailwindCSS (+ hướng dẫn tóm tắt 😀 )

  • (*Lúc đầu, tôi ghét TailwindCSS. Nhưng sau quá trình học ban đầu (khoảng một giờ), nó đã cải thiện đáng kể trải nghiệm phát triển của tôi và đẩy nhanh thời gian phát triển! Bạn sẽ không hối hận đâu.)

Người chia sẻ kiến thức
Bạn có quan tâm đến các bài giảng khác không?

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

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

  • Bất cứ ai muốn bắt đầu một dự án với Next.js

  • Bất kỳ ai muốn thành thạo việc xuất bản dựa trên Next.js

  • Những người muốn phát triển nhanh chóng thông qua các thư viện thành phần

  • Nhà phát triển FE đang tìm cách tăng cường công nghệ Next.js

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

  • HTML, CSS, React cấp độ cơ bản

Xin chào
Đây là

3,793

Học viên

153

Đánh giá

85

Trả lời

4.8

Xếp hạng

5

Các khóa học

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

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

Tất cả

80 bài giảng ∙ (7giờ 6phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

37 đánh giá

4.4

37 đánh giá

  • kotlinjava님의 프로필 이미지
    kotlinjava

    Đánh giá 21

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Trong Next.js có rất nhiều nội dung liên quan đến hiệu năng như xử lý cache hay tối ưu hóa,... nên cá nhân tôi thấy cần học thêm về UI, nhưng lại không hứng thú với các bài giảng HTML, CSS. Đúng lúc có khóa học này nên tôi đã tham gia và thấy trình độ của giảng viên quá đỉnh...ㄷㄷ Nhưng không ngờ là trong lúc gõ theo, tôi cảm thấy kỹ năng của mình đã được cải thiện, có lẽ là do nó đã ngấm vào người. Rất tốt để học Shadcn Tailwind. Mong chờ phần 2 sớm ra mắt.

    • zmlee128891님의 프로필 이미지
      zmlee128891

      Đánh giá 2

      Đánh giá trung bình 4.0

      3

      100% đã tham gia

      너무 좋았어요. Chỉ có điều... phần cuối kết thúc quá vội vàng nên hơi đáng tiếc.

      • dodocoding
        Giảng viên

        Cảm ơn bạn đã tham gia khóa học ~ Lẽ ra tôi nên giảng dạy nó một cách có hệ thống hơn và tôi sẽ cung cấp cho bạn một khóa học tốt hơn.

    • smc91191589님의 프로필 이미지
      smc91191589

      Đánh giá 13

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Tôi nghĩ đó là khóa học tiếp theo tốt nhất~ Tôi rất thích bài giảng hay ~

      • dodocoding
        Giảng viên

        100% cảm ơn bạn đã tham gia lớp học! Chúng ta sẽ gặp lại bạn sau với một bài giảng nâng cao hơn. ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      11% đã tham gia

      • sthwin님의 프로필 이미지
        sthwin

        Đánh giá 12

        Đánh giá trung bình 4.3

        3

        100% đã tham gia

        Tôi đã tham gia bài giảng để xem xét CSS React và Tailwind. Có một số chỗ tôi cảm thấy lời giải thích có phần thiếu sót nhưng cũng khó nói được điều gì. Cá nhân tôi, có những phần tôi nghĩ sẽ tốt hơn nếu chỉ thống nhất quy trình bằng TypeScript. Tuy nhiên, nó đã giúp tôi rất nhiều khi mã hóa bản sao.

        • dodocoding
          Giảng viên

          Cảm ơn bạn đã xem xét của bạn. ! Lần sau chúng tôi sẽ quay lại với bài giảng hay hơn. Cảm ơn các bạn đã nghe bài giảng ngắn. Nếu bạn có bất kỳ câu hỏi nào sau này, tôi sẽ cố gắng trả lời chúng cho đến cuối cùng.

      Ưu đãi có thời hạn, kết thúc sau 7 ngày ngày

      746.293 ₫

      24%

      985.107 ₫

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

      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!