Clone coding Slack [Chat thời gian thực với React]

Hãy cùng bắt đầu phát triển web bằng React một cách nghiêm túc thông qua việc xây dựng dịch vụ tương tự như Slack! Từ đăng ký, đăng nhập, tạo phòng cho đến trò chuyện thời gian thực!

(4.8) 97 đánh giá

2,898 học viên

Độ khó Trung cấp trở lên

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

Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel

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

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

4.8

5.0

shut up and squat

96% đã tham gia

Nó thực sự tuyệt vời. Nó bao gồm rất nhiều công nghệ front-end tổng thể. Các câu trả lời chủ yếu là mã hóa bản sao Slack, vì vậy chúng được đăng tải nhanh chóng ở cấp độ giao tiếp socket thời gian thực nên giao tiếp rất tốt. Nếu bạn nghe khóa học React miễn phí của Zerocho và khóa học này, bạn sẽ có thể học được rất nhiều.

5.0

Milkyway

100% đã tham gia

Tôi chưa nghe hết các bài giảng, nhưng tôi nghĩ chúng đủ hay và một cửa sổ bật lên trên Infron yêu cầu tôi viết bài đánh giá về khóa học xuất hiện nên tôi đã viết trước. Trước hết, như phần giới thiệu khóa học gợi ý, TypeScript được sử dụng, nhưng bạn có thể coi nó như một khóa học React, Webpack, SWR, Emotion và Socket.IO. Nếu bạn tham gia một khóa học về React + TypeScript, bạn có thể cảm thấy hơi thất vọng. Nói cách khác, không có vấn đề gì khi tham gia bài giảng ngay cả khi bạn không biết TypeScript. Tuy nhiên, lời khuyên của tôi là bạn nên tham gia một khóa học TypeScript tất cả trong một và tôi nghĩ đây là một khóa học tốt cho những ai muốn học React + TypeScript đồng thời sử dụng nhẹ TypeScript. Trước hết, vì là bài giảng trung thành với React nên rất tốt cho việc hiểu cấu trúc và hướng phát triển của React. Thứ hai, nó bắt đầu bằng việc giải thích các cài đặt ban đầu của Webpack. Ngay cả khi bạn không biết, nó sẽ không cản trở sự phát triển, nhưng tôi thực sự thích thông tin về các cài đặt ban đầu vì tôi nghĩ các cài đặt ban đầu thực sự quan trọng sau này. Thứ ba, khi áp dụng một kiểu, tốt nhất là đề xuất đơn vị trong đó thành phần kiểu sẽ được tạo và tiếp tục với lớp đó. Cuối cùng, thật tuyệt nếu đưa ra những lời giải thích cơ bản và mẹo về giao tiếp ổ cắm, nhưng hiện tại tôi đang nghe điều này nên tôi không thể đưa ra câu trả lời dứt khoát. Nhược điểm là, theo quan điểm của tôi, đây là một bài giảng đã có từ lâu nên rất nhiều mã đã thay đổi. Tuy nhiên, họ liên tục upload code cập nhật lên GitHub, và nếu gặp khó khăn, bạn có thể đặt câu hỏi trên bảng câu hỏi Infren hoặc Slack, họ sẽ phản hồi nhanh chóng nên nếu bạn sẵn sàng tự học, bạn hoàn toàn có thể bổ sung nó. Tôi cũng nghiên cứu nội dung truy vấn phản ứng GitHub song song với nội dung bài giảng. Chúng tôi đã cùng nhau lắng nghe và phản ánh, và những thay đổi được thực hiện với bản cập nhật thư viện ở mức độ có thể được giải quyết thông qua tìm kiếm đầy đủ. Cuối cùng, về mẹo nghe bài giảng, có một số thay đổi trong thiết lập ban đầu, vì vậy tôi nghĩ bạn nên sao chép và dán mã GitHub trước rồi nghe bài giảng từng bước và thử thiết lập. theo cách riêng của bạn. Và vì đây là bài giảng cơ bản nên nếu bạn đã sử dụng tốt React và TypeScript trong thực tế cũng như đã ứng dụng giao tiếp socket và sử dụng tốt thì nội dung có thể ít hơn bạn nghĩ. Cá nhân tôi đã học được rất nhiều điều từ bài giảng và đó là một trải nghiệm tốt.

