강의

멘토링

로드맵

BEST
Programming

/

Front-end

Hoàn toàn làm chủ React: Từ các khái niệm cơ bản đến dự án LinCanvas

Bạn mới bắt đầu học React? Hãy tham gia khóa học này để nắm vững kiến thức cơ bản về React và tích lũy kinh nghiệm thực tế thông qua dự án LinCanvas. Sau đó, bạn có thể tự tin xin việc làm nhà phát triển front-end!

(4.8) 91 đánh giá

655 học viên

  • gymcoding
이론 실습 모두
프론트엔드개발자
React
react-query
react-router
React Context
TailwindCSS

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

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

  • "Dựa trên tài liệu chính thức" về cú pháp React mới nhất 🚀

  • Phương pháp Style - Mô-đun CSS, Styled Component, TailwindCSS, MUI 🎨

  • Reducer, Context API, các kỹ năng nâng cao và nhiều tính năng mới nhất của React 🆙

  • Cách tối ưu hóa hiệu suất React 🏎️

  • Cách giao tiếp mạng API bằng mô-đun Axios 🛜

  • Thư viện React Router 🚀 bắt buộc

  • Từ cơ bản đến nâng cao, tất cả những gì bạn cần biết về thư viện React Query mới nhất 📦

  • Cài đặt và triển khai biến môi trường Vite 🏠

Sự kiện Đánh giá Khóa học Inflearn đang diễn ra 🎉

Xin chào! 🙂
Tham gia khóa học React của chúng tôi và nhận ưu đãi đặc biệt! Chúng tôi hiện đang tổ chức sự kiện đánh giá ! 🎉
Sau khi hoàn thành khóa học, nếu bạn viết đánh giá trung thực và chân thành, chúng tôi sẽ tặng bạn một phiếu giảm giá khóa học !
(Đây là ưu đãi có giới hạn dành cho 20 người đầu tiên, vì vậy hãy nhanh tay tham gia!)
Để biết thêm chi tiết và cách tham gia sự kiện, vui lòng kiểm tra chương trình giảng dạy của khóa học! 🔥

Từ cơ bản đến thực tế: Học phát triển React hoàn chỉnh với LeanCanvas

Khóa học này là một khóa học phát triển React toàn diện, bao gồm mọi kỹ năng từ cơ bản đến nâng cao để ứng dụng thực tế. Dựa trên các thông số kỹ thuật React mới nhất và tài liệu chính thức, bạn sẽ được học một cách hệ thống các khái niệm cốt lõi như thiết kế thành phần, quản lý trạng thái và tối ưu hóa hiệu suất. Ngoài việc học ngữ pháp đơn giản, bạn sẽ có được kinh nghiệm thực tế với các dự án LeanCanvas dịch vụ web thực tế.

Dựa trên các tài liệu chính thức
Thông số kỹ thuật React mới nhất

Dự án LeanCanvas
Cách sử dụng nó trong cuộc sống thực

Tổng cộng 16 giờ
Bài giảng chuyên sâu!

Điểm đặc biệt của khóa học này là phần giải thích rõ ràng và dễ hiểu, giúp người mới bắt đầu dễ dàng tiếp cận. Hơn nữa, với hơn 16 giờ nội dung , khóa học không chỉ đơn thuần cung cấp kiến thức cơ bản mà còn cung cấp kiến thức và kỹ năng chuyên sâu, có thể áp dụng ngay vào các tình huống thực tế .

Tìm hiểu các thông số kỹ thuật React mới nhất dựa trên tài liệu chính thức

Nhiều phương pháp định dạng CSS khác nhau trong React

Cách giao tiếp với API máy chủ bằng Axios

Định tuyến máy khách bằng React Router

Xây dựng các ứng dụng web React được tối ưu hóa hiệu suất với tính năng ghi nhớ và React-Query

Cách thiết lập biến môi trường và triển khai React Web trong môi trường Vite

Những gì bạn sẽ học - React Basics

Bạn sẽ học các kiến thức cơ bản về React, bắt đầu với cú pháp JSX , cấu trúc thành phần và phương thức render . Bạn cũng sẽ hiểu về quản lý trạng thái và quy trình render lại , học cách truyền dữ liệu qua props và cách xử lý sự kiện . Chúng tôi cũng sẽ đề cập đến những kiến thức cơ bản như Strict Mode .

Phần 1. Trước khi bạn bắt đầu

Tìm hiểu các khái niệm cơ bản về Reactcách thiết lập môi trường phát triển , chúng tôi cung cấp lộ trình cho khóa học, tài liệu giảng dạy cần thiết và mã nguồn .

Phần 2. Hiểu về dự án

Tìm hiểu các khái niệm cốt lõi của React, bao gồm tạocấu trúc dự án, CSRSPA .

