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

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

24,572

Học viên

1,353

Đánh giá

629

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ả

75 đánh giá

4.9

75 đánh giá

  • nathomme님의 프로필 이미지
    nathomme

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    이제 막 개발자로 성장하고 있는 사람입니다. 실무에서 vue를 사용해야했고, 공부하기 위해 인프런을 찾아보는 과정에서 우연하게 짐코딩님의 강의를 듣게 되었습니다. 다른 강의(유튜브,인프런 등)도 들었지만, 짐코딩님은 깔끔한 딕션으로 공식문서 기반한 탄탄한 지식을 꼼꼼하게 알려주셔서 너무너무 만족해서 리액트까지 짐코딩님의 거의 모든 강의를 수강하는 사람이 되었습니다. ㅎㅎ 프론트엔드 개발자는 아니지만 덕분에 정말 많은 성장을 한 것 같아 기분이 좋아 수강평을 남깁니다. 이번 리액트 강의도 너무너무 좋다고 느끼고 있으며, 앞으로 런칭하시는 강의들도 다 들어볼 예정입니다. 양질의 강의 만들어 주셔서 감사드립니다. 다른분들도 이 강의뿐아니라 짐코딩 님의 다른 강의들도 수강하시며 함께 성장하시면 좋겠습니다. 감사합니다.

    • 짐코딩
      Giảng viên

      안녕하세요! 소중한 수강평 감사드립니다! 🥹 Vue부터 React까지 제 강의들을 꾸준히 수강해주시고, 성장하셨다니 정말 기쁩니다. 공식 문서 기반의 접근방식과 설명 스타일이 도움되었다는 말씀에 큰 보람을 느껴요~! 🎉 앞으로도 실무에 바로 적용할 수 있는 양질의 강의로 보답하겠습니다. 계속해서 응원하겠습니다! 감사합니다! 💪

  • 상은쓰님의 프로필 이미지
    상은쓰

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    웹 개발 입문부터 리액트 완벽 마스터 과정까지 들은 수강생입니다! 한 줄 요약: 다른 강의가 그냥 커피라면 이 강의는 T.O.P다. 😎 강사님께서는 복잡한 개념도 쉽게 설명해 주시고, 혼자 공부하는 인강의 단점인 '스스로 집중하기 어려움'을 중간중간 직접 실습하도록 유도해 주셔서 해결해 주십니다. 강의 중간에 "잠시 멈추고 먼저 해보세요"라는 말씀을 들을 때마다 느슨해졌던 긴장감이 다시 생기며, 주도적으로 문제를 해결하는 데 큰 도움이 되었습니다. 또한, 강의 교안과 깃헙 저장소에 코드가 체계적으로 잘 정리되어 있어 실습 중 에러가 발생하거나 나중에 다시 복습할 때도 따라가기 매우 수월했습니다. (이렇게 일일이 정리하시기 힘드셨을 텐데 덕분에 내용에 집중할 수 있었습니다. 😁) 특히, 강의 내용에 그치지 않고, 혼자서도 꾸준히 학습을 이어나갈 수 있도록 다양한 인사이트를 제공해 주시는 점과 추가 및 참고 영상들을 보면 최대한 많이 알려주시려고 하는 것이 느껴져서 감동받았습니다🤗🤗

    • 짐코딩
      Giảng viên

      이번 강의에서 수강생분들이 실습을 스스로 할 수 있도록 호흡을 최대한 조절했는데요. 알아주시니 감개무량합니다! 리액트 강의는 앞으로도 수강생분들에게 제공하고자 하는 인사이트가 있다면 추가 영상을 업로드할 계획입니다 💪 감사합니다 ☺️

  • 타겟토님의 프로필 이미지
    타겟토

    Đánh giá 12

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    쉽게 가르친다고해서 절대 얕게 가르치지 않아서 고민하지말고 저점매수하세요. 정말 입문자들이나 한번 공부했는데 방향성 못잡으시는 분들 그냥 과감하게 투자하셔도 될 것 같습니다. Spring boot로 졸작하다가 화면에 나오는게 너무 터무니 없어서 듣기 시작해서 화면도 예쁘게 나오고 즉각적으로 시각적인 결과물이 나오니까 너무 재밌어요!! 연휴에 빡세게 들어서 욕심내서 nest도 한 번 들어보고 싶다는 욕심이 들정도로 너무 강의 퀄에 만족하고 있습니다. ((그리고 예전에 다른 강의 들을땐 공식문서 읽으라고 해도 양도 너무많고 읽기도 귀찮아서 잘 안읽었는데 밑에 참고할 만한 링크들 싹 다 달아두셔서 진짜 신경 많이 쓴게 느껴질 정도 .ㅎ..ㅎ))

    • 짐코딩
      Giảng viên

      안녕하세요, 타겟토님! 소중한 수강평 감사합니다~! 쉽지만 깊이 있게 가르치려는 노력을 알아봐 주셔서 감개무량합니다 🥹 Spring Boot에서 React로 넘어오시면서 화면에 바로 결과물이 나타나는 재미를 느끼신다니 다행이에요~! 수강생 분들이 학습하기 편하도록 관련 링크들을 기재했었는데요 유용하게 쓰고 계시다니 다행입니다. "Next.js 완벽 마스터" 강의에서도 좋은 인사이트과 결과물을 얻을 수 있을거예요~! 💪 계속해서 도움 되는 강의 만들도록 노력하겠습니다. 감사합니다!

  • 곰코드님의 프로필 이미지
    곰코드

    Đánh giá 5

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    41% đã tham gia

    사람마다 다르겠지만 개인적으로 강의 스타일이 잘 맞아서 선생님 강의 다 듣고 있습니다 다른 React 강의보다 깊고 넓게 자세하게 설명해주셔서 재미있게 공부하고 있습니다! 특히 스냅샷 처럼 동작하는 State 편에서 감동 받았고 자바스크립트 지식과 React 지식을 분별해서 알려주셔서 어떤 지식이 부족한지 알 수 있어서 만족하고 있습니다. 추후에 타입스크립트를 활용한 강의나 AI랑 결합한 컨텐츠도 있으면 좋겠네요. 앞으로도 계속 성장하셔서 좋은 강의 많이 출시 해주세요~! (개인적으로 노드 강의가 국내에는 많이 없어서 출시 해주시면...조심스럽게 말씀드려봅니다!) 감사합니다! 유튜브도 잘 보고 있어요~

    • 짐코딩
      Giảng viên

      소중한 수강평 감사드립니다! 강의 스타일이 잘 맞으셨다니 정말 기쁩니다. 리액트의 깊이 있는 내용까지 함께 공부하시는 모습이 보람차네요. 특히 State의 스냅샷 개념에서 저도 힘을 많이 썼는데요 감동을 받으셨다니 감개무량합니다~! Node.js 강의는 조심스럽게 고민해볼게요 🙂 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪 유튜브도 계속 봐주셔서 감사합니다! 💪

  • 조성국님의 프로필 이미지
    조성국

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    90% đã tham gia

    꼼꼼하고 깔끔한 강의 ! 타입스크립트, nextjs 강의도 만들어주세요

    • 짐코딩
      Giảng viên

      소중한 수강평 감사드립니다! 꼼꼼하고 깔끔하게 강의를 준비한 보람이 있네요. 정말 기쁩니다. 타입스크립트와 Next.js 강의 요청 감사합니다! 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪

2.089.422 ₫

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!