5.0

넉리

50% đã tham gia

Ban đầu, tôi nghĩ mình không phù hợp với các bài giảng trực tuyến vì có rất ít bài giảng vững chắc... Nhưng hiện tại tôi rất thích bài giảng này.

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

  • Phát triển web React

  • Thiết lập ban đầu cho Front-end (không dùng CRA)

  • SWR (Thay thế Redux)

  • Emotion (Styled Components)

  • Trò chuyện thời gian thực Socket.io

Ứng dụng trò chuyện do chính tay bạn tạo ra,
hiệu quả hơn và đơn giản hơn! 💬

Trong khóa học này?

Hãy cùng bắt đầu phát triển web React một cách nghiêm túc bằng cách tạo ra một dịch vụ mô phỏng theo Slack!
(Slack + React, hay còn gọi là Sleact!)

Phát triển web với React,
nên học như thế nào đây?

Nghe nói dạo này xu hướng là không còn dùng Redux nhiều nữa...
Nghe nói mọi người đang chuyển dần từ JavaScript sang TypeScript...
Có thật vậy không?

Bạn đã nghe những lời này nhiều chưa? Đáng buồn thay, đó là sự thật. Vì vậy, trong khóa học này, tôi cũng đã loại bỏ Redux và áp dụng TypeScript thay cho JavaScript. Tôi sẽ cho bạn thấy rằng việc phát triển ứng dụng React mà không có Redux vẫn hoàn toàn khả thi, và TypeScript cũng không khó như bạn nghĩ đâu!


Đề xuất cho những đối tượng sau!

Những ai muốn học cách phát triển web bằng React

Những ai muốn bắt đầu học TypeScript mới

Những bạn muốn thực hiện phần front-end thông qua việc clone coding


Clone Slack cùng ZeroCho,
giải quyết triệt để mọi lo lắng về Front-end!

  • Chúng tôi sẽ xây dựng dịch vụ bằng TypeScript để phù hợp với xu hướng frontend mới nhất. Tuy nhiên, đối với những người còn e ngại TypeScript, bài giảng được cấu trúc để bạn cũng có thể thực hiện bằng JavaScript. (Cung cấp cả mã nguồn JavaScript!). However, for those who are hesitant about TypeScript, the course is structured so that you can also proceed with JavaScript. (JavaScript source code provided!)
  • Không sử dụng Redux. Thay vào đó, chúng ta sẽ sử dụng một thư viện có tên là SWR.
  • Chúng tôi sẽ triển khai tất cả các tính năng cần thiết để xây dựng một ứng dụng trò chuyện, bao gồm đăng ký thành viên, đăng nhập, tạo phòng chat, mời người dùng, trò chuyện thời gian thực, nhắc tên người dùng (mention), tải lên hình ảnh, v.v.
  • Mặc dù không được giải thích trong bài giảng, nhưng mã nguồn backend cũng được cung cấp kèm theo.

Bạn sẽ học được những kỹ năng này.

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


Hãy tự mình tạo ra nó!

회원가입, 로그인, 워크스페이스
각종 워크스페이스 기능 구현

Trò chuyện trực tiếp và danh sách trực tuyến


#1
Cung cấp 

mã nguồn.

https://github.com/zerocho/sleact (Đi tới)

#2
Trả lời câu hỏi
một cách nhanh chóng.

Ưu điểm trong các bài giảng của tôi là Q&A. Nếu bạn đặt câu hỏi, tôi sẽ trả lời trong vòng một ngày.
Hãy chủ động học tập bằng cách tự do đặt các câu hỏi liên quan đến nội dung bài giảng.
Điều này sẽ giúp ích rất nhiều cho việc thấu hiểu nội dung đấy!


Giới thiệu người chia sẻ kiến thức.

Blog ZeroCho và vận hành
kênh YouTube

