ReactJS 特点：
（1）MVC架构中的V层 利于组件化 小巧 复用性高
（2） 虚拟DOM
（3）单向数据流 减少了重复代码
JSX是什么？
JavaScript的XML语法扩展
React是如何使用JSX的？
<p className = "hello">
Hello {this.props.name}
</p>
React 会将上面的JSX编译成React构造器的方法：
React.createElement("p",{className:"hello"},"Hello",this.props.name)
Helllo World
(1)首先机器上要安装nodejs 不说安装过程了 自己百度下
(2)安装bower (bower介绍）
node install -g bower
(3)创建目录 make dir ReactJS-Study
(4)下载ReactJS 组件 bower install react
(5)创建index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app'),
function () {
console.log("render over");
}
);
</script>
</body>
</html>
以上代码在浏览器直接打开运行即可
使用JSX语法写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var MsgBox = React.createClass({
render:function(){
return (<h1>hello lkp</h1>)
}
});
ReactDOM.render(
<MsgBox/>,
document.getElementById('app'),
function () {
console.log("render over");
}
);
</script>
</body>
</html>
![学习笔记（持续更新）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)