강의

멘토링

로드맵

BEST
Programming

/

Front-end

Học React.js từng miếng nhỏ: Từ cơ bản đến thực chiến

Hãy cùng học từ khái niệm đến các dự án độc đáo, hoàn thiện JavaScript và React chỉ với khóa học này. Học nhanh, ứng dụng sâu: khóa học All-in-one kéo dài 17 giờ!

(4.9) 995 đánh giá

12,923 học viên

  • winterlood
꽉꽉 채워낸
뉴비 탈출
JavaScript
React
Node.js
kakao-tech

Đá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 dự án nhật ký cảm xúc được triển khai thực tế

  • JavaScript, Node.js, Web: Toàn tập cách hoạt động

  • React: Kỹ thuật viết mã sạch và tối ưu hóa hiệu suất

Nhấp vào hình ảnh để xem lộ trình.
> Liên kết lộ trình: https://link.onebitefe.com/r/3wokpi

Liên kết bài giảng của Series
> Phản ứng theo từng phần nhỏ: https://inf.run/v3XAj
>
TypeScript được chia thành từng phần nhỏ: https://inf.run/FpLm4
>
Tiếp theo cắt thành từng miếng nhỏ: https://inf.run/v3XAj


React, bạn có thể hoàn thành nó trong một bài giảng.
Tôi sẽ giúp bạn cắt nó thành từng miếng vừa ăn. 🔥

Nhờ sự yêu mến và ủng hộ của nhiều sinh viên, tôi đã có thể xuất bản các bài giảng thành sách với Insight Publishing.
Một lần nữa, tôi xin gửi lời cảm ơn chân thành nhất tới tất cả các em học sinh và những người đã quan tâm.


Phiên bản gia hạn 2024
Phản ứng cắt thành từng miếng vừa ăn
Hướng tới khóa học React thân thiện và dễ dàng nhất thế giới

Từ những điều cơ bản của JavaScript,
Dự án thực tế React.js

React.js là một thư viện JavaScript chạy trên Node.js.
Vì vậy, cuối cùng thì React.js chỉ là một công cụ giúp bạn sử dụng JavaScript tốt hơn.
Do đó, nếu bạn không hiểu rõ về JavaScript và Node.js, bạn không thể sử dụng React.js đúng cách.

Khóa học này sẽ dạy cho bạn những kiến ​​thức cơ bản về JavaScript, Node.js và React.js.
Nhưng sẽ không vui nếu bạn chỉ học nó! Bạn sẽ học React.js thông qua tổng cộng 3 dự án .
Thông qua quá trình này, bạn sẽ trở thành một nhà phát triển front-end có nền tảng vững chắc.

18 giờ giá trị
Tổng cộng có 3 dự án React.js

Khóa học này không chỉ dạy bạn cách sử dụng React.js.
Chúng tôi cũng đề cập đến nhiều kiến ​​thức khoa học máy tính liên quan đến React.js và tổng cộng 3 dự án.
Bạn có thể phát triển kỹ năng tư duy lập trình của mình trong khi tạo ứng dụng đếm số, danh sách việc cần làm và nhật ký cảm xúc.


Cấu trúc bài giảng

📌 Phần 1~2. JavaScript cơ bản và nâng cao

Trước khi tìm hiểu React.js, chúng ta hãy xem qua các khái niệm cơ bản và nâng cao về JavaScript.
Từ các khái niệm cơ bản như kiểu dữ liệu và toán tử,
Chúng ta cũng sẽ xem xét các chủ đề nâng cao hơn như phương pháp mảng và tác vụ bất đồng bộ.

Ngay cả khi bạn đã biết JavaScript, bạn vẫn nên xem lại để ôn lại kiến ​​thức.

📌 Phần 3. Node.js

React.js là công nghệ hoạt động trên Node.js. Do đó, bạn không thể biết React.js nếu không biết Node.js.
Trong Phần 3, chúng ta sẽ xem Node.js là gì, tại sao nó được tạo ra và nó có những tính năng gì, thông qua trải nghiệm thực tế.

📌 Phần 4. Giới thiệu về React.js

Hãy cùng tìm hiểu React.js là gì, nó khác với các công nghệ khác như thế nào và xem xét kỹ hơn cách nó giải quyết những hạn chế của các công nghệ hiện có. Trong quá trình này, chúng ta sẽ hiểu sâu hơn về React.js.

📌 Phần 5. Giới thiệu về React.js

