React和JSX入门｜老吴教程

在本教程中，我们将了解如何开始创建 react 应用程序并尝试了解 jsx 的基础知识。本教程假设您对html和javascript有很好的理解。

什么是反应？

React是 Facebook 开发的 JavaScript 库，用于轻松管理 Web 应用程序的用户界面。React 的主要亮点之一是它有助于创建可管理的 UI 组件，这使得扩展大型 Web 应用程序变得更加容易。React 基于虚拟 dom 的概念工作，它保留了实际 DOM 的镜像。每当发生更改时，React 都会运行一个差异化过程，识别更改并将其更新到实际的 DOM。Virtual DOM 的概念使应用程序渲染速度更快并提高了性能。

什么是 JSX？

JSX 是一个类似于 XML 的 javaScript 语法扩展。这是一个例子：

ReactDOM.render(
  <h1>Welcome React, TutsPlus !!</h1>,
  document.getElementById('container')
);

JSX 代码看起来像 HTML，但实际上是 JavaScript 和 HTML 的混合体。h1上面的代码在container元素的标签内呈现消息。JSX 比 JavaScript 更快，因为它在编译源代码时执行优化。JSX 也是首选，因为它比纯 JavaScript 代码更易于使用。

来自官方文档：

JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

为什么使用 JSX？

在使用 React 应用程序时，实际上并不需要使用 JSX。您可以使用普通的旧 JavaScript 代码。但是使用 JSX 有它自己的优势：

1. 与 JavaScript 相比，编写 JSX 更容易。它就像打开和关闭 XML 标记一样简单。这是一个 JSX 示例：

<div>
<p>Welcome to TutsPlus</p>
</div>

这是编译后的 React 代码：

"use strict";

React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Welcome to TutsPlus"
  )
);

2. JSX 代码保证可读性，使可维护性更容易。

3. JSX 在编译时对代码进行了优化，因此与等效的 JavaScript 代码相比，它运行得更快。

入门

让我们通过编写一些 JSX 代码并在浏览器中呈现它来进一步学习。为了开始创建 React 应用程序，请创建一个index.html具有以下页面结构的简单页面：

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
	<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

	<script type="text/babel">
	    // JSX code would be here
	</script>
</head>
<body>
	<div id="container">

	</div>
</body>
</html>

从上面的代码可以看出，我们在页面中引用了 react和react-dom脚本index.html。我们还使用了babel脚本参考，它将转换 JSX 代码以响应函数调用。例如，考虑以下 JSX 代码：

var grp = <div>
  <p>Welcome to TutsPlus</p>
</div>;

Babel 会将上面的 JSX 代码转换为所需的 react 函数，如下所示：

var grp = React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Welcome to TutsPlus"
  )
);

使用 JSX 编写 React 组件

让我们创建一个显示欢迎消息的 React 组件。以下是代码的外观：

<script type="text/babel">
	var Message = React.createClass({
		render:function(){
			return <h1>Welcome to TutsPlus</h1>
		}
	});

	ReactDOM.render(<Message />,document.getElementById('main'));
</script>

Message是一个反应组件，它返回上述JSX代码，然后使用Babel. 使用ReactDOM.render，我们在 HTML 元素 div 中渲染组件main。

保存以上更改并尝试index.html在浏览器中浏览页面，您应该可以Welcome to TutsPlus在浏览器中查看消息。

将属性传递给组件

大多数时候需要将数据传递给我们的组件，这些组件将被评估或修改然后渲染。让我们看看如何将属性传递给我们的组件并显示数据。

假设我们想向我们的Message组件传递一个名称并在我们的消息中显示该名称。首先，我们将向我们的组件添加一个自定义属性。

ReactDOM.render(<Message name="Roy" />,document.getElementById('main'));

可以使用this.props组件键从组件渲染函数内部读取传递的属性。修改代码如下图：

var Message = React.createClass({
	render:function(){
		return <h1>Welcome to TutsPlus, {this.props.name}</h1>
	}
});

保存上述更改并浏览index.html页面，您应该能够看到该消息。

Welcome to TutsPlus, Roy

使用 JSX 创建 Google Map React 组件

现在我们熟悉了 JSX 并使用 JSX 创建 React 组件，让我们尝试创建一个用于显示 Google 地图的 React 组件。

首先在index.html.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

创建一个MyMap组件，如下所示：

var MyMap = React.createClass({
    render: function() {
        return (
            <div id="map"><span></span></div>
        );
    }
});

ReactDOM.render(<MyMap />,document.getElementById('main'));

Add a method called componentDidMount in the React component, and inside that method define the map-related variables as shown:

var MyMap = React.createClass({

    componentDidMount: function() {

      var latLong = new google.maps.LatLng(-47.888723, 444.675360);

      var options = {
              zoom: 2,
              center: latLong
          },
          map = new google.maps.Map(ReactDOM.findDOMnode(this), options),
          marker = new google.maps.Marker({
          map:map,
          animation: google.maps.Animation.BOUNCE,
          position: latLong
      });
    },

    render: function() {
        return (
            <div id="map"><span></span></div>
        );
    }
});

该componentDidMount方法在初始渲染后立即调用，所有地图对象都在该方法内初始化。 ReactDOM.findDOMNode找到对组件的 DOM 节点的引用并创建地图对象。marker已定义为设置标记属性，如map、position和animation.

尝试在#maindiv 中渲染地图组件。

ReactDOM.render(<MyMap />,document.getElementById('main'));

保存上述更改并尝试浏览index.html页面，您应该能够查看 Google 地图。

React和JSX入门第1张

把它概括

在本教程中，我们看到了 React 和 JSX 的基本介绍，以帮助您入门。我们看到了如何使用 JSX 创建 React 组件，还创建了一个 Google Map React 组件。在接下来的教程中，我们将专注于 React 的更多功能。

本教程的源代码可在GitHub上找到。

文章目录

什么是反应？

什么是 JSX？

为什么使用 JSX？

入门

使用 JSX 编写 React 组件

将属性传递给组件

使用 JSX 创建 Google Map React 组件

把它概括

什么是反应？

什么是 JSX？

为什么使用 JSX？

入门

使用 JSX 编写 React 组件

将属性传递给组件

使用 JSX 创建 Google Map React 组件

把它概括

相关推荐

最新文章 | 热门文章 | 随机文章