webpack4.x+react的项目基本构建

通过对webpack4.x构建项目的基本了解。使用webpack4.x和react.js构建react项目步骤：

1. webpack4.x搭建项目准备

前期的webpack4.x项目搭建步骤详解，点击了解

2. react项目搭建：

• (1)、运行cnpm i react react-dom -S安装包
  
  • react：专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
  • react-dom：专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()
• (2)、在index.html页面中，创建容器

<!-- 创建一个容器，将来渲染的虚拟DOM，会放到容器内显示 -->
<div id="app"></div>

• (3)、导入包

// 1. 这两个导入时候，接收的成员名称，必须这么写
import React from 'react'   // 创建组件、虚拟dom元素，生命周期
import ReactDOM from 'react-dom'    // 把创建好的组件和虚拟dom放到页面上展示的

• (4)、创建虚拟DOM元素

// 2. 创建虚拟DOM元素
// 参数1：创建的元素的类型，字符串，表示元素的名称
// 餐数2：是一个对象或null,表示当前这个DOM元素的属性
// 参数3：子节点（包括其他 虚拟DOM 获取 文本子节点）
// 参数n: 其他子节点
// <h1 id="myh1" title="this is a h1">这是银行股IE大大的h1</h1>
var myh1 = React.createElement('h1',{id: 'myh1', title: 'this is a h1'},'这是银行股IE大大的h1');

• (5)、渲染：

// 3. 使用ReactDOM把虚拟DOM渲染到页面上
// 参数1：要渲染的那个虚拟DOM元素
// 参数2：指定页面上的DOM元素放到一个容器,接收的是一个dom元素而不是一个选择器
ReactDOM.render(myh1,document.getElementById('app'));

PS：在执行完 npm run dev 时，页面会渲染相应的效果，但是会报以下错误：

出现这个问题的原因是因为在index.html中引入的打包的main.js文件应该放到页面最后，不应该放到头部。

3. JSX的安装和使用

• 什么是JSX语法：就是符合xml规范的JS语法；（语法相对来说，要比HTML严谨的多）
• 如何启用JSX语法？
  
  • 安装babel插件
    
    • cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    • cnpm i babel-preset-env babel-preset-stage-0 -D
  • 安装能够识别转换的JSX语法的包babel-preset-react
    
    • cnpm i babel-preset-react -D
  • 添加.babelrc配置文件

{
    "presets": ["env","stage-0","react"],
    "plugins": ["transform-runtime"]
}

• JSX语法的本质：并不是直接把jsx渲染到页面上，而是内部先转换成了createElement形式，再渲染的；
  
  • 添加babel-loader配置项：

module.exports= {
    module: { // 所有第三方模块的配置规则
        rules: [ // 第三方匹配规则
            {test: /\.js|jsx$/,use: 'babel-loader',exclude: /node_modules/}
        ]
    }
}

• 创建虚拟dom的JSX写法

// var myDiv = React.createElement('div',{id: 'mydiv', title: 'div title'},'这是一个div元素');
const myDiv = <div id="mydiv" title="div aa">这是一个div元素<h2>这是一个大大的h2标签</h2></div>