第一步：使用react脚手架：create-react-app 新建一个react项目，如下：
create-react-app projectName
新建成功
整个过程大概也就3-5分钟的样子，安装完成后，我们可以看到可以使用一些yarn命令，启动、build、test、弹射（不可逆，慎用）。
第二步： 添加TS，并且修改任意js文件为.tsx后运行
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest
那么，我们就启动项目，执行一下： cd admin -> yarn start
启动成功
我并没有设定默认浏览器，所以打开的是Edge浏览器，之后会修改成为谷歌浏览器，毕竟谷歌浏览器调试起来，要好用得多。之后考虑的兼容浏览器： 、
- 谷歌（版本 86.0.4240.75（正式版本） （64 位））
- 火狐（78.0.2 (64 位)）
- Edge（版本 86.0.622.43 (官方内部版本) (64 位)）
既然项目搭建好了，简单看下初始项目的目录结构：
单页程序（SPA： single page web application）所以这里就只需要一个html文件，即index.html, 也就是入口文件。
index.html
index.html里面就只有一个id 为root的div标签，那么内容是如何进入到这个div里面的呢？我们来看看index.js里面有什么。
index.js
先不管其他的内容，只看红色框里面的内容,document.getElementById('root'),这句话就是把id为root的节点对象拿到，然后ReactDOM.render（），把组件App渲染到这个节点里面。具体React.render的使用，可以参考React官网，进行更详细的了解，有兴趣的化，也可以参看React的github地址（https://github.com/facebook/react/blob/v16.13.1/packages/react-dom/src/client/ReactDOMRoot.js
）进行了解。
网友评论