使用create-react-app脚手架创建项目
新建一个文件夹，在控制台输入如下命令：
npx create-react-app my_project --template typescript
tips：我们在使用create-react-app创建react项目的时候，它会帮我们创建一个git仓库，并自动进行了一次commit
文件结构说明
- public： 用于放置公共静态资源，它不参与webpack打包，如果您将文件放入该public文件夹，webpack将不会处理它，在你打包的时候，会将public文件夹直接复制一份到你构建出来的文件夹中。
- src： 放置源代码source code,我们所写的代码大部分都会放在src文件夹中
- index.tsx： 项目的入口文件
- App.tex
- react-app-env.d.ts： 为我们引入预先定义好的typescript类型
- reportWebVitals.ts： 埋点上报
- setupTests.ts： 配置单元测试
- .gitignore： 告诉git忽略哪些文件不需要上传
- package.json： 定义了这个项目所需要的各种依赖，以及项目的配置信息（比如名称、版本、运行脚本等数据）
- README.md： 项目的说明文档
- tsconfig.json： ts配置文件
- yarn.lock： 用于锁定版本号
注意：我们在项目中用到的图片字体等静态资源文件应放在src文件夹下的assets文件夹中
public文件夹和assets文件夹两者的区别：
其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webpack 将不会处理它，在你打包的时候，会将public文件夹直接复制一份到你构建出来的文件夹中。而src/assets目录的文件（前提你在js中有引入），它会被webpack编译，比如图片，如果你的图片小于你在webpack中的loader下设置的limit大小（可配置），它会被编译成base64，从而在实际项目中减少http请求，放置在src/assets目录有以下几点好处：
- 脚本和样式表被缩小并捆绑在一起以避免额外的网络请求。
- 缺少文件会导致编译错误，而不是用户的404错误。
- 结果文件名包含内容哈希，因此您无需担心浏览器缓存旧版本。
当然，在实际项目中，公共文件夹public还是有它的作用的，如果你希望你的文件不被编译，比如jquery.min.js，或者压缩好的js插件等，你就可以把文件放在public文件夹中，这样还可以减少文件构建时间，可以减少构建文件的大小。换过来想，如果你把所有静态资源全部放在assets文件夹中，你会发现最后打包出来的文件很大，导致首页白屏时间过长，所以，你可以把一些不会改动的静态文件放到public中。
