引入react文件跑起页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> //必须放在第一行引入
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel"> //babel编译，把jsx语法编译成js语法
ReactDOM.render(
<div> //外层必须用div包起来
<h1>hello ， reactjs</h1>
<h1>hello ， reactjs</h1>
</div>,
document.getElementById('app')
);
</script>
</body>
</html>
vscode可以安装插件Live-server工具，可以直接打开文件；
jsx语法要点：
jsx解析时，遇到<>会按照标签去解析，遇到{}会按照js表达式解析：
ReactDOM.render(
<div>{1+2}</div>,
document.getElementById('xxx')
);
渲染多个元素时，必须有一个外层div包裹起来，
渲染的元素必须是闭合标签，（带有/）
<input type='text' />
Component:
// 创建一个react组件：
let Mycomponent = React.createClass({ //组件名必须大写
render:function(){
return <h2> hello reactjs </h2> //return 值不能换行
}
});
ReactDOM.render(
<div>
<Mycomponent></Mycomponent>
</div>,
document.getElementById('app')
);
组件要点：组件名必须为大写，jsx解析机制把尖括号内首字母大写的编译成组件，小写的编译成HTML标签
组件之间的传值：Props
父传子：
组件使用时传值：（自定义名称）
<Ipt showName='姓名' text_toast = '请输入用户名'></Ipt>
<Ipt showName='密码' text_toast = '请输入密码'></Ipt>
<Btn gongneng='注册'></Btn>
<Btn gongneng='登录'></Btn>
组件内部使用时：
this.props.属性名 拿到值
<label>{this.props.showName}</label>
<input placeholder={this.props.text_toast} type='text' /> //属性需要大括号解析
<button>{this.props.gongneng}</button>