강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Mã hóa Slack Clone [Trò chuyện trực tiếp với React]

Hãy bắt đầu phát triển web React chuyên nghiệp bằng cách tạo theo dịch vụ Slack! Từ đăng ký thành viên, đăng nhập, tạo phòng, trò chuyện trực tiếp!

(4.8) 97 đánh giá

2,886 học viên

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

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

  • zerocho
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

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 phía trước (không có CRA)

  • SWR (thay thế Redux)

  • Emotion (thành phần được định dạng)

  • Socket.io trò chuyện trực tiếp

Một ứng dụng trò chuyện được tạo ra bằng chính đôi tay của tôi,
Hiệu quả hơn, đơn giản hơn! 💬

Trong bài giảng này?

Được tạo ra sau dịch vụ Slack
Hãy bắt đầu phát triển web React hoàn chỉnh!
(Slack + React, còn gọi là Sleact!)

Phát triển web React,
Tôi nên học như thế nào?

Tôi nghe nói Redux không còn được sử dụng nhiều hiện nay...
Tôi nghe nói bạn đang chuyển từ JavaScript sang TypeScript...
Có đúng vậy không?

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


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

Bất kỳ ai muốn học cách phát triển web bằng React

Dành cho những ai muốn học lại TypeScript

Bất kỳ ai muốn triển khai phần front-end thông qua mã hóa bản sao


Bản sao chậm không giây,
Những lo ngại về phía trước đã được giải quyết hoàn toàn!

  • Chúng tôi phát triển các dịch vụ bằng TypeScript để theo kịp các xu hướng front-end mới nhất . Tuy nhiên, đối với những người không muốn sử dụng TypeScript, bài giảng đã được cấu trúc sao cho có thể sử dụng JavaScript. (Đã cung cấp mã nguồn JavaScript!)
  • Tôi không sử dụng redux. Thay vào đó, hãy sử dụng thư viện có tên là SWR .
  • thực hiện tất cả các chức năng cần thiết để triển khai ứng dụng trò chuyện, chẳng hạn như đăng ký thành viên, đăng nhập, tạo phòng trò chuyện, mời người dùng, trò chuyện thời gian thực, nhắc đến người dùng và tải hình ảnh.
  • Mặc dù không được giải thích trong bài giảng, mã nguồn phần mềm cũng được cung cấp.

Học những kỹ năng này.

Phản ứng

SWR

Socket.io

Cảm xúc

Kiểu chữ

Webpack+Babel


Hãy tự làm nhé!

Đăng ký, đăng nhập, không gian làm việc
Triển khai nhiều chức năng không gian làm việc khác nhau

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


#1
Mã nguồn

Cung cấp.

https://github.com/zerocho/sleact (phím tắt)

#2
Trả lời câu hỏi một cách nhanh chóng
Tôi sẽ trả lời bạn.

Điều tuyệt vời nhất trong khóa học của tôi là phần Hỏi & Đáp. Nếu bạn có bất kỳ câu hỏi nào, chúng tôi sẽ trả lời trong vòng một ngày.
Hãy học tập tích cực bằng cách thoải mái đặt câu hỏi về nội dung liên quan đến khóa học.
Nó sẽ giúp bạn hiểu nội dung tốt hơn!


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

Blog Zerocho
Điều hành kênh YouTube

Sách bán chạy nhất về Phát triển Web
tác giả

Công ty TNHH Pickup Today
Giám đốc công nghệ


Những câu hỏi thường gặp 💬

H. TypeScript, tôi có thực sự cần biết nó không?

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

H. SWR có phải là thư viện đã được xác minh không?

Một thư viện được tạo ra bởi Vercel (trước đây là Zeit), những người tạo ra Next.js và now.sh. Bạn có thể tin tưởng và sử dụng nó. GitHub có 16.000 ngôi sao~

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

Tôi luôn đặt ra nguyên tắc là không sử dụng CRA trong bài giảng của mình mà phải thiết lập thủ công. Bạn cần biết cách thiết lập thủ công để có thể hiểu cách CRA hoạt động. Tôi khuyên bạn nên sử dụng CRA sau khi bạn hiểu được các nguyên tắc.

Xin lưu ý trước khi tham gia lớp học!

  • Socket.io sử dụng phiên bản 2 . Bạn phải cài đặt phiên bản 2.
  • Bạn có thể tìm thấy dịch vụ triển khai thực tế tại sleact.nodebird.com .
  • Những câu hỏi thường gặp sẽ được biên soạn thành FAQ và đăng trên blog Inflearn.
  • Nếu có vấn đề gì với video hoặc nội dung, vui lòng liên hệ với chúng tôi, chúng tôi sẽ chỉnh sửa lại và tải lên.
  • Nếu có điều gì bạn tò mò muốn thực hiện mà không có trong bài giảng và nhiều người đặt câu hỏi, tôi sẽ tạo một video tặng kèm.

Kiến thức của người chơi và bài giảng liên quan

Kiến thức cần thiết cho người chơi

Tám trò chơi web với React, Babel và Webpack!

Nếu bạn muốn tìm hiểu thêm về TypeScript!

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

Bạn có tò mò về các bài học lập trình bản sao khác không?

Một bản sao Twitter điên rồ kéo dài 22 giờ!

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

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

  • Bất kỳ ai muốn học ngữ pháp React và bắt đầu phát triển web một cách nghiêm túc

  • Dành cho những ai muốn tạo ra một dịch vụ phù hợp thay vì chỉ là một hướng dẫn đơn giản

  • TypeScript để học cách phát triển với độ ổn định cao

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

  • HTML/CSS

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

  • Cơ bản về cú pháp React (Hãy đến và nghe khóa học miễn phí)

Xin chào
Đây là

66,611

Học viên

1,689

Đánh giá

9,755

Trả lời

4.8

Xếp hạng

22

Các khóa học

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

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á

  • 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.

      • 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.

        • dongwooklee96님의 프로필 이미지
          dongwooklee96

          Đánh giá 4

          Đánh giá trung bình 4.5

          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.

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

          595.754 ₫

          28%

          834.056 ₫

          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!