第一步：使用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
那么，我們就啟動項目，執(zhí)行一下： cd admin -> yarn start
啟動成功
我并沒有設定默認瀏覽器，所以打開的是Edge瀏覽器，之后會修改成為谷歌瀏覽器，畢竟谷歌瀏覽器調(diào)試起來，要好用得多。之后考慮的兼容瀏覽器： 、
- 谷歌（版本 86.0.4240.75（正式版本） （64 位））
- 火狐（78.0.2 (64 位)）
- Edge（版本 86.0.622.43 (官方內(nèi)部版本) (64 位)）
既然項目搭建好了，簡單看下初始項目的目錄結構：
單頁程序（SPA： single page web application）所以這里就只需要一個html文件，即index.html, 也就是入口文件。
index.html
index.html里面就只有一個id 為root的div標簽，那么內(nèi)容是如何進入到這個div里面的呢？我們來看看index.js里面有什么。
index.js
先不管其他的內(nèi)容，只看紅色框里面的內(nèi)容,document.getElementById('root'),這句話就是把id為root的節(jié)點對象拿到，然后ReactDOM.render（），把組件App渲染到這個節(jié)點里面。具體React.render的使用，可以參考React官網(wǎng)，進行更詳細的了解，有興趣的化，也可以參看React的github地址（https://github.com/facebook/react/blob/v16.13.1/packages/react-dom/src/client/ReactDOMRoot.js
）進行了解。
