Project react to establish import package problem summary

1.react package and react-dom

Use react develop web pages, we will inevitably download two packages, one react, one is react-dom, which is react react the core code. The core idea is that virtual Dom react, in fact, virtual Dom change is not so complicated, simply, is a js object to express what a dom contains, for example, the following code:

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

It expressed a div tag inside a span tag, label which is a text node text is 'hello, world', if the entire object is not to write their own would be too much trouble, so react pack get a generated virtual dom of function react.createElement, and component this class represents the virtual to help us the DOM , write our own classes to create components need to extend this class when, on the way to create components, please refer to React three ways to create components . Senior mainly inherited some ways react, and packet core functions react-dom is that these virtual Dom rendering the document into practical dom , of course, in addition to rendering the addition function There are other ways, not much here said.

2.babel-core package and babel-loader

JSX grammar because we want the browser does not know, so we need the help of babel-core and babel-loader to help us pack the JSX grammar compiled into JS syntax, where babel-core to provide escaped API, and the babel-loader is webpack used to call babel-core API for complete escape tool.

Focus here : babel-core and babel-loader must correspond to the installation, otherwise it will error when webpack packaging, such as:

babel-core version	Compatible	Corresponds babel-loader version
6.0	Yes	7.0
7.0	Yes	8.0
6.0	no	8.0

 

3.react-router和react-router-dom

Question: Use React, if we need to use the route, then react-router and react-router-dom is not two references should do?
No, pit here. Two of them on the line as long as a reference, the difference is that the latter is a multiple <Link> <BrowserRouter> DOM class of such components.
So we simply refer to react-router-dom package on the line, specifically react-router-dom use, see Router to use Detailed