Phần 3. Hiểu về các thành phần

Tìm hiểu khái niệm về thành phần , tiêu chí phân tách và cách quản lý thành phần hiệu quả thông qua thực hành .

Phần 4. Học JSX

Tìm hiểu cú pháp JSXcách sử dụng JavaScript , đồng thời hiểu cấu trúc cơ bản của React .

Mục 5. Cơ bản về thành phần

Tìm hiểu các tính năng cơ bản của thành phần như truyền prop , hiển thị có điều kiện/danh sáchxử lý sự kiện .

Mục 6. Quỹ nhà nước

Tìm hiểu các kỹ thuật quản lý trạng thái cơ bản như khái niệm Trạng thái , giai đoạn kết xuất lạichế độ Nghiêm ngặt .

Những gì bạn sẽ học - React nâng cao

Tìm hiểu các kỹ thuật quản lý trạng thái nâng cao như ReducerImmer để cập nhật đối tượng và mảng , đồng thời khám phá các tính năng nâng cao của useState . Bạn cũng sẽ tìm hiểu về tối ưu hóa hiệu suấtxử lý sự kiện với useMemouseCallback , cũng như tham chiếu thành phần với useRef .

Mục 7. Kỹ năng nâng cao của tiểu bang

Tìm hiểu cách cập nhật đối tượng/mảng bằng Immer và cách sử dụng nâng cao của useState .

Phần 8. Tích hợp Logic với Reducer

Tìm hiểu cách tích hợp logic quản lý trạng thái với Reducerđơn giản hóa mã bằng cách áp dụng Immer .

Mục 9. Sự kiện chuyên sâu

Tìm hiểu các phương pháp xử lý sự kiện nâng cao, bao gồm các đối tượng sự kiện Reactxử lý sự cố bằng tiếng Hàn .

Phần 10. Cơ bản và nâng cao về API ngữ cảnh

Tìm hiểu cách chia sẻ trạng thái với Context API và tìm hiểu các kỹ thuật mở rộng ứng dụng bằng cách kết hợp nó với Reducers .

Mục 11. Vòng đời & Móc hiệu ứng

Tìm hiểu cách xử lý các tác vụ không đồng bộ bằng Hooks , lifecycleuseEffect .

Mục 12. Móc useRef

Tìm hiểu về tham chiếu thành phầnquản lý trạng thái thông qua cách sử dụng cơ bản và nâng cao của useRef .

Mục 13. Tối ưu hóa hiệu suất

Tìm hiểu cách ghi nhớtối ưu hóa hiệu suất bằng useMemouseCallback .

Những gì bạn sẽ học - Dự án LeanCanvas

Học phát triển web thực tế dựa trên các dự án LeanCanvas . Nắm vững toàn bộ quy trình của một dự án thực tế, bao gồm định dạng CSS , định tuyến phía máy khách với React Router , giao tiếp API , quản lý dữ liệu với React Querytriển khai Vite .

Mục 14. Bắt đầu một dự án web

Tạo một dự án LeanCanvas và dọn dẹp kiểu mã của bạn bằng các cài đặt ESLintPrettier .

Phần 15. Kiểu CSS React

Tìm hiểu nhiều kỹ thuật tạo kiểu CSS khác nhau như Mô-đun CSS , Thành phần được tạo kiểuTailwindCSS (tailwind-css) .

Phần 16. [LeanCanvas] Bộ định tuyến React

Tìm hiểu cách triển khai định tuyến máy khách bằng React Router (react-router) .

Phần 17. Tạo giao diện người dùng (với Tailwind CSS)

Tìm hiểu cách xây dựng giao diện người dùng hiệu quả bằng cách tách thành phần giao diện người dùngTailwindCSS .

Mục 18. Giao tiếp máy chủ API

Triển khai giao tiếp APItương tác với máy chủ bằng json-serverAxios.

Mục 19. Móc tùy chỉnh

Tìm hiểu cách tạo và sử dụng Custom Hooks của riêng bạn.

Mục 20. Thư viện truy vấn React

Tìm hiểu cách triển khai bộ nhớ đệm dữ liệuquản lý trạng thái bằng React Query (react-query) .

Mục 21. Thiết lập Biến Môi trường và Triển khai

Tìm hiểu cách triển khai ứng dụng React bằng Vercelthiết lập biến môi trường Vite .

Xem kiến thức khác biệt của người chơi 💪

HTMLCSS2

1. Giới thiệu về phát triển web HTML & CSS [Miễn phí]

Bằng cách học HTML và CSS, bạn sẽ có được kiến thức nền tảng cần thiết để xây dựng một trang web. Khóa học này được thiết kế dễ hiểu, vì vậy ngay cả người mới bắt đầu cũng không ngại học lập trình .

