开始之前

因webpack各版本配置不同，在执行install命令时，可配置需求所用版本。命令举例：npm install react@16.2.0 react-dom@16.2.0 -S。此命令为开发和上线环境下（-S）安装对应版本的react和react-dom。实际安装时，各版本如下所示，

 "react": "^16.2.0",
 "react-dom": "^16.2.0"
 "babel-core": "^6.26.0",
 "babel-loader": "^7.1.4",
 "babel-plugin-transform-runtime": "^6.23.0",

步骤

1、运行命令npm install react react-dom -S，安装react和react-dom。(-S表示开发和上线，都需要用到）
react：用以创建组件和虚拟dom，同时此包包含了组件的生命周期
react-dom：用以进行dom操作，最主要的场景：ReactDom.render()
2、在index.js中编码如下：

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

//2、创建虚拟dom元素  
//参数1：创建元素类型，字符串，表示元素名称
//参数2：对象或者null，表示当前dom元素属性
//参数3：子节点，包括其他虚拟dom或文本子节点
//参数n：其他子节点
//html写法参考：
//<h1 id='myh1' title='this is a h1'>这是h1</h1>
const myh1 = React.createElement('h1',null,'这是h1')

//3、使用reactdom把虚拟dom渲染到页面上
//参数1：要渲染的虚拟dom
//参数2：指定页面上一个容器
   ReactDOM.render(
 	myh1,
   document.getElementById('app')
   )

3、此时，<h1>标签并无属性，原因：在index.js代码第25行，在创建虚拟dom元素时，参数二dom元素属性传递的值为null。<h1>标签并无属性。chrome显示如下图所示：

4、将参数二修改为接受的对象，更改index.js代码如下：

const myh1 = React.createElement(
'h1',
{id:'myh1',title:'this is a h1'},
'这是h1')

此时，页面中只有一个<h1>，现在需求在<h1>外面包裹一层<div>，方法为再添加一个虚拟dom元素，并完成两个虚拟dom属性的嵌套关系。
5、在index.js中修改代码如下：

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

//2、创建虚拟dom元素  
//参数1：创建元素类型，字符串，表示元素名称
//参数2：对象或者null，表示当前dom元素属性
//参数3：子节点，包括其他虚拟dom或文本子节点
//参数n：其他子节点
//html写法参考：
//<h1 id='myh1' title='this is a h1'>这是h1</h1>
const myh1 = React.createElement(
   'h1',
   {id:'myh1',title:'this is a h1'},
   '这是h1')

const mydiv = React.createElement（
   'div',
   null,
   '这是div',
   myh1  //追加节点，完成虚拟dom元素的嵌套
）
//3、使用reactdom把虚拟dom渲染到页面上
//参数1：要渲染的虚拟dom
//参数2：指定页面上一个容器
  ReactDOM.render(
	//myh1，
     mydiv, //将嵌套后的div渲染到页面上
     document.getElementById('app')
  )

渲染页面上的dom结构，最好的方式是通过html代码实现。
但是在以上操作时，都是在js文件中实现，js文件不允许使用html代码标记，存在打包失败的问题。
在react中，允许使用。实现方式是使用babel转换js标签。

jsx

jsx：在js中混合写入类似html的语法。即符合xml规范的js。jsx语法的本质：在运行时，被转换成react.createElement形式。
为练习以上描述内容，新建index.js，代码如下：

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

//2、创建虚拟dom元素
const mydiv = <div id="mydiv" title = "this is a div">这是一个div</div> 

//3、使用reactdom把虚拟dom渲染到页面上
//参数1：要渲染的虚拟dom
//参数2：指定页面上一个容器
   ReactDOM.render(
	  mydiv, //将嵌套后的div渲染到页面上
	  document.getElementById('app')
   ) 

6、安装babel等插件，命令为：npm install babel-core@6.26.0 babel-loader@7.1.4 babel-plugin-transform-runtime@6.23.0 -D。
7、安装babel语法，命令为：npm install babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-stage-0@6.24.1 -D。
8、在webpack.config.js文件的module中添加loader等所有第三方模块配置规则，代码如下：

module.exports={
     mode:'development',//development:开发环境 production：产品环境
     //webpack4.x中，有一个很大的特性：约定大于配置 约定的默认打包入口路径为：src->index.js 
     //所以将index.html文件重命名为index.js
     plugins:[
          htmlWebPackPlugin
     ],
     module:{//所有第三方模块的配置规则
          rules:[//第三方匹配规则
               {
                 test:/\.jsx?/,
                 use:'babel-loader',
                 exclude:/node_modules/
               },
          ]
     },

配置.babelrc

9、项目根目录下添加babel的配置文件.babelrc，并添加如下配置：

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

10、现在可在页面中添加html语法标记。

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

//2、创建虚拟dom元素
const mydiv = <div id="mydiv" title = "this is a div">
	这是一个div
	<h1>这是一个h1</h1>
	</div> 

//3、使用reactdom把虚拟dom渲染到页面上
//参数1：要渲染的虚拟dom
//参数2：指定页面上一个容器
   ReactDOM.render(
	  mydiv, //将嵌套后的div渲染到页面上
	  document.getElementById('app')
   ) 

上一篇:WEBPACK+ES6+REACT入门(1/7)-创建webpack4.x项目
下一篇:WEBPACK+ES6+REACT入门(3/7)-react组件以及props
END