Tạo một ứng dụng React mới và khám phá các tính năng cơ bản của React, chẳng hạn như Component, State và Props.
Bạn sẽ học tất cả các chức năng cơ bản thông qua các bài tập thực hành và hiểu đầy đủ các chức năng đó thông qua các tài liệu minh họa.

⛳️ Mục 6. Dự án React.js 1. Ứng dụng Counter

Hãy cùng tạo dự án React đầu tiên của chúng ta, "Counter App".
Đây là một dự án đơn giản nhưng là cách hay để hiểu rõ hơn về cách React.js hoạt động và triết lý thiết kế của nó.

📌 Mục 7. Vòng đời

Giống như tất cả con người đều được sinh ra và trải qua thời thơ ấu, tuổi thiếu niên, tuổi trẻ, tuổi già và đến tuổi xế chiều, tất cả các thành phần React đều được sinh ra, thay đổi và biến mất. Vòng đời của một thành phần này được gọi là vòng đời.

Hiểu và kiểm soát vòng đời của một thành phần sẽ cho phép bạn thực hiện các hành động bạn muốn vào thời điểm bạn muốn. Vì vậy, trong Phần 7, chúng ta sẽ xem xét vòng đời và cách kiểm soát nó bằng thực hành.

⛳️ Phần 8. Dự án React.js 2. Danh sách việc cần làm

Hãy cùng tạo dự án React thứ hai, "Ứng dụng danh sách việc cần làm".
Trong khi triển khai dự án này, chúng tôi đã triển khai dữ liệu CRUD (thêm, tra cứu, sửa đổi, xóa) và các chức năng tìm kiếm.
Chúng ta sẽ xem xét một số cách xử lý dữ liệu dạng mảng trong React.

📌 Mục 9. useReducer - Phân tách logic quản lý trạng thái

Việc phân tách mã theo vai trò luôn là một ưu điểm trong phát triển phần mềm.
Hãy cùng xem xét useReducer, công cụ giúp phân tách mã quản lý trạng thái phức tạp.
Thực hành bằng cách áp dụng trực tiếp vào dự án danh sách việc cần làm.

📌 Mục 10. Tối ưu hóa

Nếu có bất kỳ hoạt động không cần thiết nào trong dự án của chúng ta, chúng ta nên mạnh dạn loại bỏ chúng!
Hãy cùng xem xét một số kỹ thuật tối ưu hóa cho Ứng dụng React giúp loại bỏ tính toán lãng phí.
Thực hành bằng cách áp dụng trực tiếp vào dự án danh sách việc cần làm.

📌 Mục 11. Bối cảnh

Hãy cùng xem xét Context, nơi cung cấp dữ liệu cho nhiều thành phần khác nhau theo cách ngắn gọn và rõ ràng hơn.
Thực hành bằng cách áp dụng trực tiếp vào dự án danh sách việc cần làm.

⛳️ Mục 12. Dự án React.js 3. Nhật ký cảm xúc

Hãy cùng tạo nhật ký cảm xúc cho dự án cuối kỳ của riêng mình bằng cách sử dụng tất cả các khái niệm đã học cho đến nay.
Ngoài ra, chúng tôi sử dụng cơ sở dữ liệu của trình duyệt và triển khai dự án để người dùng có thể truy cập.
Liên kết demo: https://emotion-diary.winterlood.com/

📌 Mục 13. Kết luận

Bài giảng kết thúc, nhưng việc học của chúng ta thì không.
Hãy cùng thảo luận về hướng đi mà chúng ta nên thực hiện trong tương lai.


Người tốt bụng nhất thế giới
4 Nguyên tắc giảng dạy React

📣 Quy tắc 1. Luôn giải thích một cách đơn giản, thân thiện và trực quan.

Bất kể nội dung có phức tạp và khó khăn đến đâu!
Chúng tôi đã nỗ lực để làm cho nội dung dễ hiểu và thân thiện hơn bằng các phương tiện trực quan.
Đây là tất cả hình ảnh tôi tự tạo, vì vậy bạn có thể chụp lại và sử dụng chúng trong các bài đăng trên blog về học tập của mình. 😃

📣 Quy tắc 2. Phát âm sao cho vẫn có thể nghe được ngay cả khi chơi ở tốc độ cao.

Nếu bạn nghe lại để xem lại hoặc đang vội, hãy nghe ở tốc độ cao!
Chúng tôi đặc biệt chú ý để đảm bảo rằng cách phát âm của bạn có thể nghe rõ với tốc độ lên đến 2x 😎
(Hãy nghe video bên dưới, phát ở tốc độ 1,5x!)