JavaScript,

2. Giới thiệu về ES6+ Modern JavaScript [Miễn phí/Trả phí]

JavaScript thường được cho là dễ, nhưng người mới bắt đầu có thể thấy nó khá khó. Đó là lý do tại sao khóa học này cung cấp nội dung dễ hiểu nhưng vẫn đầy đủ thông tin cho người mới bắt đầu.

Miễn phí - YouTube , Trả phí - Inflearn (bao gồm các dự án)

Tạo danh mục đầu tư 1

3. Tạo một trang web danh mục đầu tư và phân phối nó!

Nếu bạn đã học HTML, CSS và JavaScript, hãy thử tạo và triển khai trang portfolio của riêng bạn bằng cách sử dụng chúng. Kinh nghiệm thực tế sẽ giúp nâng cao đáng kể kỹ năng của bạn.

Cánh trước

Cánh trước [Miễn phí]

Khóa học này sẽ giúp bạn củng cố kiến thức cơ bản trước khi trở thành nhà phát triển front-end, bao gồm hệ thống mô-đun, Webpack và NPM.

Câu hỏi dự kiến Hỏi & Đáp

Q) Kiến thức của người chơi sẽ như thế nào?

Bạn có thể dễ dàng tham gia khóa học này chỉ với kiến thức cơ bản về HTML, CSS và JavaScript. Ngoài ra, việc học các framework front-end như React và Vue đòi hỏi kiến thức về các công nghệ hệ sinh thái front-end như npm và module systems. Tuy nhiên, khóa học sẽ bao quát toàn bộ các công nghệ này, vì vậy đừng lo lắng. Chúng tôi sẽ giúp bạn theo dõi.

Nhân tiện, khóa học chúng tôi ra mắt vì lý do này có tên là "Front-End Wings (Miễn phí)"! Để biết thêm chi tiết, vui lòng tham khảo lộ trình 💪

Q) Mã nguồn có được cung cấp không?

Có! Chúng tôi sẽ cung cấp địa chỉ GitHub trong phần giải thích mã nguồn và hướng dẫn chi tiết về cách xem và sử dụng mã nguồn hiệu quả trên GitHub.

Q) Có cung cấp ghi chú bài giảng không?

Có! Ghi chú bài giảng đã được cung cấp!

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

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

  • Những người đang chuẩn bị cho công việc lập trình viên front-end!

  • 공식 tài liệu là cơ sở vững chắc để bạn xây dựng kiến thức từ đầu!

  • Những nhà phát triển mới bắt đầu học React!

  • Người mới bắt đầu sử dụng React muốn có kinh nghiệm thực tế về dự án!

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

  • HTML và CSS

  • JavaScript

Xin chào
Đây là

25,103

Học viên

1,428

Đánh giá

637

Trả lời

4.9

Xếp hạng

17

Các khóa học

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

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

Tất cả

