创建ts类型的React项目

记录一下自己学习react的过程

官网地址：启动一个新的 React 项目 – React 中文文档

一。脚手架工具create-react-app的使用

1.创建项目

1.1创建javascript类型的react项目（my-app指的是要创建的项目的名称）

npx create-react-app  my-app

cd my-app

1.2.创建Typescript类型的react项目

会将ts相关的配置文件tsconfig.json同步创建好,ts项目依赖也会下载好

npx create-react-app my-app-ts --template typescript

运行完命令行后的效果：

 1.3.安装模块化CSS的加载插件：css modules

npm install typescript-plugin-css-modules --save-dev

安装完成后在package.json中就可以看到

 全局typescript的定义声明：custom.d.ts

将app.css文件名修改为app.module.css,并且修改css引入方式和使用方式

安装好后的TS配置文件：

{
  "compilerOptions": {
    "noImplicitAny": false,  // 不需要显式地声明变量的类型any
    "target": "es5",  // 编译后的目标javascript版本,ES5,ES6等等
    "lib": [
      "dom",   // document.getElementById("root")
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,  // 允许混合编译javascript文件
    "skipLibCheck": true,
    "esModuleInterop": true,  // 允许我们使用commonjs的方式import默认文件,   import React from 'react'
    // "esModuleInterop": false,  import * as React from 'react'

    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext", // 配置的是我们代码的模块系统，Node.js的CommonJS、ES6标准的esnext、requirejs的AMD
    "moduleResolution": "node", // 决定了我们编译器的工作方式， "node" and "classic"
    "resolveJsonModule": true,
    "isolatedModules": true,  // 编译器会将每个文件作为单独的模块来使用
    "noEmit": true,  // 表示当发生错误的时候，编译器不要生成 javascript 代码
    "jsx": "react",  // 允许编译器支持编译react代码，
    "plugins": [
      {
        "name":"typescript-plugin-css-modules"
      }
    ],
  },
  "include": [
    "src"
  ]
}

2.如何将javascript的项目切换为typescript项目

给已存在的react项目，添加ts的项目依赖：

第一步：输入命令行

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

@types/react： react ts 接口定义（也称typing）

第二步：修改js文件的后缀

将所有 .js文件改为 .ts/tsx的文件

第三步： npm start

会自动生成tsconfig.json文件

3.启动项目

npm start

项目打开时的默认页面

4.安装Ant Design组件库

4.1.安装antd和ant图标依赖

npm install antd @ant-design/icons

4.2.引入css样式文件

注意：版本不同，引入的方式不同，

此时的Ant Design版本：v5，React版本：v18

import "antd/dist/reset.css";

5.下载第三方icons组件

npm install react-icons

使用：

//引入icons
import { FiShoppingCart } from 'react-icons/fi';

        <button 
          className={styles.button}
          onClick={this.handleClick}
        >
          <FiShoppingCart></FiShoppingCart>
          <span>购物车2件</span>
        </button>

二。npm和yarn的区别

1.从 `package.json` 中安装项目依赖

• npm install 
• 或
• yarn

2.向 `package.json` 添加/安装新的项目依赖

• npm install {库名} --save
• 或
• yarn add {库名}

3.向 `package.json` 添加/安装新的dev项目依赖

• npm install {库名} --save-dev
• 或
• yarn add {库名} --dev

4.删除依赖项目: 

• npm uninstall package --save 
• 或
• yarn remove package

5.升级某个依赖项目:

• npm update --save 
• 或
• yarn upgrade