강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

Từ khái niệm cơ bản đến các dự án độc đáo, hãy cùng học JavaScript và React một cách toàn diện qua khóa học này. Học ngắn gọn, ứng dụng lâu dài với khóa học All-in-one dài 17 giờ!

(4.9) 1,192 đánh giá

13,873 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

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

Đá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.

  • Phát triển dự án Nhật ký cảm xúc thực tế được triển khai

  • JavaScript, Node.js, Cách thức hoạt động của Web All-in-One

  • React Viết Code Sạch Sẽ và Kỹ Thuật Tối Ưu Hiệu Suất

Nhấp vào hình ảnh để chuyển đến lộ trình học tập.
> Link lộ trình: https://link.onebitefe.com/r/3wokpi

Link khóa học Series
> React cắt nhỏ từng miếng vừa ăn :https://inf.run/v3XAj
>
TypeScript cắt nhỏ từng miếng vừa ăn : https://inf.run/FpLm4
>
Next.js cắt nhỏ từng miếng vừa ăn : https://inf.run/v3XAj



React, bạn có thể hoàn thành với chỉ một khóa học.
Tôi sẽ giúp bạn học từng phần nhỏ dễ tiêu hóa. 🔥

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


Phiên bản đổi mới 2024
React chia nhỏ từng miếng vừa ăn
Hướng tới khóa học React thân thiện nhất và dễ hiểu nhất trên thế giới

Từ cơ bản JavaScript,
đến dự án thực chiến React.js

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

Khóa học này sẽ học từ cơ bản JavaScript, qua Node.js đến React.js.
Nhưng nếu chỉ học thôi thì lại nhàm chán rồi! Học React.js thông qua tổng cộng 3 dự án.
Trong quá trình này, bạn sẽ trở thành một frontend developer với nền tảng vững chắc.

18 giờ nội dung
Tổng cộng 3 dự án React.js

Khóa học này không chỉ dạy cách sử dụng đơn giản React.js.
Chúng ta sẽ cùng tìm hiểu nhiều kiến thức CS xoay quanh React.js và thực hiện tổng cộng 3 dự án
Counter App, Todo List, Emotion Diary để cùng nhau phát triển tư duy lập trình.


Cấu trúc khóa học

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

Trước khi học React.js, chúng ta sẽ tìm hiểu các khái niệm cơ bản và nâng cao của JavaScript.
Từ các khái niệm cơ bản như kiểu dữ liệu và toán tử,
đến các nội dung nâng cao như phương thức mảng và xử lý bất đồng bộ.

Ngay cả khi bạn đã biết JavaScript, đây cũng là cơ hội tốt để ôn tập lại.

📌 Phần 3. Node.js

React.js là một công nghệ hoạt động dựa trên Node.js. Do đó, không thể hiểu React.js mà không biết Node.js
Trong phần 3, chúng ta sẽ tìm hiểu Node.js là gì, tại sao nó ra đời, và nó có những tính năng gì thông qua các bài thực hành.

📌 Phần 4. Tổng quan về React.js

React.js là gì và nó có những điểm khác biệt gì so với các công nghệ khác, cùng tìm hiểu chi tiết về cách nó giải quyết những hạn chế mà các công nghệ trước đây gặp phải. Qua quá trình này, chúng ta sẽ hiểu sâu hơn về React.js.

📌 Phần 5. Nhập môn React.js

Tạo một React App mới và tìm hiểu về các chức năng cơ bản của React như Component, State, Props, v.v.
Thực hành sử dụng tất cả các chức năng cơ bản và hiểu một cách trực quan hoàn hảo thông qua các tài liệu hình ảnh.

⛳️ Phần 6. Dự án React.js 1. Ứng dụng đếm số

Tạo dự án React đầu tiên của bạn - "Ứng dụng đếm số".
Đây là một dự án đơn giản nhưng giúp bạn hiểu được nguyên lý hoạt động và triết lý thiết kế của React.js.

📌 Phần 7. Vòng đời (Lifecycle)

Giống như mọi con người sinh ra đều trải qua giai đoạn trẻ sơ sinh, thiếu niên, thanh niên, tuổi già và đến lúc hoàng hôn, tất cả các component React cũng được sinh ra, thay đổi và biến mất. Chu kỳ sống của component như vậy được gọi là lifecycle.

Khi hiểu và có thể kiểm soát vòng đời của component, bạn sẽ có thể thực hiện các hành động mong muốn vào đúng thời điểm cần thiết.Do đó, trong phần 7, chúng ta sẽ tìm hiểu về vòng đời và cách kiểm soát nó thông qua thực hành.

⛳️ Phần 8. Dự án React.js 2. Danh sách công việc

Tạo trực tiếp dự án React thứ hai "Ứng dụng Todo List".
Trong quá trình triển khai dự án này, chúng ta sẽ tìm hiểu về CRUD dữ liệu (thêm, xem, sửa, xóa) và chức năng tìm kiếm,
cùng nhiều phương pháp xử lý dữ liệu dạng mảng trong React.

