React入门
React 开发环境搭建
需要什么文件？
只需要引入以下3个js文件即可：
- react.js : 核心文件，基础文件
- react-dom.js : 渲染页面中的DOM,依赖于react.js文件，引用时必须在react.js的后面引用
- babel.js : ES6语法代码转为ES5，将JSX语法（浏览器不认识）转化为JavaScript语法（浏览器认识）
如何获取这三个文件？
使用npm的方式获取
注意：使用npm需要先安装npm，也就是安装node.js，安装node.js时会顺带安装npm
查看node.js版本 ： node -v
查看npm版本 ： npm -v
-
react.js
npm i react --save
-
react-dom.js
npm i react-dom --save
-
bable
npm i babel-standalone --save
具体操作流程：
（1）新建项目文件夹：
（2）win+R 打开控制台，cd进入项目文件夹
（3）输入如下命令行，创建package.json文件
npm init -y
（3）下载react.js
在项目文件目录下，使用命令行 npm install react --save 或 npm i react --save
使用npm 比较慢，也可使用 cnpm进行下载，下载镜像不同而已
cnpm install react --save
（4）下载react-dom.js
同上 cnpm install react-dom --save
（5）下载babel.js
新建html文件，引入三大文件
（1）新建hello.html文件
（2）引入核心文件react.js
在 react -> umd -> react.development.js
（3）引入react-dom.js和babel.js文件
注意：实际上是引入的文件是react-dom.development.js文件
创建根节点
创建dom根节点：一个页面下需要有一个根节点，这个节点下的内容就会被react所管理，后续内容都在根节点下，一个页面只有一个根节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules\react\umd\react.development.js"></script>
<script src="node_modules\react-dom\umd\react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.js"></script>
</head>
<body>
<!--
创建dom根节点，一个页面下需要有一个根节点，这个节点下的内容就会被react所管理
后续内容都在根节点下，一个页面只有一个根节点
-->
<div id="root-dom-react">
</div>
</body>
</html>
JSX
示例：
let myDom = <h1>你好啊，React!</h1>;//JSX格式 ： JavaScript和xml结合的一种格式
优点：
JSX格式 ： JavaScript和xml结合的一种格式
1.执行的效率更快
2.是类型安全的，编译的过程中就能及时的发现错误
3.在使用jsx的时候编写模板会更加简单和快速
简单示例和结果展示
代码：
<body>
<!--
创建dom根节点，一个页面下需要有一个根节点，这个节点下的内容就会被react所管理
后续内容都在根节点下，一个页面只有一个根节点
-->
<div id="root-dom-react">
</div>
</body>
</html>
<script type="text/babel">
let myDom = <h1>你好啊，React!</h1>; //JSX格式 ： JavaScript和xml结合的一种格式
/*
JSX格式 ： JavaScript和xml结合的一种格式
优点：
1.执行的效率更快
2.是类型安全的，编译的过程中就能及时的发现错误
3.在使用jsx的时候编写模板会更加简单和快速
*/
ReactDOM.render(myDom,document.getElementById("root-dom-react"));
</script>
说明：
ReactDOM.render(参数1,参数2)；
参数1：所定义的jsx格式的变量
参数2：目标div
作用：将参数1渲染到参数2所在div
运行结果：
本文章仅作测试使用，从其他编辑器复制过来的，图片无法显示。
