ReactJS với create-react-app toàn tập

Chào mọi người, đây là bài viết chia sẻ kinh nghiệm của bản thân mình khi tìm hiểu về công cụ create-react-app cho việc lập trình ReactJS trở nên dễ dàng hơn. Trong bài viết này, mình sẽ nói về những điều có thể cần thiết cần phải tinh chỉnh trước khi bắt đầu 1 dự án React của các bạn, cụ thể là sử dụng create-react-app với các thư viện redux, react-redux, redux-thunk, react-router, react-router-dom, sass, code spliting, jQuery, bootstrap, react-loadable, react-scrollchor, react-intl, react-select, react-datepicker, react-table, moment, ...

Đây là source GitHub của mình: https://github.com/huynhsamha/create-react-app-config

Còn đây là demo về 1 số phần mình làm: https://huynhsamha.github.io/create-react-app-config/

Nếu bạn mới bắt đầu sử dụng react hoặc chưa biết đến create-react-app thì mình nghĩ bạn nên sử dụng thằng này để làm quen với react, vì nó đã làm sẵn mọi thứ giúp ta, ta chỉ cần làm theo những gì ta muốn với công cụ này.

Trước tiên, bạn nên cài package create-react-app mức global từ npm . npm install create-react-app -g hoặc nếu bạn dùng Ubuntu hay một số hệ điều hành khác, nó yêu cầu quyền root, bạn thêm sudo vào trước lệnh để thực thi.

1. Tạo mới project: create-react-app react-app
2. npm start or yarn start: start môi trường dev.
3. npm build or yarn build build production.

Trong bài này, mình sử dụng yarn, các bạn có thể sử dụng npm cũng được theo đúng cú pháp của npm.

Tạo các file lưu trữ biến môi trường, những file này theo như create-react-app nói nó sẽ nhận ra các biên được khai báo trong các file này.

1. Trong terminal tại root của project: touch .env .env.development .env.production
2. In .env.development: REACT_APP_ENV=development
3. In .env.production : REACT_APP_ENV=production

Note: chỉ mầy biến với prefix là REACT_APP_ thì thằng create-react-app mới hiểu và đọc được, còn sử dụng nó thì mình nói sau.

Khi viết CSS, ta thường quan tâm đến các thuộc tính hỗ trợ trên nhiều trình duyệt . Tuy nhiên create-react-app sẽ lo cho ta việc này, do đó ta có thể yên tâm khi viết CSS 1 cách đơn giản. Đây là lời trích từ document của react:

This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.

Nếu bạn nào đã dùng qua SASS , LESS, SCSS thì cũng biết sự lợi hại và tiện ích của những thằng này. Do đó nếu có thể tích hợp vào React thì khá thú vị. create-react-app cũng hỗ trợ ta việc này, bằng cách thực hiện các bước sau:

1. In terminal: yarn add node-sass-chokidar npm-run-all
2. In file package.json:

{
    "scripts": {
    -   "start": "react-scripts start",
    -   "build": "react-scripts build",
    +   "start": "npm-run-all -p watch-css start-js",
    +   "build": "npm-run-all build-css build-js",
    +   "start-js": "react-scripts start",
    +   "build-js": "react-scripts build",
    +   "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    +   "build-css": "node-sass-chokidar src/ -o src/",
  }
}

1. In file .gitignore:

# auto generated files (sass, less, ...)
src/**/*.css

Lúc này khi ta start de lên, khi có thay đổi gì ở file sass, thì nó sẽ tự build lại các file css cho ta và browser tự động được refresh.

Còn trong file .gitignore, ta thêm các file tự động sinh ra do sass để tránh gây conflict không cần thiết khi nhiều người commit.

Nhiều lúc, ta cũng muốn sử dụng node cho thằng react