React And TypeScript（一：基本环境+集成antd）

前言

上东家前端pc项目是15年的React+Flux，当然架子肯定是其他大牛搭建的。本司刚刚最近才有新版pc的需求（ps：之前只要个静态pc和mobile页面, 简单搭建webpack@3打包文件），所以需要重新搭建一个pc。想来想去，angularjs太重，没人用它做pc，不合适；vue，算了吧，文档都不知道长什么样子；jquery，用它估计也是想找死。最后技术定位到React+ React-Router+TypeScript+Redux的坑中，当然，如果你问我为什么不用Vue+Vuex，我只能默默告诉你，纯属团队和个人偏好，而且偏向是React。

create-react-app和webpack配置

React官方提供业界优秀的create-react-app的cli。

自定义webpack请看此处ES版本

（一）安装cli

React官方文档

$ npm install -g create-react-app yarn

安装全局cli加上yarn。如果你还不知道yarn，建议参考下面文档。

为什么我们要用yarn？

（二）初始化项目

$ create-react-app my-app --scripts-version=react-scripts-ts

react-scripts-ts是一些调整的组合，使得你可以使用标准create-react-app项目流程并且加入TypeScript。

现在你的项目应该是下面这个样子：

my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json

其中：

• tsconfig.json包含我们项目中的TypeScript的配置信息

• tslint.json是我们的代码规范工具TSLint相关的配置

• package.json包含我们的依赖项，以及一些用于测试、预览、部署等的快捷命令。

• public包含静态资源，比如我们要部署的HTML页面和图片。你们可以删除除了index.html以外的任何文件。

• src包含了我们TypeScript和CSS的代码。index.ts