📌 Phần 9. useReducer - Tách biệt logic quản lý trạng thái

Việc tách biệt code theo vai trò luôn là một đức tính trong phát triển phần mềm.
Chúng ta sẽ tìm hiểu về useReducer giúp tách biệt code quản lý state phức tạp
và thực hành bằng cách áp dụng trực tiếp vào dự án todolist

📌 Phần 10. Tối ưu hóa

Nếu trong dự án của chúng ta tồn tại những phép tính không cần thiết? Chúng ta phải dũng cảm loại bỏ chúng!
Hãy tìm hiểu các kỹ thuật tối ưu hóa khác nhau của React App để loại bỏ những phép tính lãng phí
và thực hành bằng cách áp dụng trực tiếp vào dự án danh sách công việc

📌 Phần 11. Context

Tìm hiểu về Context giúp cung cấp dữ liệu cho các component khác nhau một cách ngắn gọn và gọn gàng hơn
và thực hành bằng cách áp dụng trực tiếp vào dự án danh sách công việc

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

Cho đến nay, chúng ta sẽ huy động tổng hợp tất cả các khái niệm đã học để tự tay tạo ra dự án cuối cùng - Nhật ký Cảm xúc.
Ngoài ra, chúng ta sẽ 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.
Link demo: https://emotion-diary.winterlood.com/

📌 Phần 13. Kết thúc

Khóa học kết thúc nhưng việc học của chúng ta không bao giờ dừng lại.
Hãy cùng thảo luận về hướng đi mà chúng ta nên theo đuổi trong tương lai.


4 nguyên tắc cho khóa học React
thân thiện nhất thế giới

📣 Nguyên tắc 1. Nhất định phải giải thích một cách dễ hiểu và thân thiện, trực quan

Dù nội dung có phức tạp và khó đến đâu!
Tôi đã không ngừng nỗ lực để giải thích một cách thân thiện và dễ hiểu cùng với tài liệu trực quan.
Tất cả đều là hình ảnh tôi tự tạo nên bạn có thể chụp màn hình và sử dụng cho bài đăng blog học tập của mình. 😃

📣 Nguyên tắc 2. Phát âm rõ ràng để có thể nghe được ngay cả khi phát với tốc độ nhanh

Nếu bạn đang nghe lại để ôn tập hoặc bận rộn, hãy thử nghe với tốc độ tăng tốc!
Tôi đã đặc biệt chú ý để phát âm nghe rõ ràng ngay cả khi tăng tốc lên đến 2 lần 😎
(Hãy thử nghe video phát với tốc độ 1.5 lần bên dưới!)

📣 Nguyên tắc 3. Lưu trữ code sao cho dễ tìm kiếm

Thật đáng tiếc nếu để những đoạn code thực hành đã cố gắng viết ra một cách bừa bãi phải không?
Tôi đã chú ý để bạn có thể lưu trữ code được phân chia tốt theo từng phần, giúp bạn có thể xem lại bất cứ lúc nào.
Link kho lưu trữ code:https://github.com/winterlood/onebite-react-v2

📣 Nguyên tắc 4. Giao tiếp không ngừng nghỉ

Tập hợp tại cộng đồng dành riêng cho học viên để chia sẻ kiến thức, tin tức và cùng nhau phát triển.

Tham gia kênh Discord: https://discord.gg/YDqhkH8XkN
(Bạn có thể xem phòng chat mở trong tài liệu bài học)

Câu hỏi thường gặp Q&A 💬

Câu hỏi: Đối tượng học viên của khóa học là ai?

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

Q. Tôi mới bắt đầu. Tôi không biết nhiều về JavaScript, Node.js thì có nên học không?

Vâng, chào mừng bạn! 🙋‍♂️
Khóa học này sẽ cung cấp cho bạn kiến thức JavaScript và Node.js cần thiết để học React.
Do đó, chỉ với một khóa học này, bạn có thể học trước kiến thức nền tảng cần thiết cho React, và sau đó học luôn cả React.

Q. Khóa học sẽ đề cập đến mức độ nào?

React ra đời từ lý do gì, cách sử dụng cơ bản, và các kỹ thuật tối ưu hóa hiệu suất cho phát triển production thực tế.
Ngoài ra, sử dụng Vercel để triển khai thực tế và hoàn thiện với cấu hình Open Graph,
khóa học chứa đựng tất cả kiến thức để phát triển dự án web từ đầu đến cuối.


Portfolio 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 bắt đầu tiếp cận React lần đầu

  • Người muốn học React.js mặc dù chưa biết nhiều về JavaScript và Node.js

  • Người muốn học cùng nhiều học viên khác thông qua các thử thách hoàn thành khóa học

  • Người muốn tạo ra sản phẩm đáng tự hào khi hoàn thành khóa học

  • HTML & CSS đã từng viết ít nhất một lần (không cần giỏi đâu!)

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

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

