React学习手册

React

与

JSX

｜

87

</script>

<script type="text/babel">

//

在这里编写

JSX

代码，或者链接其他包含

JSX

代码的独立

JavaScript

文件

</script>

</body>

</html>

Babel v5.8

是必需的

为了在浏览器中转译代码，最好使用

Babel v.5.8

。

Babel 6.0+

不能作为浏览器内

部的转译器使用。

本章后续的章节中，将会介绍

Babel

和

webpack

一起搭配使用，对

JavaScript

文件进行

静态转译。现在，使用浏览器内部的转译器已经能够满足需要了。

菜谱与

JSX

React

日渐风靡的原因之一是它允许用户使用优雅的代码编写

Web

应用。创建优雅的代

码模块非常有用，它可以清楚地说明应用程序的功能。

JSX

为用户提供了一种漂亮、

简洁的方式表示代码中的

React

元素，这对我们是非常有意义的，并且能够被团队的

其他开发人员快速地阅读理解。

JSX

的不足之处在于，它不能被浏览器识别。在我们

的代码可以被浏览器解析之前，需要将

JSX

格式转译成纯粹的

React

源码。

示例

5-5

中的数组包含两个菜谱，它们表示我们应用程序的当前

State

。

示例

5-5

：菜谱数组

var data = [

{

"name": "Baked Salmon",

"ingredients": [

{ "name": "Salmon", "amount": 1, "measurement": "l lb" },

{ "name": ...