Thiết lập môi trường phát triển ứng dụng React

Đăng ngày 30 Mar 2021 08:30

Đây là bài viết nhanh hướng dẫn cách thiết lập môi trường để lập trình React. Nội dung chính tập trung vào việc sử dụng React trong Visual Studio Code.

1. Cài đặt Node.js và Yarn

  • Cài đặt Node.js. Khi cài đặt Node.js, công cụ npm đi kèm cũng sẽ tự động được cài đặt.
  • Cài đặt Yarn
npm install --global yarn

2. Cài đặt Git CLI & VS Code

3. Sử dụng React trong Visual Studio Code

VS Code được tích hợp sẵn hỗ trợ cho JavaScript, TypeScript và Node.js.

3.1. Các Extension khuyên dùng

  1. Debugger for Chrome
  2. ESLint
  3. Prettier - Code formatter
  4. vscode-icons
  5. Auto Import
  6. Auto Close Tag
  7. Auto Rename Tag
  8. Import Cost
  9. TODO Highlight
  10. GitLens

3.2. Cấu hình tự động định dạng code khi lưu (Format on Save)

Mở file settings.json và chỉnh sửa như bên dưới:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true,
   "source.organizeImports": true
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
"editor.formatOnSave": true

4. Các công cụ thường dùng trong quá trình phát triển

  • JSON Blob: JSON Blob được tạo ra để hỗ trợ phát triển song song client/server. Các dữ liệu response dạng mock JSON có thể định nghĩa trực tiếp bằng trình soạn thảo online, sau đó phía client sử dụng API của JSON Blob để lấy và cập nhật dữ liệu mock.
  • Chrome Inspect Devices: Dùng để debug từ xa trên thiết bị Android. Bạn có thể cài extension Inspect Devices để mở nhanh hơn.
  • JSON Utilities: JSON Utils là website giúp sinh các class JavaScript, TypeScript... từ JSON. Ngoài ra công cụ này còn giúp làm sạch file JSON và cung cấp trình xem dữ liệu trực quan trong quá trình phát triển.
Dev
Nextjs, Reactjs