这是《玩转 React》系列的第三篇。看到这篇文章的标题，了解过React的同学可能已经大致猜到我想讲的是什么了，这篇文章的内容对于刚接触React的同学来说可能比较难，但是希望大家能够坚持下去.这是Facebook的前端高手对前端开发做出的革命性创新。对React的第一印象废话不多说，先看一段代码：}}ReactDOM.render(,mountNode);这是从React官网主页贴过来的一段示例代码。简单说明一下，这段代码实现了一个名为HelloMessage的组件，它接收一个name属性，可以在ShowHelloxxx页面显示。ReactDOM.render用于将组件渲染到页面上的DOM节点。在接下来的文章中，我们将详细讲解如何创建React组件，以及如何开发一个完整的React项目。现在，我想和大家讨论的是，看完上面的代码，你对React的第一印象是什么。你的内心感觉如何？相信很多人第一次看到这样的代码时，他们的感受是：“靠，这是什么玩意儿？为什么HTML是用JavaScript代码写的，显示和业务逻辑是分离的？我不明白这。”？”，说实话，这是我当时内心真实的感受。还好我坚持了下来，一直用到现在。现在我对React的感觉是：“我擦它，它很酷，它很棒”。这种思路一开始很容易理解。很多人和我一样，被“展示要和业务逻辑分开”这句话洗脑太久了。其实这句话真正发挥价值的时候，是在MVC开发模式出现之前，那个时候web程序的逻辑非常简单。可能页面的开头是连接数据库查询数据，后面是显示查询结果的HTML代码。如果您了解一点PHP，就会发现PHP文件的开头有一个，当时用于将PHP代码与HTML代码分开。但是随着web程序逻辑越来越复杂，混合了HTML代码的业务逻辑代码越来越难以维护，于是就有了MVC开发模式。并不是说“展示要和业务逻辑分离”这句话已经不适用于现在的web开发了。我想说的是，我们看问题的时候，一定要回到问题的本质。我们应该接受React中的这种写法吗？判断应该看React的写法是不是让我们的前端代码更清晰，更容易维护，而不是用JavaScript写了类似HTML语法的东西。不要为了分离而分离。其实它只是给JavaScript添加了一些糖——JSX上面在JavaScript中编写类HTML代码的语法称为JSX。您可以将其视为JavaScript的扩展版本。显然，这种语法在浏览器环境下是无法执行的，所以在代码加载到页面之前，我们需要通过工具将其转换成标准的JavaScript语法，就像为什么现在可以使用ES6语法一样，虽然现在的浏览器还没有好好支持一下例如下面两段代码其实是等价的。JSX语法：constelement=(你好，世界！);从以上代码翻译而来的标准JavaScript语法：constelement=React.createElement('h1',{className:'greeting'},'Hello,world!');是不是觉得JSX的语法更直观、更简洁？所以JSX实际上是React.createElement(component,props,...children)的语法糖。如果你熟悉HTML，那么JSX对你来说不会有任何压力，因为HTML中的所有标签在JSX中都支持，基本上没有学习成本，只有以下几点略有不同：class属性变为classNametabindex属性变为tabIndexfor属性成为htmlFortextarea的值。style属性的值需要通过value属性来指定接收一个对象，css属性变成驼峰命名，比如：backgroundColor。在上一篇文章中，我们提到了组件。其实我们可以把用JSX编写的HTML标签看做是已经在React中实现的基础组件。在下一篇文章中，我将详细介绍如何使用这些基础组件创建一个新的组件，也就是上一篇文章中提到的React提供的创建新HTML标签的能力。最后写这篇文章的主要目的是希望大家对JSX有一个基本的印象。我理解很多同学因为看了一眼JSX的语法就放弃看了。真的很可惜……在这里我也想和大家分享一个亲身经历。简单来说，就是保持谦虚，就像乔布斯说的：“Stayhungry,Stayfoolish”。当你接触到一个新的框架、新技术，当它与你现有的体验发生冲突时，当你觉得它的设计很垃圾时，不要急于抱怨。对于一些比较流行的框架或技术来说尤其如此。你要相信那些框架的设计者的技术能力和工程经验是远远在你之上的。你以为他们真的没有考虑到你不舒服的地方吗？认真思考框架设计者在设计这个框架时的心路历程，认真学习别人在这个框架上的最佳实践，结果往往会超出你的预期。同样，当你发现框架确实在某些方面有所欠缺时，不要急于造轮子，先去社区搜索一下，你遇到的问题可能别人已经讨论很久了，有相当不错的结果。即使没有解决方案，这个过程也能给你很多启发。亲身体验，久经考验，希望你能用上，谢谢。
