环境搭建
react.js
核心文件
react-dom.js
渲染页面中的DOM，当前文件依赖于react核心文件
babel.js
ES6 转换成 ES5 将 JSX语法转换为JavaScript，方便浏览器进行代码的兼容
下载
react核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save
入门程序
流程:
- 导包
- 创建dom根节点
- 在下面写 js代码
<script type="text/babel"> - 创建一个节点
- 渲染页面
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<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.min.js"></script>
</head>
<body>
<!-- 创建dom根节点 一个页面中需要有一个根节点，这个节点下的内容就会被react所管理-->
<div id="demoReact">
</div>
<script type="text/babel">
let MyDom = <h1>
{/* 我是注释信息 */}
Hello, world!
</h1>
ReactDOM.render(
MyDom,
document.getElementById('demoReact')
);
</script>
</body>
</html>