本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
所有天上飞的理念，都需要陆地上实现。随着React火了之后，React现在已成了前端开发的必学框架了。而且React的实现思想还是那么的独特，对我们实现高性能的前端开发可以打下坚实的基础。她对DOM操作的虚拟DOM(virtual-dom)机制，是未来前端发展的一大方向！
React开发实战
React框架使用非常简单，我们只需在Web页面中引用react.js和JSXTransformer.js这两个js文件就可以快速开始了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/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="xttblog"></div>
<script type="text/babel">
ReactDOM.render(
<h1>www.xttblog.com</h1>,
document.getElementById('xttblog')
);
</script>
</body>
</html>
看了demo可能大家感觉奇怪的是<script type="text/babel">，这里为什么变了呢？这是为了把JSX转成标准的JavaScript，我们就用了<script type="text/babel">标签，然后通过Babel转换成在浏览器中真正执行的内容。同样的我们可能还会见到<script type="text/jsx">标签，这是因为React独有的JSX语法，跟JavaScript不兼容。React提供两个库：react.js和JSXTransformer.js ，它们必须首先加载。在实际的生成过程中JSXTransformer.js是在服务器端先完成的。
react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。
Jsx语法
通过上面的demo，我们发现HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX的语法，它允许HTML与JavaScript的混写，了解过AngularJs的朋友也会发现React同样的使用{x}结构来操作变量。
React组件属性
ReactJS是基于组件化的开发，React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组件。React.createClass方法就用于生成一个组件类。
var Xttblog = React.createClass({
render:function(){
return <h1>www.xttblog.com {test}</h1>;
}
});
React.render(
<Xttblog test="业余草" />,
document.getElementById('container')
);
根据上面的代码我们顺便总结下React组件：
1）获取属性的值用的是this.props.属性名
2）创建的组件名称首字母必须大写。
3）为元素添加css的class时，要用className。
4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。
React组件状态
组件免不了要与用户互动，React的一大创新就是将组件看成是一个状态机。一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI。组件状态的开发我们一般要用到getInitialState函数，这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。关于组件状态的使用一般体现在UI的启用、禁用，显示、隐藏等方面。
React组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
版权声明：本文为博主原创文章，未经博主允许不得转载。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » React开发进阶之JSX语法和React组件的生命周期