93 bài giảng ∙ (17giờ 34phú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ả

91 đánh giá

4.8

91 đánh giá

  • nathomme9758님의 프로필 이미지
    nathomme9758

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    今まさに開発者として成長している者です。 実務でVueを使う必要があり、勉強のためにInflearnを探していたところ、偶然ジムコーディングさんの講義を聴くことになりました。 他の講義(YouTube、Inflearnなど)も聴きましたが、ジムコーディングさんは、滑舌の良い発音で公式ドキュメントに基づいたしっかりとした知識を丁寧に教えてくださるので、とても満足し、Reactまでジムコーディングさんのほぼすべての講義を受講するようになりました。😊😊 フロントエンドの開発者ではありませんが、おかげで本当に多くの成長ができたような気がして、気持ちよく受講レビューを書いています。 今回のReactの講義もとても良いと感じており、今後ローンチされる講義もすべて受講する予定です。 質の高い講義を作成していただきありがとうございます。 他の方々も、この講義だけでなくジムコーディングさんの他の講義も受講して、一緒に成長できればと思います。 ありがとうございます。

    • gymcoding
      Giảng viên

      こんにちは!貴重な受講レビューありがとうございます!🥹 VueからReactまで私の講義を着実に受講してくださり、成長されたとのこと、本当に嬉しいです。公式ドキュメントに基づいたアプローチと説明スタイルが役に立ったというお言葉に、大きなやりがいを感じます~!🎉 今後も実務にすぐに適用できる質の高い講義でお返しいたします。引き続き応援しています! ありがとうございます!💪

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Web開発入門からリアクト完璧マスターコースまで聞いた受講生です! 一行の要約:他の講義がただのコーヒーであれば、この講義はT.O.Pだ。 😎 講師は複雑な概念も簡単に説明してくださり、一人で勉強する人講の欠点である「自分で集中しにくい」を中途半端に直接練習するよう誘導してくださって解決してくださります。講義の途中で「しばらく止めて最初にやってみましょう」という言葉を聞くたびに緩んだ緊張感が再び起こり、主導的に問題を解決するのに大きな助けとなりました。 また、講義の教案と羽毛のリポジトリにコードが体系的に整理されており、実習中にエラーが発生したり、後で再復習するときにも追いつくことは非常に簡単です。 (こんなに一日が整理するのが大変だったのにおかげで内容に集中できました。😁) 特に、講義の内容にとどまらず、一人でも着実に学習を続けていけるように様々なインサイトを提供していただく点と追加および参考映像を見れば、できるだけ多く教えていただきたいと感じて感動しました🤗🤗

    • gymcoding
      Giảng viên

      今回の講義で受講生の方々が実習を自らできるように呼吸を最大限調節しました。知っていただくと感慨無量です! リアクト講義は今後も受講生の方々に提供したいインサイトがあれば追加映像をアップロードする予定です💪 ありがとうございます☺️

  • spdhsrnvl123님의 프로필 이미지
    spdhsrnvl123

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    フロントエンド開発者に再挑戦しようと退勤後に公式ドキュメントだけ読んでいたのですが、とても退屈でした....でもジムコーディング先生に出会って、難しかった部分もとてもよく理解できるようになり、本当に最高の講義だと思います😢😢 React終了後にNextJSも受講予定です!!! ジムコーディング先生ありがとうございます!!😊

    • kjk12348067144님의 프로필 이미지
      kjk12348067144

      Đánh giá 12

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      簡単に教えていると言っても、決して内容が薄いわけではないので、悩まずに始めることをお勧めします。本当に初心者の方や、一度勉強したけど方向性を見失っている方には、ぜひ思い切って受講されると良いかと思います。 Spring bootで卒業制作をしていた時に、画面に表示されるものがどうにもならなくて受講し始めて、画面もきれいに表示されて、すぐに視覚的な結果が出てくるのでとても楽しいです!!連休にしっかり受講して、意欲が出てnestも一度受講してみたいという気持ちになるほど、とても講義の質に満足しています。 (そして、以前他の講義を受けた時は、公式ドキュメントを読むように言われても、量も多すぎて読むのも面倒で、あまり読まなかったのですが、下に参考になるリンクを全て付けてくださっていて、本当に丁寧に準備されているのが感じられるほどです。😊..😊)

      • gymcoding
        Giảng viên

        こんにちは、タゲットさん!貴重なレビューありがとうございます〜! 簡単だけど奥深く教えようとする努力を評価していただき、感無量です 🥹 Spring BootからReactに移行されて、画面にすぐ結果が表示される面白さを感じていらっしゃるそうで、何よりです〜! 受講生の皆さんが学習しやすいように関連リンクを記載しましたが、お役に立っているそうで何よりです。 「Next.js 徹底マスター」講座でも良いインサイトと結果を得られると思いますよ〜! 💪 引き続きお役に立てる講座を作成するよう努力します。ありがとうございます!

    • winzzone2님의 프로필 이미지
      winzzone2

      Đánh giá 5

      Đánh giá trung bình 5.0

      Đã chỉnh sửa

      5

      41% đã tham gia

      人それぞれだと思いますが、個人的には講義スタイルがとても合っているので、先生の講義を全部聞いています。 他のReactの講義より深く広く、詳しく説明してくださるので、楽しく勉強しています! 特にスナップショットのように動作するStateの回では感動しましたし、JavaScriptの知識とReactの知識を区別して教えてくださるので、どんな知識が不足しているのか分かるのが満足です。 今後、TypeScriptを活用した講義やAIと結合したコンテンツがあれば嬉しいです。 これからも成長を続けられて、良い講義をたくさんリリースしてくださいね~! (個人的にはNodeの講義が国内にはあまりないので、リリースしていただけると…遠慮がちに言ってみます!) ありがとうございます!YouTubeもよく見ています~

      • gymcoding
        Giảng viên

        貴重な受講評ありがとうございます!講義スタイルが合っていたとのこと、本当に嬉しいです。 Reactの深い内容まで一緒に勉強されている姿がやりがいを感じさせますね。特にStateのスナップショット概念で私も力を入れたので、感動していただけたのは感無量です! Node.jsの講義は慎重に検討してみますね 🙂 そして現在、Next.js + Notion CMSを活用したブログ作成講座(with Cursor AI)を準備中ですので、近いうちに良いお知らせができると思います。ご期待ください! 💪 YouTubeも引き続き見ていただきありがとうございます! 💪

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

    9.197 ₫

    24%

    2.089.620 ₫

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

    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!