开始使用React和JSX

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

React是一个用来创建用户界面的一个开源库。它可以让你轻松的创建与底层数据模块保持一致的UI。这篇文章主要针对初学者,包括了React的基本知识和JSX语法。

开始使用React

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

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

mkdir react-test && cd react-test
touch 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()方法,用来渲染结构。在上面这个示例中,只返回了<p>Hello Universe</p>,然后在视图(view)中显示。
  • 一个组件直到它渲染前是不做任何事情。通过ReactDOM.render()来渲染一个组件,这个函数有两个参数,第一个参数是组件名(比如示例中的Greeting);第二个参数就是你想组件放到HTML中哪个元素中(比如示例中,将组件放在了一个ID名为greeting-divdiv元素内)。
  • 你可能想知道<greeting>到底是什么?这种语法称为JSX(JavaScript XML),允许你构建类似于HTML语法的DOM节点。JSX完全是可选的,你不需要为了使用React而使用它,不过它有很多很好的功能,你也没有理由不去利用它。
  • 因为浏览器本身是不懂JSX的,所以我们首要做的是通过JavaScript来编译它。在文件开头引入一个 browser.js文件。Babel会通过<script type="text/babel"></script>在浏览器中识得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结构如下:

<!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" src="src/random-message.jsx"></script>
  </body>
</html>

这样做意味着你现在需要一个服务器来查看页面。好在可以通过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 -y
npm install --save-dev babel-cli
npm 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:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/react/getting-started-react-jsx.htmlnike air max 90 yellow

如需转载,烦请注明出处:https://www.w3cplus.com/react/getting-started-react-jsx.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部