WEBPACK+ES6+REACT入门(2/7)-在项目中使用react以及JSX语法介绍

开始之前

因webpack各版本配置不同，在执行install命令时，可配置需求所用版本。命令举例：npm install [email protected] [email protected] -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
const myh1 = React.createElement('h1',null,'这是h1')

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