重学前端 – react-第二节： 添加ts + scss(Re learn the front end – react – Section 2: add TS + SCSS)

重学前端 – react： 添加ts + scss

  • 简介： 上一节我们新建了 react 项目。项目中并没有使用 ts + scss. 现在我们为项目添加 ts + scss。是项目后期维护更加方便，也为他团队提供书写规范。

安装 typescript 相关 module

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

推荐：https://create-react-app.dev/docs/adding-typescript/
https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

添加 tsconfig.json

在项目根目录下添加 tsconfig.json 文件, 文件内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "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"
  },
  "include": [
    "src"
  ]
}

修改改 index.js App.js 文件为 index.tsx App.tsx

重新启动项目

添加 scss 支持

npm install sass-loader node-sass --save-dev

修改 App.css 为App.scss 编写 scss 代码 重新运行项目

————————

重学前端 – react： 添加ts + scss

  • Introduction: in the last section, we created a new react project. TS + SCSS is not used in the project Now let’s add TS + SCSS to the project. It is more convenient for the later maintenance of the project, and also provides writing specifications for his team.

安装 typescript 相关 module

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

推荐：https://create-react-app.dev/docs/adding-typescript/
https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

添加 tsconfig.json

Add tsconfig. In the root directory of the project JSON file. The contents of the file are as follows:

{
  "compilerOptions": {
    "target": "es5",
    "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"
  },
  "include": [
    "src"
  ]
}

修改改 index.js App.js 文件为 index.tsx App.tsx

Restart project

Add SCSS support

npm install sass-loader node-sass --save-dev

修改 App.css 为App.scss 编写 scss 代码 重新运行项目