[React Framework] Chap 2 - Khởi tạo project ReactJS

Ở bài trước chúng ta đã tìm hiểu sơ bộ phần cấu trúc của framework, trong bài này ta sẽ khởi tạo và cài đặt các cấu hình cơ bản của một project ReactJS.

Khởi tạo project

image
Combo chúng ta sẽ sử dụng ban đầu bao gồm:

  • Create React App: Là một tool được xây dựng bởi các nhà phát triển tại Facebook để giúp chúng ta xây dựng các ứng dụng React một cách nhanh chóng. Nó giúp chúng ta tiết kiệm từ thiết lập và cấu hình tốn thời gian. Chúng ta chỉ cần chạy một lệnh và create reaact app sẽ thiết lập các công cụ chúng ta cần để bắt đầu dự án React của mình.
  • TypeScript: là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript.
  • Prettier: Format code luôn là một nỗi đau nhức nhối với dev, nhất là khi làm việc theo nhóm, Prettier sinh ra để giải quyết vấn đề này.
  • Eslint: Là một công cụ giúp chúng ta xác định được những vấn đề về convention trong code của mình. (Đã có sẵn trong bộ create-react-app)
  • React-app-rewired: Một số config của React không thể thay đổi được khi sử dụng bộ create-react-app. React-app-rewired sinh ra để giải quyết vấn đề này.
  • Yarn (optional): Là bộ package manager tương tự npm, cá nhân mình thích sử dụng yarn bởi độ ổn định và tốc độ có phần nhanh hơn hơn hẳn npm.
  • Webstorm (recommended): Là một IDE của nhà Jetbrains tương tự PHPStorm

Khởi tạo project ReactJS với TypeScript:

npx create-react-app react-framework --template typescript

Cài đặt dependency

yarn add -D prettier react-app-rewired

Cấu hình

Prettier

Tạo file .prettierrc tại thư mục root

{
    "semi": false,
    "tabWidth": 4,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "printWidth": 120
}

Trong cài đặt

Cài đặt phím tắt: Reformat with Prettier

React-app-rewired

Tạo file config-overrides.js ngoài thư mục root

const path = require('path')

module.exports = function override(config) {
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            '~': path.resolve(__dirname, 'src/'),
        },
    }
    return config
}

Sửa file package.json thành

{
    ...,
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-app-rewired eject"
    },
    ....
}

Tạo file tsconfig.paths.json với nội dung:

{
    "compilerOptions": {
        "paths": {
            "~/*": ["src/*"]
        }
    }
}

Sửa file tsconfig.json thành:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noUnusedParameters": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": false,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "sourceRoot": "/",
    "baseUrl": "./",
    "rootDir": "src"
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json"
}
  • Tham khảo các config tại: https://www.typescriptlang.org/tsconfig

  • Mặc định tsconfig không hỗ trợ tất cả các option. Giá trị "extends": "./tsconfig.paths.json" giúp cấu hình thêm các giá trị mở rộng.

Config trên cho phép chúng ta sửu dụng alias import, thay vì import như thế này:

import {CoreComponent} from "../../../../../../../../framework/component/index";
import CoreContainer from "../../../../../../../../framework/container/CoreContainer";
import ComponentFactory from "../../../../../../../../framework/factory/ComponentFactory";
import ContainerFactory from "../../../../../../../../framework/factory/ContainerFactory";

Ta có thể import như thế này:

import {CoreComponent} from "~/framework/component/index";
import CoreContainer from "~/framework/container/CoreContainer";
import ComponentFactory from "~/framework/factory/ComponentFactory";
import ContainerFactory from "~/framework/factory/ContainerFactory";

với ký hiệu ‘~’ là đường dẫn tuyệt đối tới thư mục src/

Custom PORT

Mặc định create-react-app chạy dưới port 3000, để chạy dưới port khác, tạo file .env.development.local với nội dung

PORT=9000

Khởi chạy project


Tham khảo source code tại GitHub - phamdungtsx/react-framework
Trong bài sau chúng ta sẽ bắt đầu dựng bộ khung của framework