Tác giả cuốn sách
<Node.js 교과서> bán chạy nhất về phát triển web

Công ty cổ phần Today's Pickup
CTO


Câu hỏi thường gặp 💬

Q. TypeScript, có nhất thiết phải biết không?

Cá nhân tôi khuyên bạn nên học TypeScript. Hệ sinh thái JavaScript đang dần chuyển sang TypeScript. Tuy nhiên, vì khóa học này cung cấp mã nguồn bằng JavaScript và hướng dẫn phần áp dụng TypeScript trong video, nên bạn vẫn có thể tiến hành chỉ với JavaScript. (Chỉ cần đổi tệp tsx, ts thành jsx, js và xóa phần :type, <type> là xong. Rất đơn giản)

Q. SWR có phải là một thư viện đã được kiểm chứng không?

Đây là thư viện được tạo bởi Vercel (trước đây là Zeit), đơn vị đã tạo ra Next.js và now.sh. Bạn hoàn toàn có thể tin tưởng và sử dụng. Nó có tới 16,000 sao trên GitHub đấy~

Q. Có lý do nào khiến bạn không sử dụng CRA khi thiết lập không?

Trong các bài giảng của mình, tôi luôn tuân thủ nguyên tắc thiết lập thủ công thay vì sử dụng CRA. Chỉ khi biết cách thiết lập thủ công, bạn mới có thể hiểu được nguyên lý của CRA. Tôi khuyên bạn nên sử dụng CRA sau khi đã nắm vững nguyên lý.

Vui lòng tham khảo trước khi bắt đầu khóa học!

  • Sử dụng Socket.io phiên bản 2. Bạn phải cài đặt phiên bản 2.
  • Dịch vụ thực tế đã được triển khai có thể kiểm tra tại sleact.nodebird.com .
  • Các câu hỏi thường gặp sẽ được tổng hợp thành FAQ và đăng trên blog Inflearn.
  • Nếu có vấn đề về video hoặc nội dung, vui lòng liên hệ và tôi sẽ chỉnh sửa rồi đăng lại.
  • Nếu có điều gì bạn muốn biết cách thực hiện mà không có trong bài giảng, nếu có nhiều người cùng đặt câu hỏi, tôi sẽ sản xuất thêm video bổ sung.

Kiến thức tiên quyết & Bài giảng liên quan

Kiến thức tiên quyết bắt buộc

Học React, Babel và cả Webpack thông qua tám trò chơi web!

Để học thêm về TypeScript!

Xu hướng hiện nay! Thế giới của TS ổn định hơn JS

Nếu bạn tò mò về các bài giảng clone coding khác?

Bản sao Twitter 22 giờ cực khủng!

 

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

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

  • Những người muốn học cú pháp React và bắt đầu phát triển web một cách nghiêm túc

  • Những ai muốn học bằng cách tạo ra một dịch vụ thực thụ thay vì chỉ là những bài hướng dẫn đơn giản.

  • Những người muốn học cách phát triển nâng cao tính ổn định bằng TypeScript

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

  • HTML/CSS

  • Kiến thức cơ bản về JS

  • Cú pháp cơ bản của React (Vui lòng xem khóa học miễn phí)

Xin chào
Đây là zerocho

67,671

Học viên

1,741

Đánh giá

9,765

Trả lời

4.8

Xếp hạng

25

Các khóa học

Ưu điểm trong các bài giảng của tôi là phần Q&A (Từng 2 lần giành giải Chiến thần giải đáp của Inflearn). Tôi sẽ cố gắng phản hồi trong vòng 24 giờ! Tôi sẽ trả lời với tinh thần như đang cùng bạn giải quyết vấn đề!

Một trong những điểm mạnh chính trong các khóa học của tôi là hỗ trợ Giải đáp thắc mắc (Q&A). (Từng hai lần giành giải thưởng "Vua giải đáp" của Inflearn) Tôi sẽ phản hồi các câu hỏi của bạn trong vòng 24 giờ và cố gắng hết sức để giúp đỡ bạn! Bạn sẽ cảm thấy như chúng ta đang cùng nhau giải quyết các vấn đề.

