Reconstruct a personal website with react

ES6 has appeared before the JS module loading scheme, the most important is the COMMONJS and AMD specifications. COMMONJS is mainly applied to the server for synchronous loading, such as Nodejs. The AMD specification applies to browsers, such as Requirejs, for asynchronous loading. There are also CMD specifications for synchronous loading scenarios such as SEAJS.

ES6 on the language specification level, realizes the module function, and realizes quite simple, completely can replace the existing COMMONJS and the AMD specification, becomes the browser and the server Common module solution.

The ES6 module has two main functions: Export and Import

Export for external output This module (a file can be understood as a module) variable interface

Import is used to load another module that contains the export interface in one module.

That export is, the use of commands to define the external interface of the module, the other JS files can be import loaded through the command Module (file). such as (assuming A and B files are in the same directory)

A.js
var sex= "Boy";
var echo=function (value) {
Console.log (value)
}
Export {Sex,echo}  
By adding the Sex,echo variable to the curly brace and exporting it, you can expose the value of the corresponding variable to another file in the form of a sex, echo variable identifier, and read to
cannot be written in export sex such a way, if this is equivalent to export "boy", the external file will not get the internal variables of the file sex value, because there is no external output variable interface, just the output of the string.

B.js
The internal variables of the A.js file are obtained through import, and the variables in the {} brackets are derived from the variable identifiers that are derived from the A.js file.

Console.log (Sex)   //Boy
echo (Sex)//Boy

A.js files can also be written as follows export syntax, but not as intuitive as above, not recommended.

A.js
Export var sex= "boy"; export var echo=function (value) {Console.log (value)}

Because function echo () {} is equivalent to Var echo=function () {}, it can also be written as
Export function Echo (value) {
Console.log (value)
}

The above is the basic use of export and module, and then to expand learning

As can be seen in the previous example, B.js uses the import command, the user needs to know the variable identifier that a.js exposes, otherwise it cannot be loaded. You can export default use commands to specify the default output for a module so that you do not need to know the variable name of the module you want to load.

A.js
var sex= "boy"; Export default sex (sex cannot be enlarged in parentheses)
Originally direct export sex outside is not recognized, plus default on it. However, there can be at most one export default in a file.
In fact, this is equivalent to the sex variable value "Boy" a system default variable name defaults, natural default can have only one value, so a file cannot have multiple export default.

B.js
Essentially, the output of the A.js file is export default a default variable called, and then the system allows you to take any name for it. Therefore, you can start any variable name for the import module, and you do not need to use braces to include the import any from "./a.js"
Import Any12 from "./a.js" Console.log (ANY,ANY12)   //Boy,boy

Question one:
I packed it with webpack.
Why is it that my react module is placed in Node_modules only to be written
Import React from ' React ';
Can you introduce react in another folder? I didn't see where the path was set to react.

Question 2: I would like to ask the use of Webpack when using import and export, is equivalent to the use of ES6? Or is it a built-in object in node?

Question and answer: You wrote the import React from ' React ';, Webpack will take a first look at you have not seen in Resolve.alias you have defined React, if not, in the node_modules to find. Question two: This import and export are ES6 syntax, not what built-in objects, you see WEBPACK1 does not support this import/export syntax, need to use Babel conversion commonjs.

Reconstruct a personal website with react