📣 Quy tắc 3. Lưu mã của bạn để dễ tìm

Chẳng phải sẽ là một điều đáng tiếc nếu chỉ giữ lại những quy tắc thực hành mà bạn đã dày công viết ra sao?
Tôi cẩn thận sắp xếp mã thành các phần để tôi có thể quay lại và xem lại bất cứ lúc nào.
Liên kết kho lưu trữ mã: https://github.com/winterlood/onebite-react-v2

📣 Quy tắc 4. Giao tiếp liên tục

Tập hợp trong một cộng đồng chỉ dành cho sinh viên để chia sẻ kiến ​​thức và tin tức với nhau và cùng phát triển.

Tham gia kênh Discord của chúng tôi: https://discord.gg/YDqhkH8XkN
(Bạn có thể kiểm tra phòng chat mở trong tài liệu lớp học)

Câu hỏi dự kiến ​​Q&A 💬

H. Ai đủ điều kiện tham gia khóa học này?

Bài giảng này được tối ưu hóa cho những người có hiểu biết về HTML và CSS.
Tuy nhiên, vì có phần giải thích trong suốt bài giảng nên bạn không cần phải ghi nhớ toàn bộ nội dung!

H. Tôi mới bắt đầu. Tôi không biết nhiều về JavaScript hoặc Node.js. Tôi có thể tham gia được không?

Vâng, chào mừng! 🙋‍♂️
Khóa học này sẽ dạy cho bạn kiến ​​thức về JavaScript và Node.js, những kiến ​​thức cần thiết để học React.
Do đó, với bài giảng này, trước tiên bạn có thể học được kiến ​​thức cơ bản cần thiết cho React và sau đó tìm hiểu về React.

H. Nội dung này được trình bày trong lớp học ở mức độ nào?

Chúng tôi sẽ trình bày mọi thứ, từ lý do React ra đời, đến cách sử dụng cơ bản và các kỹ thuật tối ưu hóa hiệu suất cho quá trình phát triển sản phẩm thực tế.
Ngoài ra, chúng tôi thực sự triển khai nó bằng Vercel và hoàn thiện nó bằng cài đặt Open Graph.
Nó chứa đựng tất cả kiến ​​thức bạn cần để phát triển một dự án web từ đầu đến cuối.


Danh mục đầu tư và video cá nhân

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

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

  • Người mới tiếp cận React

  • Người muốn học React.js dù chưa thạo JavaScript và Node.js!

  • Người muốn học tập cùng với đông đảo học viên thông qua các thử thách hoàn thành khóa học.

  • Người muốn tạo ra kết quả đáng tự hào khi hoàn thành khóa học.

  • Người đã từng viết HTML & CSS dù chỉ một lần (không cần phải giỏi đâu!)

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

  • 👋 Kiến thức rất cơ bản về HTML, CSS

Xin chào
Đây là

31,596

Học viên

1,861

Đánh giá

1,367

Trả lời

4.9

Xếp hạng

5

Các khóa học

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

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

Tất cả

98 bài giảng ∙ (18giờ 33phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

995 đánh giá

4.9

995 đánh giá

  • sunjune18284435님의 프로필 이미지
    sunjune18284435

    Đánh giá 27

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    I actually bought the lecture for a thousand won on April Fool's Day, just in case... like a lottery ticket... but I feel like I really won the lottery. I feel bad that I'm studying such a good lecture at almost a free price... The lecture is so kind and the examples are explained in a way that's easy to understand, so it's really great. Thank you so much, I love you... 😭😭

    • hm52073678님의 프로필 이미지
      hm52073678

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      茂みをゴマの葉に包む感じ 講義内容を感じずに美味しいです〜

      • inchestry님의 프로필 이미지
        inchestry

        Đánh giá 5

        Đánh giá trung bình 5.0

        5

        64% đã tham gia

        まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に'ありがとう'という表現がおかしくてよく使わないのですが。 それでも、この講義は'非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。

        • samgangjumak님의 프로필 이미지
          samgangjumak

          Đánh giá 8

          Đánh giá trung bình 4.9

          5

          76% đã tham gia

          他サイトで英語で先にリアクトを受講しました。英語を100%理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            Đánh giá 2

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            これらの説明力とその内容は含まれていますが、この価格は言葉ではありません。 倍増してもらえそうなのに本当に上司が狂ったような講義.. まだすべて消化したとは言い難いですが、繰り返し学習しながらマスターしてみます。 良い講義を作ってくれてありがとう:)!

            1.018.021 ₫

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

            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!