react——项目搭建（引入 typescript）、基础数据事件传输绑定（TodoList）

创建 react 项目

cnpm i -g create-react-app
create-react-app my-app

cd my-app

yarn start
#    Starts the development server.
yarn build
#    Bundles the app into static files for production.
yarn test
#    Starts the test runner.
yarn eject
#    Removes this tool and copies build dependencies, configuration files
#    and scripts into the app directory. If you do this, you can’t go back!

如果用 scss，并且配置公共样式

yarn add node-sass sass-resources-loader

module: {
   
  rules: [
    // Apply loader
    {
   
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
   
          loader: 'sass-resources-loader',
          options: {
   
            // Provide path to the file with resources
            resources: './path/to/resources.scss',
 
            // Or array of paths
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
},

引入 typescript

一、首次安装create-react-app(如果之前安装过可以跳过这一步)

yarn global add create-react-app或者npm install -g create-react-app

二、 使用create-react-app构建TypeScript项目

create-react-app demo02 --typescript

三、已构建react项目引入TypeScript

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

或者

yarn add typescript @types/node @types/react @ty