Xin chào
Đây là

36,108

Học viên

2,420

Đánh giá

1,544

Trả lời

4.9

Xếp hạng

13

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ả

1,192 đánh giá

4.9

1,192 đánh giá

  • sunjune18284435님의 프로필 이미지
    sunjune18284435

    Đánh giá 27

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    I actually bought the course for 1,000 won on April Fool's Day, just in case... like a lottery ticket... but it feels like I've really won the lottery. I feel bad that I'm listening to and studying such a great course for almost free... The lectures are so kind, and the examples are explained so clearly, it's really, really good. Thank you so much, and I love you... 😭😭

    • hm52073678님의 프로필 이미지
      hm52073678

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      Cảm giác như ăn thịt cổ bọc trong lá tía tô vậy. Nội dung bài giảng ngon mà không béo ngậy.

      • samgangjumak님의 프로필 이미지
        samgangjumak

        Đánh giá 8

        Đánh giá trung bình 4.9

        5

        76% đã tham gia

        Lần đầu tiên tôi lấy React bằng tiếng Anh từ một trang web khác. Vì tôi đang tham gia khóa học mà không hiểu 100% tiếng Anh nên tôi gặp vấn đề với việc hiểu nhầm các khái niệm hoặc không hiểu lời giải thích. Vì vậy, tôi đã tìm kiếm một khóa học React tại Infrun và nó có vẻ tốt nên tôi đã tham gia. Bài giảng bắt đầu bằng JavaScript nên thật tuyệt khi có thể học được JavaScript. Tôi đã học được rất nhiều về React vì nó giải thích rõ ràng các khái niệm. Một điều đáng thất vọng là khi giải thích A->C, có một số phần ở giữa sẽ dễ hiểu hơn nhiều nếu A->B->C cũng được giải thích cho đến B. . Nhiều người khác cũng để lại thắc mắc về những điều này trong phần hỏi đáp của bài giảng. Nếu chỉ cải thiện những phần này thì tôi nghĩ đó thực sự sẽ là một bài giảng 100 điểm.

        • inchestry님의 프로필 이미지
          inchestry

          Đánh giá 5

          Đánh giá trung bình 5.0

          5

          64% đã tham gia

          Tôi chưa xem hết, nhưng theo quan điểm của tôi sau khi mua một số khóa học React, đây là khóa học hay nhất. Các bài giảng khác có thể được tạo ra bởi các nhà phát triển JavaScript có kinh nghiệm. Nhưng có một vấn đề. Những người có kinh nghiệm giảng bài khi họ đã có sẵn hình ảnh về cách hoạt động của mã trong đầu. Vì vậy, tôi vừa giảng bài vừa nói và viết mã giống như chú Bob. Tuy nhiên, từ góc nhìn của người mới bắt đầu, thật khó chịu khi làm theo mã mà không có một bức tranh rõ ràng về những gì đang diễn ra trong đầu bạn và thậm chí bạn còn không hiểu khái niệm này. Trong bài giảng này, khái niệm này trước tiên được giải thích thông qua hình ảnh để giải thích điều gì sẽ xảy ra khi bạn sử dụng một chức năng nhất định trước mã, sau đó mã sẽ được hiển thị trong đầu. Hầu hết người hướng dẫn là nhà phát triển. Vì tôi không phải là nhà giáo dục/chuyên ngành giáo dục nên tôi cảm thấy có quá nhiều bài giảng được biên soạn không theo tiêu chuẩn về phương pháp giảng dạy hiệu quả, nhưng bài giảng này thực sự là hay nhất. Tôi thậm chí còn chưa xem toàn bộ bài giảng nhưng tôi đã mua TypeScript. Chất lượng tuyệt vời nhưng giá cả của khóa học cũng rất hợp lý. Tôi cũng mua một cuốn sách để có thể uống thêm một tách cà phê nữa. 'Cảm ơn bạn' vì những bài giảng mà tôi đã trả bằng tiền của mình. Đó là một cách diễn đạt kỳ lạ nên tôi không sử dụng nó thường xuyên. Tuy nhiên, bài giảng này ' Cảm ơn bạn rất nhiều'. Nếu có thể, sẽ thật tuyệt nếu bạn cũng có thể cung cấp các bài giảng về Express.js, Next.Js và TDD!

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            Đánh giá 2

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            Nó có khả năng giải thích và nội dung như vậy, nhưng mức giá này chẳng có ý nghĩa gì. Tôi nghĩ bạn có thể trả gấp đôi số tiền đó, nhưng bài giảng thực sự có vẻ như ông chủ bị điên. Thật khó để nói rằng tôi đã lĩnh hội được mọi thứ nhưng tôi sẽ thành thạo nó thông qua việc học hỏi nhiều lần. Cảm ơn bạn đã làm một bài giảng tuyệt vời :) !!

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

            4.236 ₫

            29%

            1.013.572 ₫

            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!