Create React App

Create React App (CRA) là một package cho phép chúng ta tạo ra một ứng dụng React với các file hỗ trợ có sẵn mà không cần phải cấu hình phức tạp.

• Trước khi có CRA, lập trình viên muốn sử dụng React thường phải mất khoảng 30 phút để cài đặt và cấu hình (xem thêm Create a React Application Manually).
• Để sử dụng CRA, ta cần phải có hiểu biết cơ bản về NodeJS.

Initialize the Project

Tạo ứng dụng React bằng CRA như sau:

npx create-react-app name-of-your-project

Nếu không muốn dùng lệnh npx mỗi lần tạo ứng dụng React, ta có thể cài đặt package create-react-app ở chế độ global bằng flag -g.

npm install -g create-react-app

Sau đó, ta có thể tạo dự án React mà chỉ cần dùng lệnh create-react-app:

create-react-app name_of_project

React Boilerplate

Là tập hợp các thư mục và tập tin được tạo sẵn trong một dự án React.

Trong đó, các thư mục và các file mà ta cần quan tâm khi lập trình giao diện là:

• Thư mục node_modules lưu giữ tất cả các packages cần thiết cho ứng dụng React.
• Thư mục public:
  • index.html - file HTML duy nhất trong toàn bộ ứng dụng.
  • favicon.ico - icon cho trang web. Icon này nằm ở tab của trang web ở trên browser.
• Thư mục src:
  • App.css, index.css - các file CSS.
  • index.jsx - file JS kết nối tất cả các component với index.html.
  • App.jxs - file dùng để import hầu hết tất cả các component được hiển thị.
• package.json - liệt kê các packages đang được sử dụng trong dự án.

Một dự án React cơ bản chỉ cần những file và folder sau đây:

Run the Project

Để khởi chạy ứng dụng, ta dùng lệnh:

npm start

Để dừng ứng dụng, ta có thể nhấn tổ hợp phím Ctrl + C trong terminal.

Tip

Đôi khi chúng ta muốn tái sử dụng thư mục node_modules cho nhiều dự án thay vì cài đặt lại tốn nhiều thời gian và bộ nhớ, ta có thể đặt node_modules ở thư mục cùng cấp với tất cả dự án.

Minh họa:

Khi chạy npm start, nếu không tìm thấy các thư viện cần thiết ở thư mục hiện tại, nó sẽ tìm kiếm ở thư mục cha hoặc các thư mục khác cao hơn.

Deploy to GitHub Pages

Để triển khai ứng dụng được tạo bằng CRA trên GitHub pages, ta cần thực hiện các bước sau:

1. Thêm trang chủ vào package.json, đường dẫn trang chủ thường sẽ có dạng:

   "homepage": "https://myusername.github.io/my-app"

   Nếu username của chúng ta là “aleister” và ứng dụng có tên là “react” , trang chủ sẽ là:

   "homepage": "https://aleister.github.io/react"

2. Cài đặt package gh-pages.

   npm install --save gh-pages

   Thêm các lệnh để triển khai ứng dụng trong package.json:

   "scripts": {
   	"predeploy": "npm run build",
   	"deploy": "gh-pages -d build",
   	...
   }

3. Chạy lệnh deploy để xây dựng và triển khai ứng dụng:

   npm run deploy

   Câu lệnh này đồng thời sẽ tạo ra một nhánh mới chứa mã nguồn đã được xây dựng.

4. Chọn nhánh mã nguồn mà được dùng để triển khai:

   

Resources

• Getting Started | Create React App (create-react-app.dev)
• Deploy to Github pages