React: Các công cụ lập trình - Day 3

Ở bài viết trước, chúng ta đã tìm hiểu về cách xây dựng 1 component đơn giản, sử dụng trực tiếp thư viện React và React DOM. Nhưng nếu yêu cầu đặt ra là xây dựng 1 giao diện tương đối phức tạp, bạn cần 1 project với structure rõ ràng, hỗ trợ việc build và deploy ứng dụng.

Các công cụ lập trình

Create React App

Create React App là một công cụ tạo ứng dụng React được cung cấp bởi Facebook.

Để tạo một ứng dụng React bằng Create React App, bạn chỉ việc chạy lệnh "npx create-react-app myapp" trong terminal (myapp là tên ứng dụng của bạn). Sau khi chạy lệnh này, Create React App sẽ tự động cài đặt và cấu hình các công cụ cần thiết để bạn có thể bắt đầu viết ứng dụng React.

Bạn không cần phải cấu hình các công cụ như webpack, babel, eslint hay jest. Bạn chỉ cần chạy một lệnh duy nhất để tạo ra một ứng dụng React có sẵn các tính năng cơ bản như hot reload, code splitting, testing hay production build

Tạo ứng dụng React bằng cách sử dụng Next.js

Next.js là một framework dùng để phát triển các ứng dụng React theo tư tưởng Isomophic (Universal), được phát triển bởi Zeit. Nhờ Next.js chúng ta có thể dễ dàng tạo được một ứng dụng React theo tư tưởng Isomophic, có bao gồm chức năng Server Side Redering (SSR).

Về cơ bản thì với việc SSR thì NextJS giới thiệu là sẽ cung cấp cho chúng ta một số thứ như:

• Hiệu năng tốt hơn so với ứng dụng CSR
• Mang lại khả năng SEO tốt hơn mà CSR không có như là việc chia sẻ bài viết.

Để tạo một ứng dụng React bằng Next.js, bạn chỉ cần tạo một thư mục mới và chạy lệnh "npm init next-app myapp" trong terminal (myapp là tên ứng dụng của bạn). Next.js sẽ tự động cài đặt và cấu hình mọi thứ cho bạn.

Tạo ứng dụng React bằng cách tự tạo file HTML, CSS và JavaScript

Đây là phương pháp tạo ứng dụng React thủ công nhất. Bạn cần tạo file HTML, CSS và JavaScript và sau đó sử dụng các thư viện React để viết mã React và câu hình ứng dụng.

Để sử dụng React trong một trang web, bạn cần liên kết các thư viện React trong file HTML và sử dụng React DOM để hiển thị các thành phần React trên trang.

Bạn có thể tham khảo lại bài viết React: Up and Running - Part 1 để biết cách tạo 1 app React theo phương pháp này

Vite

Vite là một công cụ xây dựng ứng dụng web hiệu suất cao và hiệu quả thời gian xây dựng bởi Evan You - nhà phát triển của Vue.js. Theo như mình research được thì việc xây dựng project từ Vite sẽ nhanh hơn các phương pháp được nêu ở trên.

Tham khảo thêm

https://viblo.asia/p/vitejs-nguoi-choi-he-hackspeed-trong-lang-frontend-build-tools-maGK7A8Llj2

Phân biệt npm, npx. và yarn

npm, npx và yarn đều là công cụ quản lý gói của Node.js. Tuy nhiên, chúng có những điểm khác nhau như sau:

npm (Node Package Manager)

Là công cụ quản lý gói mặc định của Node.js. Nó được sử dụng để tải xuống và cài đặt các gói Node.js từ kho chứa trực tuyến. npm được sử dụng bởi hàng triệu nhà phát triển trên toàn thế giới và là công cụ quản lý gói phổ biến nhất trong cộng đồng Node.js.

npm tự nó không chạy package. Nếu bạn muốn chạy package sử dụng npm, bạn phải chỉ định gói đó trong package.jsontệp của mình .

Khi các tệp thực thi được cài đặt thông qua các gói npm, npm sẽ tạo liên kết đến chúng:

• cài đặt cục bộ có liên kết được tạo tại ./node_modules/.bin/thư mục
• cài đặt toàn cầu có các liên kết được tạo từ bin/thư mục chung (ví dụ: /usr/local/bintrên Linux hoặc tại %AppData%/npmtrên Windows)

npx

Là công cụ dòng lệnh được cài đặt kèm với npm từ phiên bản >= 5.2.0. npx được sử dụng để chạy các lệnh từ các gói npm lưu trữ trực tuyến mà không cần cài đặt trước chúng trên máy tính của bạn hoặc để chạy các lệnh trong các tập tin bắt đầu bằng prefix npx.

Tạo project react:

npx create-react-app my-app

Bạn không cần cài create-react-app (bản thân nó là một package Node.js), mà chỉ thực thi nó để init source code

Yarn

Là công cụ quản lý gói được Facebook phát triển với mục đích tăng tốc độ tải xuống và cài đặt các gói Node.js. Yarn cung cấp tính năng tập trung và cập nhật gói hiệu quả hơn so với npm và được sử dụng phổ biến trong cộng đồng React.

Cài đặt yarrn

Cài đặt qua npm

npm install yarn --global

Cài đặt thông qua các package manager cho Windows như Scoop

scoop install yarn

hoặc Chocolatey

choco install yarn

Tóm lại, npm là công cụ quản lý gói mặc định của Node.js, npx được sử dụng để chạy các lệnh từ các gói npm trực tuyến và yarn là công cụ quản lý gói được Facebook phát triển để tăng tốc độ tải xuống và cài đặt các gói Node.js.

Tạo ứng dụng bằng Create React App

Yêu cầu: Node >= 14.0.0 and npm >= 5.6

Cài đặt yarn hoặc npm: yarn và npm là các công cụ quản lý gói cho JavaScript. Chúng giúp bạn quản lý các gói phụ thuộc của bạn trong một dự án JavaScript.

Cài đặt

npx create-react-app my-app
cd my-app
npm start

Hoặc sử dụng qua npm

npm install -g create-react-app
create-react-app my-app

"my-app" là tên của ứng dụng của bạn. Bạn có thể thay đổi tên của ứng dụng của mình bằng cách thay thế "my-app" bằng tên ứng dụng của bạn Hoặc bạn sử dụng lệnh yarn

cd my-app
yarn start

Mở trình duyệt và truy cập địa chỉ http://localhost:3000 để xem ứng dụng của bạn đang hoạt động. 

Với các bước trên, bạn đã tạo thành công một ứng dụng React mới bằng npx create-react-app. 

Bây giờ bạn có thể bắt đầu phát triển ứng dụng của mình!

Tham khảo

Next JS là gì? Khi nào nên sử dụng Next JS

What is Vite and why do you need it?

Sự khác nhau giữa npm và npx?

Chuyển đổi từ Create React App sang Vite