Written By: Mai Ngọc Hưng
Gmail: maingochungnuce@gmail.com
Bài viết gốc: https://www.robinwieruch.de/learn-react-js

Do sự phổ biến và nhu cầu công việc, nhiều nhà phát triển JavaScript muốn học React. Dưới đây tôi cung cấp cho người mới bắt đầu một cái nhìn tổng quan toàn diện về cách tiếp cận việc học React mà không bị phân tâm hoặc bị choáng ngợp bởi các chủ đề khác trên đường đi.

1. Tìm hiểu React [Nhanh Chóng || Dễ Dàng]

Không có con đường tắt nào để học, bạn phải chịu khó. Kể cả những developer cũng thế. Muốn trở thành một developer, bạn luôn luôn phải học hỏi cái mới . Học tập luôn là một thách thức và cơ hội để trau dồi kỹ năng miễn là thử thách phải cân bằng với khả năng của bạn. Đó là lý do tại sao phải mất thời gian để học React.

Học React hãy nhớ chỉ học React theo từng bước và đừng để bản thân bị phân tâm bởi các công nghệ khác trên quá trình học.

Có một số công nghệ mà nhiều người muốn học ngay cùng với React. Dưới đây là một số phần các bạn không nên kết hợp học cùng với React khi mới bắt đầu:

  • Tìm hiểu React với TypeScript? Không thể nào, hãy học React trước trước khi chuyển đổi JavaScript sang ngôn ngữ khác. Việc trộn lẫn mã được nhập với TypeScript trong JavaScript vani và các thành phần React của bạn sẽ trở nên lộn xộn và choáng ngợp khi bạn chưa học React. Ngoài ra, 99% các hướng dẫn và khóa học về React ngoài kia không được viết bằng TypeScript, khiến việc theo dõi kiến thức cơ bản trở nên khó hơn.

  • Tìm hiểu React với Redux? Redux là một thư viện quản lý trạng thái phổ biến cho JavaScript. Phần lớn các ứng dụng React không cần Redux hoặc bất kỳ thư viện quản lý trạng thái nào khác. Redux làm cho React phức tạp hơn cho người mới bắt đầu.

  • Học React với Gatsby? Gatsby.js gần đây đã trở nên phổ biến hơn. Đây là giải pháp tối ưu để tạo các trang web tĩnh như trang web cá nhân, blog và trang đích. Tuy nhiên, Gatsby đi kèm với các kiến thức của riêng mình như GraphQL, hệ thống plugin lớn của nó và các vấn đề xảy ra với các ứng dụng React được kết xuất từ phía máy chủ. Đừng nhầm tưởng Gatsby.js giúp bạn học React dễ dàng hơn. Nó làm cho việc viết các trang web tĩnh với React dễ dàng hơn, nhưng không phải tự học React.

Đây chỉ là một số phần mà người mới bắt đầu sử dụng React có xu hướng liên kết với React khi mới bắt đầu. Bắt đầu với React trước, hãy nhớ Học từng thứ một.

2. Một số lưu ý khi mới bắt đầu học React

React sử dụng rất nhiều JavaScript. Bạn không thể học React nếu không có JavaScript.

Học React hay JavaScript trước?

Trước tiên bạn nên hiểu những điều cơ bản về JavaScript, thường được gọi là JavaScript ES5, và có kiến thức tốt về HTML và CSS. React cũng sử dụng cú pháp JavaScript, thường được gọi là JavaScript ES6 và hơn thế nữa (ES7, ES8, ES9). Sẽ rất hợp lý khi sử dụng ít nhất JavaScript ES6 để học React.

Nhiều người khuyên bạn nên học tất cả các nguyên tắc cơ bản về JavaScript như là điều kiện tiên quyết trước khi học React. Tuy nhiên các kỹ năng mà họ đề xuất vượt xa những gì cần thiết để xây dựng các ứng dụng cơ bản với React.js. Một vài trong số chúng có thể là:

  • Functional vs object-oriented programming
  • Declarative vs imperative programming
  • Error Handling
  • Regular Expressions
  • Prototypical Inheritance -> ES6 Class

Học React hay jQuery?

Trong lịch sử, jQuery đã lấp đầy khoảng cách giữa JavaScript vani và các libraries /frameworks hiện đại như React, Angular và Vue. JavaScript ban đầu không hiệu quả trong trình duyệt như ngày nay. Đó là lý do tại sao thực sự có nhu cầu về jQuery. Tuy nhiên, JavaScript hiện đại có khả năng tự xử lý mọi thứ. Do đó, khuyến nghị của tôi: Đừng bận tâm với jQuery.