👉Bài giảng của ZeroCho
Lộ trình đầy đủ cho tất cả các bài giảng của ZeroCho. Lộ trình hoàn chỉnh cho tất cả các khóa học của tôi có sẵn tại đây.

– Tác giả của Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript và TypeScript Textbook 
– Người điều hành ZeroCho.com
– Hiện tại) Đang phát sóng về phát triển phần mềm trên YouTube tại ZeroCho TV 
– Cựu) CTO tại Smoretalk 
– Cựu) CTO của Today's Pickup (Sau khi thương vụ exit với Kakao Mobility, trở thành Trưởng bộ phận phát triển trẻ tuổi nhất tại Kakao Mobility)

  • Tác giả của Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScriptTypeScript Textbook

  • Người điều hành ZeroCho.com

  • Hiện đang vận hành kênh YouTube ZeroCho TV, chuyên về các chủ đề phát triển phần mềm

  • Cựu CTO tại SmoreTalk

  • Cựu CTO tại Today Pickup (được Kakao Mobility mua lại, nơi tôi trở thành trưởng nhóm phát triển trẻ tuổi nhất)

Thêm

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

Tất cả

46 bài giảng ∙ (11giờ 1phút)

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

Đánh giá

Tất cả

97 đánh giá

4.8

97 đánh giá

  • dongwooklee96님의 프로필 이미지
    dongwooklee96

    Đánh giá 5

    Đánh giá trung bình 4.4

    5

    50% đã tham gia

    Ban đầu, tôi nghĩ mình không phù hợp với các bài giảng trực tuyến vì có rất ít bài giảng vững chắc... Nhưng hiện tại tôi rất thích bài giảng này.

    • milkyway님의 프로필 이미지
      milkyway

      Đánh giá 6

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Tôi chưa nghe hết các bài giảng, nhưng tôi nghĩ chúng đủ hay và một cửa sổ bật lên trên Infron yêu cầu tôi viết bài đánh giá về khóa học xuất hiện nên tôi đã viết trước. Trước hết, như phần giới thiệu khóa học gợi ý, TypeScript được sử dụng, nhưng bạn có thể coi nó như một khóa học React, Webpack, SWR, Emotion và Socket.IO. Nếu bạn tham gia một khóa học về React + TypeScript, bạn có thể cảm thấy hơi thất vọng. Nói cách khác, không có vấn đề gì khi tham gia bài giảng ngay cả khi bạn không biết TypeScript. Tuy nhiên, lời khuyên của tôi là bạn nên tham gia một khóa học TypeScript tất cả trong một và tôi nghĩ đây là một khóa học tốt cho những ai muốn học React + TypeScript đồng thời sử dụng nhẹ TypeScript. Trước hết, vì là bài giảng trung thành với React nên rất tốt cho việc hiểu cấu trúc và hướng phát triển của React. Thứ hai, nó bắt đầu bằng việc giải thích các cài đặt ban đầu của Webpack. Ngay cả khi bạn không biết, nó sẽ không cản trở sự phát triển, nhưng tôi thực sự thích thông tin về các cài đặt ban đầu vì tôi nghĩ các cài đặt ban đầu thực sự quan trọng sau này. Thứ ba, khi áp dụng một kiểu, tốt nhất là đề xuất đơn vị trong đó thành phần kiểu sẽ được tạo và tiếp tục với lớp đó. Cuối cùng, thật tuyệt nếu đưa ra những lời giải thích cơ bản và mẹo về giao tiếp ổ cắm, nhưng hiện tại tôi đang nghe điều này nên tôi không thể đưa ra câu trả lời dứt khoát. Nhược điểm là, theo quan điểm của tôi, đây là một bài giảng đã có từ lâu nên rất nhiều mã đã thay đổi. Tuy nhiên, họ liên tục upload code cập nhật lên GitHub, và nếu gặp khó khăn, bạn có thể đặt câu hỏi trên bảng câu hỏi Infren hoặc Slack, họ sẽ phản hồi nhanh chóng nên nếu bạn sẵn sàng tự học, bạn hoàn toàn có thể bổ sung nó. Tôi cũng nghiên cứu nội dung truy vấn phản ứng GitHub song song với nội dung bài giảng. Chúng tôi đã cùng nhau lắng nghe và phản ánh, và những thay đổi được thực hiện với bản cập nhật thư viện ở mức độ có thể được giải quyết thông qua tìm kiếm đầy đủ. Cuối cùng, về mẹo nghe bài giảng, có một số thay đổi trong thiết lập ban đầu, vì vậy tôi nghĩ bạn nên sao chép và dán mã GitHub trước rồi nghe bài giảng từng bước và thử thiết lập. theo cách riêng của bạn. Và vì đây là bài giảng cơ bản nên nếu bạn đã sử dụng tốt React và TypeScript trong thực tế cũng như đã ứng dụng giao tiếp socket và sử dụng tốt thì nội dung có thể ít hơn bạn nghĩ. Cá nhân tôi đã học được rất nhiều điều từ bài giảng và đó là một trải nghiệm tốt.

      • dyonglove님의 프로필 이미지
        dyonglove

        Đánh giá 25

        Đánh giá trung bình 4.2

        4

        100% đã tham gia

        Giá không hề rẻ nhưng rất khó để được vào lớp. Nếu đó là một bài giảng được phát hành miễn phí trên YouTube, bạn có thể nghe ở một mức độ nào đó, nhưng nó không có tính tổ chức và họ luôn bảo bạn hãy xem tài liệu chính thức là tốt, nhưng về cơ bản thì đó là tài liệu chính thức. những điều cơ bản của toán học, nhưng đó vẫn là vai trò của người hướng dẫn. Phải không? Có tiêu chuẩn nên không phải ai cũng được vào lớp 1. Nếu nói rằng tất cả đều được trình bày theo văn bản chuẩn thì bạn chỉ cần nhìn vào thôi, nhưng nếu giải thích đại khái một số phần thì tùy người nghe có thể sẽ cảm thấy rất khó khăn và khó hiểu. Tôi nghĩ việc chia backend và frontend là một cách để tăng giá. Cảm giác như 2 bài giảng không được kết nối với nhau một cách tự nhiên. Mình tạo phần backend trước, nhưng khi đến quầy lễ tân xem thì phần mà thầy hướng dẫn tạo và phần config mà mình tạo ra đều không có ở đó. xảy ra, tôi cảm thấy khó chịu. Ngoài ra, vì tôi đã biết nội dung của các cấp độ trước nên tôi không thể dành thời gian cho tất cả các bài giảng với tư cách là một nhân viên văn phòng bận rộn. Giống như tôi không giỏi toán lắm, nhưng tôi không thể lúc nào cũng chỉ nhìn vào tập hợp. Ngay cả khi bạn quay một bài giảng ở cấp độ cao hơn bài giảng trước, tôi vẫn muốn bạn biến nó thành một bài giảng độc lập. Trên thực tế, sau khi nghe một số bài giảng, tôi đã suy nghĩ rất nhiều về việc truyền tải sự khó chịu mà tôi cảm thấy ở mức tối thiểu nhất có thể, vì vậy tôi nghĩ phần này dựa trên những ấn tượng mà tôi cảm nhận được khi nghe bài giảng TypeScript. Tuy nhiên, chúng chỉ thay đổi những gì vốn có. đã được tạo bằng JavaScript sang TypeScript. Là một người chưa nghe toàn bộ bài giảng, tôi không cảm thấy mình thu được nhiều lợi ích từ nó. Vì vậy, tôi đang cố gắng hiểu bằng cách nghe thêm vài lần nữa, nhưng vì bận rộn với công việc hàng ngày nên càng làm, tôi càng cảm thấy gánh nặng khi tham dự các bài giảng và cảm thấy tiếc nuối vì những lời phàn nàn đều nhắm vào mục tiêu. tại người hướng dẫn, nhưng hãy biết rằng có những ý kiến ​​​​như thế này. Đối với phần phân phối cuối cùng, có vẻ như câu hỏi về cách phân phối nó thực sự và xem kết quả rõ ràng vẫn chưa được giải quyết. Tôi nghĩ phong cách của mỗi người là khác nhau, nhưng cá nhân tôi không nghĩ đó là một bài giảng có chất lượng tốt so với mức giá. Tuy nhiên, tôi nghĩ bài giảng front-end này là bài giảng hay nhất trong số các bài giảng của Zerocho mà tôi từng học. Tôi rất biết ơn vì họ đã tắt nhạc ở phần trước và sau vì tôi nghĩ họ đang lắng nghe và xem xét ý kiến ​​của học sinh. Tôi hy vọng Zerocho tiếp tục phát triển hơn nữa trong tương lai.

        • zerocho
          Giảng viên

          Cảm ơn bạn đã nhận xét có giá trị của bạn. Hiện tại, tôi đang viết các ghi chú bài giảng và làm cho các lớp học trở nên có hệ thống hơn, nhưng vì khóa học TypeScript diễn ra sớm nên tôi nghĩ bạn có thể cảm thấy bận rộn hơn rất nhiều. Nếu tôi xuất bản một khóa học vào những ngày này, tôi sẽ kết hợp JavaScript và TypeScript thành một khóa học và phát hành phần JavaScript miễn phí trên YouTube. Mình sẽ dần dần đổi mới và hoàn thiện phần này. Về khóa học viết mã bản sao Slack, ban đầu chúng tôi dự định triển khai nó với giá 90.000 đến 100.000 won cho cả mặt trước và mặt sau, nhưng có nhiều người thấy khóa học đầy đủ quá nặng nề nên chúng tôi đã tách đối tượng mục tiêu. Tuy nhiên, vì chúng được phát hành riêng biệt nên các lỗi và cải tiến về khóa học đã được tích lũy cho từng loại và mối liên hệ giữa cả hai dường như hơi sai lệch một chút. Tôi sẽ thực hành lại và sửa chữa. Sẽ tốt hơn nếu bạn có thể cho chúng tôi biết những gì bạn biết. Bạn có thể đã có rất nhiều lời phàn nàn, nhưng tôi cảm thấy như bạn đã để lại bài đánh giá về lớp học với sự cân nhắc tối đa. Cảm ơn và xin lỗi vì đã để lại nhận xét chân thành của bạn.

      • dla14347593님의 프로필 이미지
        dla14347593

        Đánh giá 4

        Đánh giá trung bình 4.3

        4

        100% đã tham gia

        Tôi thường xuyên nghe các bài giảng của Zerocho và tôi cảm thấy những lời giải thích cũng như ví dụ đủ tốt để áp dụng vào thực tế. Tuy nhiên, có một điều đáng tiếc là đôi khi trong khóa học, những nguồn copy-paste hoặc không quá quan trọng lại được xử lý nhanh chóng nên đôi khi phải mất thời gian để áp mã. Tôi nghĩ sẽ dễ dàng hơn để kiểm tra và kiểm tra các ví dụ nếu có các nhánh git riêng cho mỗi khóa học. Ngoài ra, nếu bạn để lại link tới trang web hoặc tài liệu được đề cập hoặc giải thích ở giữa, tôi nghĩ sẽ dễ dàng tham khảo hơn. Cuối cùng, cảm ơn bạn đã luôn cung cấp những bài giảng hay.

        • ckdduf6651459님의 프로필 이미지
          ckdduf6651459

          Đánh giá 2

          Đánh giá trung bình 5.0

          5

          96% đã tham gia

          Nó thực sự tuyệt vời. Nó bao gồm rất nhiều công nghệ front-end tổng thể. Các câu trả lời chủ yếu là mã hóa bản sao Slack, vì vậy chúng được đăng tải nhanh chóng ở cấp độ giao tiếp socket thời gian thực nên giao tiếp rất tốt. Nếu bạn nghe khóa học React miễn phí của Zerocho và khóa học này, bạn sẽ có thể học được rất nhiều.

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

          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!

          835.737 ₫