react項目建立導入包問題總結

• 2019 年 10 月 4 日
• 筆記

1.react和react-dom包

使用react開發網頁的話，我們難免會下載兩個包，一個是react，一個是react-dom，其中react是react的核心程式碼。react的核心思想是虛擬Dom，其實虛擬Dom改變沒有那麼複雜，簡單而言就是一個js的對象來表達一個dom包含的東西，例如如下程式碼：

var element={      "tagName": "div",      "attrs": {          "styles": {              "fontSize": "20px"          }      },      "children": [          {              "tagName": "span",              "children": ["hello,world"]          }      ]  }

就表達了一個div標籤裡面有一個span標籤，標籤裡面是個文本節點，文字內容就是』hello,world『，如果整個對象都自己去寫未免也太麻煩了，所以react包弄了一個生成虛擬dom的函數react.createElement，以及Component這個類來幫助我們表示虛擬DOM，我們自己寫創建組件的類時需要繼承這個類，關於創建組件的方式請參考React創建組件的三種方式。主要是繼承一些react的高級方法，而包react-dom的核心功能就是把這些虛擬Dom渲染到文檔中變成實際dom，當然了除了渲染這個功能之外還有一些其他的方法，這裡就不多說了。

2.babel-core和babel-loader包

因為我們要把JSX語法瀏覽器不認識，所以我們需要藉助babel-core和babel-loader包來幫我們將JSX語法編譯成JS語法，其中babel-core提供轉義的API，而babel-loader則是webpack用來調用babel-core的API完成轉義的工具。

重點來了：babel-core和babel-loader一定要對應安裝，否則webpack打包時會報錯，例如：

3.react-router和react-router-dom

問題：在 React 的使用中，如果我們需要用到路由，那麼 react-router 和react-router-dom 是不是兩個都要引用呢？ 非也，坑就在這裡。他們兩個只要引用一個就行了，不同之處就是後者比前者多出了 <Link> <BrowserRouter> 這樣的 DOM 類組件。 因此我們只需引用 react-router-dom 這個包就行了，具體react-router-dom使用方法見Router使用方法詳解