강의

멘토링

커뮤니티

Programming

/

Front-end

Mã Watch Me: Mã hóa bản sao Slack với React x Typescript

Một sự kết hợp phổ biến của phát triển front-end được thấy qua mã hóa trực tiếp ứng dụng nhân bản Slack!

(3.7) 3 đánh giá

66 học viên

Độ khó Cơ bản

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

  • sungeun6kim1465
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript

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

  • Tổng quan về quá trình phát triển các dự án dựa trên React x TS

  • Bí quyết thiết lập môi trường phát triển front-end bao gồm Webpack

  • Kỹ năng tối ưu hóa bằng cách sử dụng nhiều plugin, Profiler, v.v.

  • Triển khai chức năng trò chuyện thời gian thực bằng cách sử dụng ổ cắm web

■ Bài giảng này là phiên bản đã chỉnh sửa của một lớp học được tiến hành trực tiếp theo thời gian thực .
Âm thanh có thể bị ngắt quãng ở một số đoạn. Chúng tôi rất mong bạn thông cảm.

■ Liên kết đến sản phẩm hoàn thiện (sleact.nodebird.com) hiện không thể truy cập được,
Mã nguồn hoàn chỉnh có thể được tìm thấy trên GitHub của người hướng dẫn.

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


Ngày 1: Thiết lập front-end và cấu hình dự án
Bài 1. Cài đặt giao diện người dùng - Bạn không thể lúc nào cũng dựa vào CRA!

· Giới thiệu về môi trường phát triển và dự án
· Cài đặt giao diện người dùng Ⅰ: package.json, eslintrc, prettierrc, tsconfig.json
Thiết lập Front-end II: Thiết lập Webpack và triển khai lên máy chủ


Bài 2. Bắt đầu với mã hóa bản sao hoàn chỉnh - Mọi dịch vụ đều bắt đầu bằng việc đăng ký thành viên.

· Cấu hình thư mục dự án và ứng dụng bộ định tuyến
· Tạo trang đăng ký thành viên (ft. Styled Components)


Ngày 2: Triển khai chức năng đăng ký thành viên, đăng nhập và DM
Bài 3. Tối ưu hóa và giao tiếp API bằng thư viện và plugin

· Sử dụng thư viện, plugin và hook tùy chỉnh để tối ưu hóa
(@loadable/component, fork-ts-checker-webpack-plugin, v.v.)
· Đăng ký với Axios + Mẹo giải quyết các vấn đề CORS
· Hoàn thiện trang đăng nhập bằng cách áp dụng trang đăng ký thành viên (ft. SWR)

Bài 4. Triển khai chức năng DM: Xây dựng cấu trúc ứng dụng

· Tạo các cấu trúc liên quan đến DM (+ triển khai trước các chức năng được chia sẻ với Channel)
· Gửi DM (ft. Optimistic UI)
· Cài đặt để tải DM + áp dụng Cuộn vô hạn


Ngày 3: Kết nối thời gian thực và xây dựng dự án bằng WebSockets
Bài 5. Triển khai các hàm DM: Tối ưu hóa kết nối WebSocket và Profiler

· Kết nối Web socket và triển khai cửa sổ tin nhắn DM
· Tối ưu hóa bằng Profiler


Bài 6. Triển khai tính năng cuộn vô hạn + kênh

· Xác minh kết nối thời gian thực + Triển khai Infinite Scrolling
· Hoàn thành dự án sau khi triển khai chức năng Kênh (trò chuyện nhóm)

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 giới thiệu TS vào dự án React

  • Bất kỳ ai muốn trải qua toàn bộ quá trình phát triển front-end, từ cài đặt đến triển khai

  • Những người biết kiến ​​thức cơ bản về React và TS nhưng gặp khó khăn khi áp dụng chúng vào phát triển thực tế

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

  • Phản ứng cơ bản

  • Khái niệm cơ bản về bản đánh máy

Xin chào
Đây là

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

Tất cả

6 bài giảng ∙ (5giờ 22phút)

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

Đánh giá

Tất cả

3 đánh giá

3.7

3 đánh giá

  • william5081님의 프로필 이미지
    william5081

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Bạn sẽ nhận được những kiến ​​thức rất hữu ích trong thực tế! Tôi khuyên bạn nên nó!

    • gkb10a0490님의 프로필 이미지
      gkb10a0490

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Tôi cũng tin điều đó. Tôi đã kiên trì! Cảm ơn.

      • figma3280님의 프로필 이미지
        figma3280

        Đánh giá 1

        Đánh giá trung bình 1.0

        1

        100% đã tham gia

        Phiên bản của phương pháp hướng dẫn có thể không chính xác nhưng rất khó vì không có hướng dẫn về nó. Tôi đã nhận được phần cài đặt giao diện người dùng, nhưng sau đó tôi không nhận được gì nhiều. Tôi khuyên bạn nên xem các bài giảng viết mã bản sao Slack khác.

        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!