开始使用React

或许，开始使用React最简单的方法就是从CDN中引入一个库(文中的例子是这样做的)。或者你可以使用 npm 来安装 或者从官方网站 下载React 运行所需要的文件。

首先项目创建一个目录，目录中包含一个 index.html 的文件：

mkdir react-test && cd react-testtouch index.html

使用你顺手的编辑器打开 index.html 文件，并添加下面的示例代码：

RandomMessage 组件的状态维护一个 message 属性。每个React组件都有一个 getInitialState 函数设置组件的初始状态。在上面的示例中， message 属性的初始值设置为"Hello, Universe"。

接下来，需要显示一个按钮，点击按钮时, message 的属性值会得到一个新的值，下面的是组件返回的HTML标签：

正如你看到的，该组件渲染的是 MessageView 和一个 input 按钮。要注意的是，在JSX语法中，组件 message 属性的状态是通过子组件的 attribute 来传递。组件还给按钮添加了一个单击事件的 this.onClick 。注要，要写成驼峰形式。在HTML中事件名称是用小写，即 onclick ，但是在JSX中事件名称需要使用驼峰形式。

click 事件处理选择一个随机的消息和更新组件状态：

this.setState({ message:randomMessage });

setState 函数在React中主要是用来通知一个数据的变化。这种方法用来更新组件的当前状态，然后重新渲染。结果也需要通过 props 重新计算以及子组件也需要依赖 props 重新渲染自己。

MessageView

var MessageView = React.createClass({ render: function() { return ( 
{ this.props.message }
 ); }});

这个组件通过 message 属性传递给UI。你应该注意，这是一个无状态的组件和一个 RandomMessage 组件有状态的渲染。

现在我们已经创建好了所需的组件，是时候将 RandomMessage 组件渲染出来：

ReactDOM.render ( , document.getElementById('greeting-div'));

就是这样！每次点击按钮，你会看到一个不同的消息。

保持的JSX

直到现在我们一直在HTML中写JSX脚本。为了保持你的APP结构清晰，应该让每个组件有一个自己的 .jsx 文件。这意味着我们可以把上面的代码放在一个 random-message.jsx 文件中，并且按下面的方式将其引入到HTML中：

新的HTML结构如下：

然后在你项目的根目录下运行下面的命令：

http-server

你的页面可以在 http://127.0.0.1:8080/ 访问。

预编译JSX

正如我们前面提到的，运用到生产之前最好先预编译JSX。可以使用 npm 来安装 babel-cli 。Babel(版本6)默认情况下不包含任何转换器(transforms)，额外的包必须得通过安装。

npm init -ynpm install --save-dev babel-clinpm install --save-dev babel-preset-es2015 babel-preset-react

然后在根目录下创建一个 dist 目录：

mkdir dist

并且运行：

babel --presets es2015,react --watch src/ --out-dir dist

JSX文件将被编译，并且编译出来的同名JavaScript文件将放到 dist 目录中。编译后的JavaScript文件可以直接放到你的页面，这也意味着，页面不再需要加载 browser.js 。同时要是你的JSX做了任何修改,Babel会监控 src 目录下所有的JSX文件，然后编译后放到 dist 目录中。

注意：在我们的示例中实际上并没有使用ES2015的语法，但我们已经包括了ES2015 Preset。

Virtual DOM

React非常的快，那是因为使用了一个Virtual DOM的技术。在内存中表示一个DOM，但从来不会直接访问真正的DOM。组件的渲染函数会在任何给定的时间内很快的告诉DOM应该是一个什么样子。你已经看到组件渲染函数返回HTML元素，但并不产生真正的DOM。相反，它只是一个DOM的描述。

扩展阅读

本文简单的介绍了React和JSX。除了丰富的视图(View)技术，React还有许多其他的好处， 你可以在这里阅读到很多 。

如果你想了解React更多的信息，你可以 阅读这里的文章 ，这是一些很优秀的教程。如果你不想在React中使用JSX，你可以像这篇文章中介绍的内容一样，使用 Raw React 。如果你想继续学习一些先进的技术，你可以阅读前面我写的教程： 使用React和Flux创建一个Note Taking APP 。

感谢你的阅读，如果你有任何问题或建议，欢迎在下面的评论中留言。

本文根据 @Sandeep Panda 的《 Getting Started with React and JSX 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/getting-started-react-jsx/ 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。