使用create-react-app快速搭建React项目

一、快速搭建react

1.打开cmd命令行窗口，输入npm -version,查看当前的npm版本

2.如果npm版本是5.2以上版本，在cmd中输入 npx create-react-app my-app，当前目录下创建一个名为my-app的工程。

如果想创建typeScript的开发环境，可以 npx create-react-app my-app --template typescript
或者使用yarn，yarn create react-app my-app --template typescript

3.工程创建成功后，可以在系统文件目录看到my-app工程。

4.yarn安装依赖 yarn start启动项目

如果要将TypeScript添加到已有的Create React App项目，请先安装它：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
或者
yarn add typescript @types/node @types/react @types/react-dom @types/jest

接下来，将文件重命名为TypeScript文件（例如src/索引.js至src/索引.tsx)，重新启动开发服务器！

二、使用create-react-app搭建TypeScript+React+Ant Design开发环境：

安装和初始化

请确保电脑上已经安装了最新版的 yarn 或者 npm。

使用 yarn 创建 cra-template-typescript 项目。

$ yarn create react-app antd-demo-ts --template typescript

如果你使用的是 npm（接下来我们都会用 yarn 作为例子，如果你习惯用 npm 也没问题）。

$ npx create-react-app antd-demo-ts --typescript

然后我们进入项目并启动。

$ cd antd-demo-ts
$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

引入 antd

$ yarn add antd

修改src/App.tsx，引入 antd 的按钮组件。

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css，在文件顶部引入 antd 的样式。

@import '~antd/dist/antd.css';

重新启动 yarn start，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。

antd 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。

注意不要安装 @types/antd。