강의

멘토링

커뮤니티

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) 107 đánh giá

723 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

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

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

26,271

Học viên

1,577

Đánh giá

663

Trả lời

4.9

Xếp hạng

18

Các khóa học

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

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ả

107 đánh giá

4.8

107 đánh giá

  • nathomme9758님의 프로필 이미지
    nathomme9758

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Tôi là một người mới bắt đầu phát triển phần mềm. Tôi cần sử dụng Vue trong công việc thực tế và trong quá trình tìm kiếm Inflearn để học, tôi tình cờ được nghe giảng của Jim Coding. Tôi cũng đã nghe các bài giảng khác (YouTube, Inflearn, v.v.), nhưng Jim Coding đã giải thích một cách tỉ mỉ kiến thức vững chắc dựa trên tài liệu chính thức với giọng đọc rõ ràng, vì vậy tôi rất hài lòng và trở thành người theo học hầu hết các bài giảng của Jim Coding, kể cả React. 😊😊 Tôi không phải là một nhà phát triển front-end, nhưng nhờ có anh ấy, tôi cảm thấy mình đã trưởng thành rất nhiều nên tôi để lại đánh giá này. Tôi cảm thấy bài giảng React này cũng rất hay và tôi dự định sẽ nghe tất cả các bài giảng mà anh ấy sẽ ra mắt trong tương lai. Cảm ơn anh vì đã tạo ra những bài giảng chất lượng cao. Tôi hy vọng những người khác cũng sẽ cùng nhau phát triển bằng cách tham gia không chỉ bài giảng này mà còn cả những bài giảng khác của Jim Coding. Cảm ơn bạn.

    • gymcoding
      Giảng viên

      Xin chào! Cảm ơn bạn rất nhiều vì những đánh giá quý giá! 🥹 Tôi thực sự rất vui khi bạn đã liên tục theo dõi các bài giảng của tôi từ Vue đến React và đã có những bước tiến vượt bậc. Tôi cảm thấy vô cùng tự hào khi nghe bạn nói rằng phương pháp tiếp cận dựa trên tài liệu chính thức và phong cách giải thích của tôi đã giúp ích cho bạn! 🎉 Tôi sẽ tiếp tục đền đáp các bạn bằng những bài giảng chất lượng cao có thể áp dụng ngay vào thực tế. Tôi sẽ luôn ủng hộ các bạn! Cảm ơn bạn! 💪

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi là một sinh viên đã học mọi thứ từ giới thiệu đến phát triển web cho đến thành thạo React! Tóm tắt một dòng: Nếu các bài giảng khác chỉ là cà phê thì bài giảng này là T.O.P. 😎 Người hướng dẫn giải thích các khái niệm phức tạp một cách dễ hiểu, đồng thời giải quyết nhược điểm của việc tự học bài giảng trực tuyến bằng cách khuyến khích học viên thỉnh thoảng tự thực hành. Mỗi lần tôi nghe “Tạm dừng một lát và thử trước” giữa bài giảng, sự căng thẳng đã mất đã được phục hồi và nó giúp ích rất nhiều trong việc chủ động giải quyết vấn đề. Ngoài ra, code được sắp xếp hợp lý trong tài liệu bài giảng và kho GitHub nên rất dễ theo dõi khi xảy ra lỗi trong quá trình thực hành hoặc khi xem lại sau này. (Chắc hẳn việc sắp xếp mọi thứ như thế này rất khó khăn nhưng nhờ có bạn mà tôi mới có thể tập trung vào nội dung. 😁) Đặc biệt, tôi rất ấn tượng bởi nó vượt xa nội dung bài giảng và cung cấp nhiều hiểu biết sâu sắc khác nhau để học sinh có thể tiếp tục tự học và cố gắng dạy nhiều nhất có thể thông qua các video bổ sung và tham khảo🤗🤗

    • gymcoding
      Giảng viên

      Trong bài giảng này, chúng tôi kiểm soát hơi thở nhiều nhất có thể để học viên có thể tự luyện tập. Tôi rất cảm động bạn biết đấy! Chúng tôi dự định tải lên các video bổ sung cho các bài giảng về React trong tương lai nếu có những hiểu biết sâu sắc mà chúng tôi muốn cung cấp cho sinh viên 💪 Cảm ơn bạn ☺️

  • hyejo님의 프로필 이미지
    hyejo

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    31% đã tham gia

    Tôi thực sự đang thích thú theo dõi khóa học React 완벽 마스터 của thầy 짐코딩! Điều tôi thích nhất là giọng nói tràn đầy năng lượng và vui vẻ của thầy khiến tôi không có thời gian để cảm thấy buồn chán, ngay cả khi nghe sau giờ tan làm trong trạng thái mệt mỏi, tôi vẫn có thể tập trung liên tục. Những phần khó hiểu được thầy giải thích từng bước một từ góc nhìn của người mới bắt đầu, điều chỉnh theo trình độ của học viên, thực sự đã giúp ích rất nhiều cho tôi. Có rất nhiều khoảnh khắc tôi hiểu ngay lập tức và nghĩ "À, ra là luồng hoạt động như thế này!". Vì khóa học React hay như vậy nên tôi tự nhiên sẽ tiếp tục theo học khóa Next.js 완벽 마스터. Tôi đã có niềm tin rằng nếu là khóa học của thầy 짐코딩 thì tôi sẽ có thể hoàn thành đến cùng! Mong thầy tiếp tục tạo ra nhiều khóa học hay! Từ góc độ người học, điều này thực sự là một nguồn động lực lớn 🙌

    • gymcoding
      Giảng viên

      Cảm ơn bạn rất nhiều vì đã để lại đánh giá quý giá như vậy! Thật tự hào khi biết rằng bạn vẫn tập trung nghe giảng dù trong tình trạng mệt mỏi sau giờ làm việc. Khi giảng dạy, tôi luôn trăn trở "Làm thế nào để truyền đạt một cách dễ hiểu và không nhàm chán", nên thật may mắn khi tâm huyết đó đã được truyền tải đến bạn! Cảm ơn bạn rất nhiều vì sau khóa học React, bạn dự định tiếp tục với khóa Next.js Hoàn Hảo. Khóa học Next.js cũng được chuẩn bị dễ hiểu cho người mới bắt đầu và có chiều sâu dựa trên tài liệu chính thức! Tôi sẽ tiếp tục đáp lại bằng những khóa học chất lượng. Cố lên! 👍

  • spdhsrnvl123님의 프로필 이미지
    spdhsrnvl123

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Tôi muốn thử thách lại với việc trở thành frontend developer nên sau giờ làm chỉ đọc tài liệu chính thức thôi nhưng quá nhàm chán....Nhưng khi được tiếp xúc với thầy 짐코딩, những phần khó hiểu cũng trở nên dễ hiểu và thực sự là khóa học tuyệt vời nhất😢😢 Sau khi học xong React tôi cũng dự định sẽ học NextJS!!! Cảm ơn thầy 짐코딩!! 😊

    • kjk12348067144님의 프로필 이미지
      kjk12348067144

      Đánh giá 12

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      Không phải cứ dạy dễ là dạy hời hợt đâu nhé, nên đừng chần chừ mà hãy đăng ký ngay đi. Thật sự những người mới bắt đầu hoặc những người đã học một lần mà vẫn chưa định hướng được, có thể cứ mạnh dạn đăng ký cũng được ạ. Đang làm đồ án tốt nghiệp bằng Spring boot thì thấy những gì hiển thị trên màn hình quá tệ nên bắt đầu học. Màn hình cũng hiển thị đẹp hơn và vì có kết quả hiển thị ngay lập tức nên thấy rất thú vị!! Trong kỳ nghỉ, tôi đã học rất chăm chỉ đến mức nảy sinh ý muốn tham khảo thêm cả nest nữa. Tôi rất hài lòng về chất lượng bài giảng. ((Và trước đây, khi học các khóa khác, dù được bảo đọc tài liệu chính thức, nhưng vì lượng quá nhiều và lười đọc nên tôi không đọc kỹ, nhưng ở đây, thầy đã để lại tất cả các link tham khảo bên dưới, đến mức thực sự cảm nhận được sự tận tâm của thầy. 😊..😊))

      • gymcoding
        Giảng viên

        Chào bạn, Targeto! Cảm ơn bạn rất nhiều vì bài đánh giá khóa học quý báu~! Thật sự rất xúc động khi bạn nhận thấy nỗ lực giảng dạy sao cho vừa dễ hiểu lại vừa sâu sắc của chúng tôi 🥹 Rất vui khi bạn thấy thú vị với việc chuyển từ Spring Boot sang React và cảm nhận được niềm vui khi thấy kết quả hiện ra ngay trên màn hình~! Chúng tôi đã cung cấp các liên kết liên quan để học viên dễ dàng học tập hơn, và rất mừng khi bạn thấy chúng hữu ích. Bạn chắc chắn sẽ nhận được những kiến thức và kết quả tốt từ khóa học "Next.js 완벽 마스터"~! 💪 Chúng tôi sẽ tiếp tục nỗ lực tạo ra các khóa học hữu ích. Cảm ơn bạn!

    2.087.836 ₫

    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!