在本教程中，我们将了解如何开始创建React应用，并尝试了解JSX的基础知识。 本教程假定您对HTML和JavaScript有很好的了解。
什么是React？
React是Facebook开发JavaScript库，用于轻松管理Web应用程序的用户界面。 React的主要亮点之一是它有助于创建可管理的UI组件，这使得扩展大型Web应用程序更加容易。 React处理虚拟DOM的概念，在其中保留了实际DOM的镜像。 每当发生更改时，React都会执行差异处理，识别更改并将其更新为实际DOM。 虚拟DOM的概念使应用程序渲染更快，并提高了性能。
什么是JSX？
JSX是一个JavaScript语法扩展，看起来类似于XML。 这是一个例子：
ReactDOM.render(
<h1>Welcome React, TutsPlus !!</h1>,
document.getElementById('container')
); JSX代码看起来像HTML，但实际上是JavaScript和HTML的混合。 上面的代码将消息呈现在container元素的h1标签内。 JSX比JavaScript更快，因为它在编译源代码时执行优化。 JSX也是首选，因为它比普通JavaScript代码更易于使用。
从官方文档：
JSX是ECMAScript的类似XML的语法扩展，没有任何定义的语义。 它不打算由引擎或浏览器实现。 并不是将JSX纳入ECMAScript规范本身的建议。 它打算由各种预处理器（编译器）用来将这些令牌转换为标准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> 从上面的代码可以看出，我们已经在index.html页面中引用了react和react-dom脚本。 我们还使用了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是一个react组件，它返回上面的JSX代码，然后使用Babel将其编译为React函数代码。 使用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组件，让我们尝试创建一个React组件以显示Google Maps。
首先在index.html添加对Google Maps API的引用。
<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')); 在React组件中添加一个名为componentDidMount的方法，并在该方法内部定义与地图相关的变量，如下所示：
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 。
尝试在#main div中渲染地图组件。
ReactDOM.render(<MyMap />,document.getElementById('main')); 保存以上更改，然后尝试浏览index.html页面，您应该可以查看运行中的Google Maps。
包起来
在本教程中，我们了解了React和JSX的基本介绍，以帮助您入门。 我们看到了如何使用JSX创建React组件，还创建了一个Google Map React Component。 在接下来的教程中，我们将重点介绍React的更多功能。
您最近是否尝试过创建React组件？ 我很想听听您的经验。 请在下面的评论中让我知道您的想法。
翻译自: https://code.tutsplus.com/tutorials/getting-started-with-react-and-jsx--cms-27352
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
