Xây dựng môi trường phát triển React App nhanh chóng

Đối với nhưng bạn mới tiếp xúc với React, việc chuẩn bị môi trường để phát triển một React App hoàn chỉnh không phải là điều dễ dàng nếu không có nhiều kinh nghiệm.

Ví dụ, nếu muốn có một môi trường đơn giản:

• Cần local server nhanh chóng → config nhiều
• Có muốn sử dụng ES6 không? → config khá rắc rối
• Khi ra môi trường production thì sao? → chuyển đổi code (nếu là ES6) → nén thành file gọn nhẹ nhất có thể.

Ở trên là 3 bước cơ bản nhất để có thể phát triển và cho ra mắt được sản phẩm. Khá rắc rối và phức tạp phải không?

Công cụ của Facebook, tại sao không?

Cách đây khoảng 2 tháng, sau nhiều sự phàn nàn của nhiều lập trình viên, Facebook đã quyết định xây dựng một công cụ giúp đơn giản hóa những việc phức tạp kể trên. Chỉ với một vài câu lệnh đơn giản, ta có thể tạo ứng dụng, chạy dev server, chạy test, và build ra cả file cho production. Quá tuyệt!

Cài đặt

Trước khi cài đặt công cụ generator này, bạn cần phải cài NodeJS, tham khảo tại: https://nodejs.org.

Ngoài ra nếu đang dùng MacOS, Linux thì có thể dùng công cụ nvm để quản lý version NodeJS rất dễ dàng.

Sau khi cài NodeJS xong, bạn chạy câu lệnh dưới đây để cài Create React App Tool:

$ npm install -g create-react-app

Lưu ý: Bạn nên sử dụng phiên bản NodeJS >= 4, Facebook khuyến nghị bạn sử dụng Node >= 6 và npm >= 3 để có thể cài đặt nhanh và sử dụng disk tốt hơn.

Sử dụng

Rất đơn giản, mỗi khi bạn muốn tạo một project mới, chỉ cần gõ

$ create-react-app my-app

Khi đó:

• Một project mới tên "my-app" sẽ được khởi tạo.
• Lệnh npm install cũng được khởi chạy để cài các package cần thiết.
• Trong thư viện cài mặc định đã có sẵn Babel để bạn có thể viết code ES6.

Cuối cùng ra sẽ có một cấu trúc thư mục dạng như sau:

├── README.md
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

Bạn hoàn toàn tự do tùy biến trong thư mục src của project hoặc cài đặt thêm các package mong muốn để hỗ trợ phát triển ứng dụng.

Một số lệnh hữu ích

npm start

Chạy ứng dụng của bạn ở development mode.

Khi đó trình duyệt của bạn sẽ tự động bật mở link: http://localhost:3000 – là một local server cho bạn làm việc, debug,…

Nếu thành công:

Còn khi gặp lỗi:

Thực sự là rất tiện lợi để debug phải không?

npm test

Chạy test watcher trong chế độ interactive.

npm run build

Xất ra một thư mục build gồm file js, css, html đã được minify tối đa và có thể chạy production.

Kết luận

Có thể thấy đây mà một công cụ tuyệt vời, đơn giản dễ sử dụng tuân theo triết lí:

• One Dependency: Chỉ một gói cài đặt bao hàm toàn bộ các package cần thiết để phát triển (Webpack, Babel, ESLint,…)
• Zero Configuration: Không cần phải config bất cứ gì, đơn giản tạo và chạy.
• No Lock-In: Nếu không thích, bạn có thể "eject" toàn bộ các đóng gói webpack của react-scripts và tự config các thông số theo ý mình.

Tuy nhiên, hiện tại một số tính năng vẫn chưa được hỗ trợ như:

• Server rendering.
• CSS Modules.
• LESS or Sass.

Để tham khảo thêm, hay thậm chí là contribute cho tool này, hãy vào đây nhé!