从零构建react项目（一）

一组工具链通常是由：

• 一个package管理器， 可以让你利用第三方生态系统，轻松安装或更新依赖， 这里我们选择npm
• 一个打包器，可以让你编写模块化代码，并且打包优化加载时间，这里我们选 webpack
• 一个编译器， 可以编写新版本的Javascript不需要考虑兼容问题， 我们选Babel

建立目录

首先新建项目文件：my-react
mkdir my-react && cd my-react
mkdir -p src

初始化项目

npm init -y
这个时候项目目录下会出现一个 package.json 文件，这是我们项目的模块配置文件

配置webpack

我们要构建react项目，需要用到 jsx和es6 语法， 但目前的浏览器是不能直接识别的，所以需要有工具帮我们编译转化代码，我们在这里选择了webpack。

安装webpack

npm install webpack webpack-cli --save-dev
安装webpack-cli工具可以在命令行中运行webpack
此时文件目录
C:.
| package.json
| package-lock.json
|–node_modules
|–src

补充知识点：

• npm install moduleName
  安装模块到项目的node_modules目录下，不会将模块依赖写入package.json文件，初始化项目时不会下载模块
• npm install -g modulesName
  安装模块到全局，不会在node_modules目录下，不会将模块依赖写入package.json文件，初始化项目时不会下载模块
• npm install -save moduleName
  安装模块到node_modules目录下，将模块依赖写入dependencies 节点，初始化项目时会下载模块，运行npm install --production 或者注明 NODE_ENV变量为production时，会下载模块
• npm install --save-dev moduleName
  安装模块到node_modules目录下，将模块依赖写入devDependencies 节点，初始化项目时会下载模块，运行npm install --production 或者注明 NODE_ENV变量为production时，不会下载模块
  总结：devDependencies 节点下的模块是我们在开发时需要用的，例如 webpack、压缩css、js的模块，这些模块在项目部署后是不需要的。想express是项目运行必备的，应该安装在dependencies节点下。

配置webpack

webpack4开始，会有默认配置，所以不需要配置文件可以直接进行开发。
在package.json中添加webpack命令

"scripts": {
    "build": "webpack --mode production"
}

补充知识点:

我们可以在命令行中执行npx webpack --mode production，来对我们的项目代码进行打包编译。
每次打包都要输这么长的代码就很烦，于是就出现了npm 脚本命令。
npm允许我们在package.json 文件里面使用scripts字段定义脚本命令
照着上面定义的命令，在命令行下执行·npm run build等同于执行npx webpack --mode production

原理：
每当执行npm run时，就会自动新建一个shell，这个shell里面执行指定的脚本命令，因此只要是shell（一般是bash）可以运行的命令，就可以写在npm脚本里面。
比较特别的是 npm run 新建的这个shell，会将当前目录的node_modules/.bin 子目录加入 PATH 变量，执行结束再将其恢复原样，这意味着当前目录的 node_modules/.bin 子目录里面的所有脚本都可以直接用脚本名调用，而不必加上路径
比如当前项目的依赖里有Mocha，只要直接写mocha test就可以，不需要写成./node_modules/.bin/mocha test
想了解的更多请移步 阮一峰 npm scripts 使用指南

我们可以验证一下打包的情况：
在src下面新建index.js文件（wenpack默认的入口文件就是./src/index.js）
执行 npm run build 命令， 可以发现我们的项目目录下面多了一个dist文件夹，里面有个main.js文件，意味着打包成功了。

配置Babel

如果在上面的打包验证中，有朋友尝试使用react的JSX语法的话，就会发现打包的时候会有报错信息

Module parse failed: Unexpected token (5:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

也就是说我们的webpack不能处理JSX语法。

而且ES6语法现在基本已成主流，而且React组件大多也是由ES6语法编写，但很多老版本浏览器还不能解析ES6语法，我们需要进行代码编译。
webpack本身并不能编译代码，Babel可以编译代码，将Babel集成进webpack中，就可以实现我们想要的功能了

安装

1. babel-core 当我们在webpack中使用babel的时候，首先要安装babel-core，这是babel编译库的核心包。
2. babel-loader webpack的Babel插件，可以在webpack中运行babel
3. babel preset env 负责转译最新的Javascript语法，向后兼容
4. babel preset reacr 负责将 JSX 语法转化成javascript

安装依赖：

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

配置

Babel

在Babel执行编译的过程中会从项目的根目录下的 .babelrc 文件中读取配置。.babelrc 文件是一个json格式的文件。
在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置.
所以我们在项目根目录下新建一个 .babelrc 文件, 配置如下：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

补充知识点:

babel 的配置文件主要是对预设（presets）和插件（plugins）进行配置。那么这两者分别是什么呢
插件：
Babel 是一个 javascript的编译器，编译分为三个阶段：解析，转换，输出。想要实现第二步转换，我们就需要用到相应的语法插件
比如想要 解析箭头函数，可用插件： arrow-functions， 想要解析 async语法，可用插件async-to-generator ，还有很多插件
但如果我们想解析ES6语法，自己一个一个去添加插件要累死，这个时候就该预设上场了
预设:
预设作为Babel插件的组合
官方已经有一些我们常用的预设，比如:
@babel/preset-env 可以随意使用最新的Javascript，什么ES6、ES7语法，洒洒水都能给你解析, 不需要再苦哈哈去搞各种插件
@babel/preset-react 可以直接编写react项目了，这个预设包含插件：plugin-syntax-jsx、 plugin-transform-react-jsx 等。。
除了官方编写的预设，你自己也可以创建自己的预设，具体方法 点击传送门

webpack

接下来配置webpack

首先在项目根目录下新建webpack.config.js文件，配置如下：

// 对于每个js或者jsx文件，通过babel转译代码，将ES6转成ES5
module.exports = {
   module: {
       rules: [
           {
               test: /\.(js|jsx)$/,
               exclude: /node_modules/,
               use: {
                    loader: "babel-loader"
               }
           }
       ]
   }
}

踏上React征程

至此，我们前期的配置工作已经完成，以上配置已经足够支撑我们接下来编写React组件，展示页面了。
当然作为一个完整的项目的话，上面的配置是远远不够的，这些都是后话了，后面根据我们的需要再去添加配置是最好的办法。

有句名言希望和大家共勉。

当你试图解决一个你不理解的问题时，复杂化就产成了

不要试图一口吃成个胖子，能一下子把webpack精通，凡是我们还没用到的功能都是我们根本不需要的功能。

安装

编写代码之前我们需要先安装React、React-dom

npm i react react-dom --save

react

要写react组件，肯定要先安装react库。React 是 React 库的入口。
安装完成以后，可以通过 import React from 'react' 来引入。
具体信息点击 React 顶层API

react-dom

使用react.createElement 创建的是一个DOM元素，但不是浏览器的DOM元素，它只是一个虚拟DOM元素，不能直接被渲染在页面中。
这个时候就需要我们的react-dom, React DOM 会负责更新 DOM 来与 React 元素保持一致,
ReactDOM.render()方法可以将一个react元素渲染到DOM节点中。
了解更多请点击 传送门

参考

阮一峰 npm scripts 使用指南
Webpack 官方文档
Babel 官方文档
React 官方文档