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

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打包時會報錯，例如：

babel-core版本	是否兼容	對應babel-loader版本
6.0	是	7.0
7.0	是	8.0
6.0	否	8.0

 

3.react-router和react-router-dom

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