《React項目0到1》-初始化項目

第一步:使用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
)進行了解。

項目地址:https://github.com/956159241/PersonalBlog

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。