Nếu bạn làm việc trên một ứng dụng lớn hơn sử dụng React tại công việc mới của mình, có khả năng bạn sẽ phải đối mặt với jQuery. Hãy thử di chuyển mã từ jQuery sang React như một cơ hội học tập.

3. Học React từng bước từng bước

Một số tài liệu và cách học React

Học với React Docs

React Docs như một thư viện dành cho người mới bắt đầu bao gồm:

  • Hướng dẫn chi tiết dành cho người mới bắt đầu
  • Miễn phí, không có lợi ích thương mại
  • Tài liệu mới nhất và cập nhật cho các phiên bản mới

Học với Project

Sau khi xem qua phần hướng dẫn dành cho người mới bắt đầu của tài liệu React và đã học được những kiến thức cơ bản về React từ đầu, hãy tiếp tục học bằng cách xây dựng một dự án. Ví dụ, cũng có những người muốn học React bằng cách xây dựng trò chơi. Bạn sẽ tìm thấy rất nhiều triển khai React Tic Tac Toe ở đó. Tự triển khai trò chơi trong React và so sánh giải pháp của bạn với các giải pháp khác. Bạn sẽ học được từ những sai lầm của mình và học cách đánh giá mã nguồn của mình so với cách triển khai của người khác.

Học mỗi ngày

Thách thức bản thân để viết mã mỗi ngày. Bạn có thể tham gia thử thách 100 ngày viết mã, viết về nó trên Twitter hoặc trên trang web của bạn. Hãy biến nó thành một thói quen hàng ngày. Chỉ khi gắn bó với nó, kiên trì và viết mã hàng ngày, cuối cùng bạn mới trở thành một React developer. Đó là một cuộc chạy marathon chứ không phải chạy nước rút.

Học với cộng đồng

Học tập trong môi trường cộng đồng sẽ thúc đẩy sự tiến bộ của bạn. Hãy tiếp xúc với phản hồi của các developer khác bằng cách chia sẻ công việc của bạn. Nếu bạn đã đạt được một mốc quan trọng với dự án React của mình, hãy hiển thị nó cho những người khác và yêu cầu phản hồi của họ. Đây là một số nền tảng thường được biết đến để chia sẻ ý tưởng xung quanh React:

Bạn sẽ không chỉ nhận được phản hồi có giá trị ở đó mà còn có thể tìm hiểu sâu hơn về React bằng cách tham gia các cuộc thảo luận khác. Là một phần của cộng đồng. Một cách tuyệt vời để học điều gì đó mới là giải thích điều đó cho người khác. Ngay cả khi mới bắt đầu gần đây, bạn có thể đi trước một người mới bắt đầu React và có thể giúp họ.

Một số phần khi học về React

Sau khi bạn đã xem qua hướng dẫn dành cho người mới bắt đầu trong tài liệu của React và bắt đầu tự thực hiện một dự án React, hãy học cách sử dụng React:

  • Học về React’s JSX syntax
  • Học về React Components
  • Học về React Component Composition
  • Học về React Props
  • Học về React State

4. Học React nâng cao

Sau khi bạn tìm hiểu các kiến thức cơ bản với React components, props/state và cú pháp JSX của React, bạn có thể tìm hiểu sâu hơn với các khái niệm và mẫu React nâng cao.

  • React Hooks
  • React Higher-Order Components
  • React Render Prop Components
  • React Context

5. Học React roadmap

Sau khi bạn đã học React và cảm thấy thành thạo với các chi tiết triển khai cơ bản và nâng cao của nó, có rất nhiều cách để bạn có thể thực hiện để nâng cao hơn nữa các kỹ năng React của mình. Hệ sinh thái React mở rộng.

  • React + React Route: Điều hướng trong ứng dụng React
  • React + Firebase: Kết nối React với Cơ sở dữ liệu và triển khai Xác thực / Ủy quyền Người dùng
  • React + GraphQL: Kết nối React với giao diện GraphQL với ứng dụng phụ trợ Node.js

6. Tổng kết

Trong bài viết này, chúng ta đã tìm hiểu khái quát về ReactJs dành cho người mới bắt đầu
Hy vọng bài viết sẽ giúp ích các bạn trong quá trình học tập.

Hãy luôn tò mò, cam kết thực hiện nó mỗi ngày bằng cách làm bẩn tay, chạy marathon chứ không phải chạy nước rút. Thử thách bản thân để nâng cao kỹ năng của bạn với tư cách là nhà phát triển và trở thành nhà phát triển React trong năm nay!