강의

멘토링

로드맵

Inflearn brand logo image
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) 94 đánh giá

2,876 học viên

  • zerocho
Clone Coding
React
TypeScript
Webpack
Babel

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

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

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

65,525

Học viên

1,602

Đánh giá

9,702

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ả

94 đánh giá

4.8

94 đánh giá

  • dyonglove님의 프로필 이미지
    dyonglove

    Đánh giá 25

    Đánh giá trung bình 4.2

    4

    100% đã tham gia

    It's not cheap, but it's so hard to take the class. If it's a lecture that's free on YouTube, you can listen to it, but it's not organized, and they always tell you to look at the official document because it's all in it... It's good to provide the official document, but there is a basic math textbook, but isn't that the role of the instructor? Just because there's a textbook doesn't mean everyone gets a first-class grade. If you say that it's all in the textbook, so you can look at it, and if you explain some parts roughly, it can be very difficult and confusing for some people. I think that separating the backend and the frontend is also a way to raise the price. The two lectures don't feel naturally connected, and when I first create the backend, when I come to the frontend and look at it, the part that the instructor created doesn't have the configuration part in the part that I created... I feel uneasy every time that happens. Also, since the previous level is already known, as a busy office worker, I can't invest time in all the lectures. It's like I'm not very good at math, but I can't just look at sets all the time. Even if you record a lecture at a higher level than the previous lecture, I hope you make it an independent lecture. In fact, I thought a lot about how to convey the inconveniences I felt while listening to several lectures without being too exaggerated, so I think this part came from my impressions while listening to the TypeScript lecture.. You just change what you already made in JavaScript to TypeScript, so I didn't feel like I gained much since I didn't listen to the previous lecture. So I'm trying to listen to it a few more times to understand it, but since I'm also busy with my main job, the burden of listening to the lecture increases, and I feel sorry that my complaints are directed at the instructor, but I hope you understand that there are opinions like this. The last part about distribution is also like that, so I feel like my curiosity about how to actually distribute it and see visible results is not resolved. I think everyone has a different style, but I personally don't think it's a good quality lecture for the price. However, I think this front-end lecture is the best among the lectures I've listened to from Zerocho. I think that the fact that you turned off the music at the beginning and end was a consideration for the opinions of the students, so I'm grateful. I hope that you will continue to develop as a Zerocho.

    • zerocho
      Giảng viên

      Thank you for your valuable opinion. I am currently writing lecture notes and making more systematic classes for the course, but TypeScript is a very early course, so it must have felt much more chaotic. If I were to release a course these days, I would have released a combined JavaScript + TypeScript course and released the JavaScript part for free on YouTube. I will gradually renew and improve this part. Regarding the Slack Clone Coding course, I originally planned to release it for 90,000 to 100,000 won for the front and backend courses, but many people found full-stack courses burdensome, so I separated the target groups. However, since I released them separately, there were bugs and course improvements piled up, so there were some parts that were not connected. I will practice again and fix it. It would be better if you could tell me what you know. I know you had a lot of complaints, but I feel that you were as considerate as possible when leaving your review. Thank you for leaving a sincere review, and I apologize.

  • dla14347593님의 프로필 이미지
    dla14347593

    Đánh giá 4

    Đánh giá trung bình 4.3

    4

    100% đã tham gia

    I've been listening to Zerocho's lectures consistently, and I feel that the explanations and examples are good enough to be used in practice. However, one thing I regret is that sometimes the lectures are copied and pasted, or the source code that is not very important is processed quickly, so it takes time to apply the code. If git branches are separated by lecture, it would be easier to check and test the examples. Also, if you leave links to the explanations or mentioned sites or documents in the middle, it would be easier to refer to them. Lastly, thank you for always giving great lectures.

    • ckdduf6651459님의 프로필 이미지
      ckdduf6651459

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      96% đã tham gia

      It's really great. It covers a lot of the overall front-end technology. The answers are almost like Slack clone coding, so they're quick to the point of real-time socket communication, so communication is really good. If you listen to Zerocho's free React lecture and listen to this, you'll get a lot out of it.

      • milkyway님의 프로필 이미지
        milkyway

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        I haven't finished the lecture yet, but I think it's a good enough lecture, and I'm writing it in advance because a pop-up popped up on Inflearn asking me to write a course review. First of all, as the course introduction says, it uses TypeScript, but you can think of it as a React, Webpack, SWR, Emotion, and Socket.IO course. If you're taking the course to study React + TypeScript, you might be a little disappointed. On the other hand, even if you don't know TypeScript, there's no problem taking the course. However, I recommend the All-in-One TypeScript course, and I think it's a good course for those who want to study React + TypeScript while also using TypeScript. First of all, since it's a lecture that's faithful to React, it's good for setting up React structure and development direction. Second, it tells you the initial settings of Webpack and starts, but even if you don't know it, you can still develop, but since I think the initial settings are really important later, the content on the initial settings was really good. Third, it was good that it suggested which units to create style components in when applying styles and proceeded with the class as is. Lastly, it was good to give basic explanations and tips on socket communication, but I can't give you a definitive answer because I'm listening to it now. The downside is that, in my opinion, it's been a while since the lecture came out, so there are a lot of changes in the code. However, since they are consistently uploading updated codes to GitHub, and if you have any difficulties, you can ask questions on the Inflearn Q&A board or Slack and they will answer quickly, so if you want to study on your own, you can sufficiently supplement it. I'm listening while reflecting the contents of GitHub react-query in parallel with the lecture contents, and I was able to search and solve the contents that changed due to library updates. Lastly, as for the lecture listening tip, for the initial setup, there are some changes, so instead of following along, copy and paste the GitHub code, listen to the lecture step by step, and try setting it up on your own, I think it's a good idea. Also, since it's a basic lecture, if you're already using React and TypeScript well in practice and have experience applying socket communication, there may be less content than you think. Personally, I gained a lot from it, so it was a good lecture experience.

        • dongwooklee96님의 프로필 이미지
          dongwooklee96

          Đánh giá 3

          Đánh giá trung bình 4.3

          5

          50% đã tham gia

          Originally, I thought I wasn't suited for online lectures because there weren't many solid lectures.... But I'm currently taking this course and it's really fun.

          837.038 ₫

          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!