Heim > Artikel > Web-Frontend > 开始使用React和JSX_html/css_WEB-ITnose
开始使用React和JSX_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:50:351808Durchsuche
React是一个用来创建用户界面的一个开源库。它可以让你轻松的创建与底层数据模块保持一致的UI。这篇文章主要针对初学者，包括了React的基本知识和JSX语法。
开始使用React
或许，开始使用React最简单的方法就是从CDN中引入一个库(文中的例子是这样做的)。或者你可以使用 npm 来安装 或者从官方网站 下载React 运行所需要的文件。
首先项目创建一个目录，目录中包含一个 index.html 的文件：
mkdir react-test && cd react-testtouch index.html
使用你顺手的编辑器打开 index.html 文件，并添加下面的示例代码：
<!DOCTYPE html><html lang="en"> <head> <title>My First React Example</title> </head> <body> <div id="greeting-div"></div> <script src="https://fb.me/react-15.0.0.js"></script> <script src="https://fb.me/react-dom-15.0.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> <script type="text/babel"> var Greeting = React.createClass({ render: function() { return ( <p>Hello, Universe</p> ) } }); ReactDOM.render( <Greeting/>, document.getElementById('greeting-div') ); </script> </body></html> 我们看看上面的代码做了些什么：
- React遵循面向组件开发。总的想法就是让整个UI当作一个组件。在这个示例中，把这个组件命名为 Greeting 。在React中，通过 React.createClass() 创建这个组件。每个组件都有一个 render() 方法，用来渲染结构。在上面这个示例中，只返回了
Hello Universe
，然后在视图(view)中显示。 - 一个组件直到它渲染前是不做任何事情。通过 ReactDOM.render() 来渲染一个组件，这个函数有两个参数，第一个参数是组件名（比如示例中的 Greeting ）;第二个参数就是你想组件放到HTML中哪个元素中（比如示例中，将组件放在了一个 ID 名为 greeting-div 的 div 元素内）。
- 你可能想知道
到底是什么？这种语法称为 JSX （JavaScript XML），允许你构建类似于HTML语法的DOM节点。JSX完全是可选的，你不需要为了使用React而使用它，不过它有很多很好的功能，你也没有理由不去利用它。 - 因为浏览器本身是不懂JSX的，所以我们首要做的是通过JavaScript来编译它。在文件开头引入一个 browser.js 文件。Babel会通过 在浏览器中识得JSX，并将其转换成JavaScript。在整个开发过程中，JSX在浏览器中工作得很好。然而，你将JS部署到生产环境之前，需要先预编译JSX，这样你的应用会渲染得更快。稍后会介绍如何做到。
现在浏览器打开 index.html ，你可以在屏幕中看到“Hello Univers”这段文本。（是不是有点小激动）。
引入属性
React依赖于单向数据流。这意味着数据流发生只在一个方向，比如通过下个属性从父元素传给子元素。在JSX中这些属性是通过属性传递给子组件。在组件内部可以通过组件的 props 属性来访问组件的属性。属性改变时，确保呈现的UI是最新的数据模型。我们修改前面的代码，让文本每两秒随机显示。
var Greeting = React.createClass({ render: function() { return ( <p>{this.props.message}</p> ); }});setInterval(function() { var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe']; var randomMessage = messages[Math.floor((Math.random() * 3))]; ReactDOM.render( <Greeting message={randomMessage}/>, document.getElementById('greeting-div') );}, 2000); 上面的代码每两秒从数组中选择一个随机的消息渲染到组件 Greeting 中。选择传递消息的这个属性称为 message 。需要用一对大括号 {} 来调用变量。现在在访问 Greeting 组件时通过 this.props.message 访问传递的值。
运行上面的代码，它将每两秒显示一个随机消息。
注意，已经被传递的 props 是不可变的。你只是通过 props 访问组件的属性。在组件内部，从来都不写 this.props 。这样保证数据是单向流和让整个应用程序更容易理解数据变化，以及如何影响整应用程序。
引入状态和事件
在React中的每个组件如何有状态都可以封装和维护自己的状态。有状态的组件可以存储一个值，并且可以通过 props 将其传递给它的子组件。这样可以确保当一个组件的状态改变时， props 也相应的会改变。因此，子组件依赖于这些 props 自动重新渲染自己。
为了能更好的加强这个概念，我们来修改上面的示例代码。当你点击按钮后随机显示一个消息。这里将包含两个组件：
- RandomMessage : 这是父组件，其状态是保持选择一个随机的信息
- MessageView : 这是一个子组件，处理显示随机选择的信息
我们一起来看看每个组件的细节：
RandomMessage
var RandomMessage = React.createClass({ getInitialState: function() { return { message: 'Hello, Universe' }; }, onClick: function() { var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe']; var randomMessage = messages[Math.floor((Math.random() * 3))]; this.setState({ message: randomMessage }); }, render: function() { return ( <div> <MessageView message={ this.state.message }/> <p><input type="button" onClick={ this.onClick } value="Change Message"/></p> </div> ); }}); RandomMessage 组件的状态维护一个 message 属性。每个React组件都有一个 getInitialState 函数设置组件的初始状态。在上面的示例中， message 属性的初始值设置为"Hello, Universe"。
接下来，需要显示一个按钮，点击按钮时, message 的属性值会得到一个新的值，下面的是组件返回的HTML标签：
<div> <MessageView message={ this.state.message }/> <p><input type="button" onClick={ this.onClick } value="Change Message"/></p></div> 正如你看到的，该组件渲染的是 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 ( <p>{ this.props.message }</p> ); }}); 这个组件通过 message 属性传递给UI。你应该注意，这是一个无状态的组件和一个 RandomMessage 组件有状态的渲染。
现在我们已经创建好了所需的组件，是时候将 RandomMessage 组件渲染出来：
ReactDOM.render ( <RandomMessage />, document.getElementById('greeting-div')); 就是这样！每次点击按钮，你会看到一个不同的消息。
保持独立的JSX
直到现在我们一直在HTML中写JSX脚本。为了保持你的APP结构清晰，应该让每个组件有一个自己的 .jsx 文件。这意味着我们可以把上面的代码放在一个 random-message.jsx 文件中，并且按下面的方式将其引入到HTML中：
<script type="text/babel" src="src/random-message.jsx"></script>
新的HTML结构如下：
My First React Example <script type="text/babel" src="src/random-message.jsx"></script>
这样做意味着你现在需要一个服务器来查看页面。好在可以通过 npm 来安装一个 http-server ：
npm install -g http-server
然后在你项目的根目录下运行下面的命令：
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：核心技术与案例实战 》。