React Beginner Guide cho người mới bắt đầu trong năm 2022

Cần tải những gì để sử dụng React

Để xây dựng các dự án React quy mô đầy đủ trên máy tính của bạn, có một số công cụ thiết yếu mà mọi nhà phát triển cần:

• Node / NPM (Nên cài đặt phiên bản "LTS")
• Một trình soạn thảo mã tốt (nên dùng Visual Studio Code )
• Git (cài đặt nó tại Git-SCM.com và tạo một tài khoản miễn phí tại Github.com )

Node được định nghĩa là thời gian chạy JavaScript. Khi được kết hợp với một trình quản lý gói như NPM (bạn nhận được cùng lúc cài đặt Node), nó đóng vai trò như một công cụ mạnh mẽ để dễ dàng quản lý các thư viện trong các dự án React của bạn.

Không có Node và NPM, nếu bạn muốn thêm một thư viện JavaScript mới vào dự án React của mình (như day.js , một thư viện được sử dụng để định dạng ngày tháng), bạn sẽ cần phải thêm một bộ <script>thẻ theo cách thủ công và tự quản lý chúng.

Với Node và NPM (hoặc một trình quản lý gói khác như Yarn), chúng ta có thể chỉ cần chạy một lệnh để cài đặt bất kỳ thư viện JavaScript nào mà chúng ta thích. Để cài đặt day.js, chúng tôi sẽ chạy:

npm install dayjs

Tạo các dự án React như thế nào?

Nếu bạn đang bắt đầu một dự án React mới, bạn sẽ không bao giờ cần tạo các tệp, thư mục và tệp package.json của riêng mình (nơi bạn liệt kê tất cả các thư viện trong dự án của mình).

Có ba công cụ tuyệt vời sẽ giúp bạn tạo ngay một dự án React mới trong một lệnh duy nhất.

• Tạo ứng dụng React
• Vite
• Next.js

Khi bạn đã cài đặt Node / NPM (xem phần đầu của bài viết), bạn có thể sử dụng bất kỳ công cụ nào sau đây để tạo một dự án React mới bằng các lệnh sau:

# for Create React App

npx create-react-app my-react-app

# for Vite

npm init vite@latest my-react-app --template react 

# for Next.js

npx create

Tạo ứng dụng React là một cách đáng tin cậy và được thiết lập tốt để tạo một dự án React mới và cung cấp cho bạn các công cụ và tập lệnh cần thiết để chạy, phát triển và xây dựng dự án của bạn để triển khai.

Tạo Ứng dụng React sử dụng Babel và Webpack để truyền tải và đóng gói mã của bạn (nói ngắn gọn là để có thể chạy trong trình duyệt).

Ngoài ra, nó cung cấp các công cụ phát triển tuyệt vời như ESLint để "giải quyết" mã của bạn hoặc để cho bạn biết về các vấn đề trong mã bạn đã viết khi viết nó.

Mặt khác, Vite sử dụng một gói khác với Create React App. Thay vì sử dụng Webpack, nó sử dụng một gói gọi là ESBuild, đơn đặt hàng nhanh hơn.

Nói tóm lại, Vite (tiếng Pháp có nghĩa là "nhanh" hoặc "nhanh chóng"), là một giải pháp thay thế mới hơn, nhanh hơn cho Create React App.

Cần biết rằng một trong những thứ này không giống những thứ khác, đó là Next.js.

Điều đáng nói là Next.js là một React framework , có nghĩa là nó là một cách "bao gồm pin" để xây dựng các ứng dụng React và bao gồm rất nhiều tính năng không phải là một phần của React.

Những khái niệm React nào cần học?

React có rất nhiều khái niệm mới cung cấp cho chúng ta một cách mới để suy nghĩ về việc xây dựng các ứng dụng trên web nói chung.

Nếu bạn chưa có kinh nghiệm xây dựng ứng dụng React trực tiếp, làm thế nào bạn biết được những khái niệm và tính năng nào của thư viện mà bạn sẽ cần?

Điều tốt là bạn sẽ không cần tất cả chúng. Trên thực tế, khi bắt đầu xây dựng các dự án React, bạn sẽ thấy rằng mình sử dụng các tính năng giống nhau cho 90% công việc của mình.

Đối với những người làm việc trong React hàng ngày, những điều này bao gồm:

• JSX
• Các thành phần (cụ thể là các thành phần chức năng)
• Prop và trạng thái
• Danh sách, khóa và sự kiện
• Core React Hooks, chủ yếu use State,useEffect
• React Context, bao gồm use Context
• Cách viết các móc React tùy chỉnh

Cũng cần biết những điều cơ bản về cách hoạt động của React và những vấn đề mà nó được tạo ra để khắc phục. Các khái niệm này bao gồm:

• Kết xuất và kết xuất (đặc biệt là biết điều gì có thể gây ra kết xuất)
• Pure functions
• Side effects
• Immutability

Tôi có cần tìm hiểu từng tính năng / khái niệm / hook của React không?

Không, bạn không. Tập trung vào các khái niệm chính mà tôi đề cập trong câu hỏi trên.

Trên thực tế, nhiều hook và các tính năng React hiếm khi được sử dụng ngay cả trong số các nhà phát triển chuyên nghiệp nhất. Chỉ vì nó tồn tại không có nghĩa là bạn sẽ cần nó và bạn không cần phải dành thời gian như nhau để học mọi khái niệm React.

Tôi có cần học JavaScript trước khi học React không?

Vì React về cơ bản là một thư viện JavaScript tự hào là "chỉ là JavaScript", nên nếu bạn định học React, bạn cũng cần phải trở nên giỏi JavaScript.

Như đã nói, bạn càng giỏi JavaScript thì bạn càng trở nên giỏi hơn trong việc xây dựng mọi thứ trong React. Bạn có thể học đồng thời cả hai và cuối cùng tất cả các nhà phát triển React vẫn đang học JavaScript, có thể nói như vậy.

Nói tóm lại, bạn có thể bắt đầu học React mà không cần giỏi JavaScript, tuy nhiên, đừng có quan niệm rằng bạn hoàn toàn có thể bỏ học JavaScript.

Tôi nên sử dụng thư viện React nào?

Có hàng ngàn thư viện React có thể được sử dụng trong các dự án React của bạn.

React là một thư viện chưa được tích hợp sẵn, không phải là một khuôn khổ. Nhiều công cụ cần thiết để xây dựng các dự án của bạn đơn giản là không có sẵn trong React.

React không cung cấp giải pháp riêng để viết các kiểu, tạo hiệu ứng cho các thành phần, quản lý trạng thái ứng dụng toàn cầu, hoặc tạo các tuyến hoặc trang.

Để xây dựng bất kỳ dự án React quan trọng nào, bạn sẽ cần phải làm quen với các thư viện khác nhau để cung cấp cho bạn chức năng bạn cần.

• Để quản lý trạng thái, hãy sử dụng Zustand (Redux vẫn tốt với Redux Toolkit)
• Để tạo kiểu, hãy sử dụng TailwindCSS
• Để định tuyến, hãy sử dụng React Router (React Location cũng rất hứa hẹn)
• Để tìm nạp dữ liệu, hãy sử dụng  React Query
• Đối với các biểu mẫu, hãy sử dụng React Hook Form

Cùng tìm hiểu thêm kiến thức về ReactJs qua khóa học lập trình ReactJs tại T3H. Nếu muốn học thêm các khóa học lập trình khác, đừng quên liên hệ với chúng tôi tại Viện Công nghệ thông tin T3H nhé!