赵走x博客 - 开发者的网上家园

1、Hello World

资源编号:76049 书籍 React快速上手开发热度：77

入门篇

让我们踏上使用React 开发应用的旅程吧。在这一章里，你将学习如何设置React 并编写你的第一个Hello World 应用。

# 1.1　设置
首先需要获取一份React 库的源代码。所幸的是，这个过程非常简单。访问http://reactjs.com （这个网站会重定向到React 的官方GitHub 页面，即http://facebook.github.io/react/） ，然后点击Download 按钮，再点击Download Starter Kit，即可获得一份ZIP 文件。解压该文件，并把压缩包中的目录复制到一个方便找到的地方。（https://zh-hans.reactjs.org/）
例如：
````
mkdir ~/reactbook
mv ~/Downloads/react-0.14.7/ ~/reactbook/react
```
现在你的工作目录（reactbook）应该如图1-1 所示。

![bs64](https://img.handsomemark.com/2019/11/07/3399b88c-011a-11ea-ba98-0242ac140002.png)
现在，我们只使用其中的~/reactbook/react/build/react.js 文件。我们会在后续的学习中逐步介绍其他文件的使用。

需要注意的是，React 并没有强制规定任何目录结构。因此，你可以根据具体情况把React移动到其他目录，或者对react.js 文件进行重命名操作。

# 1.2　Hello React World
我们首先在工作目录中编写一个简单的页面（~/reactbook/01.01.hello.html）：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
```

该文件仅有两个值得我们注意的地方：
• 引入了React 库及其DOM 插件库（通过`<script src> `标签）；
• 定义了这个应用应该出现在页面上的位置（(`<div id="app">`)）。

既可以在React 应用中混用常规HTML 内容以及其他JavaScript 库，也可以在一个页面内使用多个React 应用。只需要在DOM 结构中给React 指定渲染内容的位置即可。

现在我们添加一段输出Hello world! 的代码。修改01.01.hello.html 文件，把JavaScript 注释替换为如下代码：
```
ReactDOM.render(
        React.DOM.h1(null,"Hello world!"),
        document.getElementById("app")
    );
```
在浏览器中打开01.01.hello.html 后，可以看到新的代码在应用中生效了（如图1-2 所示）。

![bs64](https://img.handsomemark.com/2019/11/07/a1fd3676-011c-11ea-9b08-0242ac140002.png)
图1-2：修改后的Hello World 应用

恭喜，现在你完成了第一个React 应用！

图1-2 中的Chrome 开发者工具显示了React 生成的代码结构。从中可以看到，`<div id="app"> `中的占位符被React 应用生成的新内容所代替。

# 1.3　刚才发生了什么
你的第一个应用之所以成功运行，是因为在代码内部发生了一些有趣的事情。首先，我们使用了React 对象，所有可用的API 都可通过该对象进行调用。实际上，React在设计API 时注重简化，所以需要记忆的方法名称并不多。然后，我们使用了ReactDOM 对象。这个对象只包含几个方法，其中render() 方法是最有用的。在旧版本中，这些方法曾经属于React 对象；但从0.14 版本开始，它们被分离出来，目的是强调应用渲染实际上属于单独的概念。这是因为，你创建的React 应用还可以渲染到不同的环境中，比如HTML（浏览器DOM）、canvas、原生的Android 或iOS 应用。

接下来，我们需要关注组件的概念。组件可以用于构建用户界面，并通过任何适当的方式进行组合。在实际应用中，你需要创建自定义组件，但在起步阶段，我们先学习使用React 提供的一个包裹层，它用于包裹HTML DOM 元素。该包裹层可通过React.DOM 对象进行调用。在第一个例子中，我们使用了h1 组件。它对应于HTML 的`<h1>` 元素，可以使用`React.DOM.h1()` 方法进行调用。

最后，我们调用了熟悉的`document.getElementById("app") `方法访问DOM 节点。函数调用通过该参数告诉React 需要把应用渲染在页面的哪个部分。因此，这是连接你所熟知的DOM 操作到React 新大陆的一座桥梁。

一旦跨过了从DOM 到React 的桥梁，你就不需要再进行DOM 操作了，因为React 实现了从组件到基础平台（浏览器DOM、canvas、原生应用）的转化。你无需再关心DOM，但这并不意味着不能操作DOM。React 为开发者提供了选择的自由，你可以根据具体情况，随时回到DOM 操作的怀抱当中。

理解了每行代码的作用之后，让我们回顾整段代码。刚才发生的事情是：在你选择的DOM 节点中渲染了一个React 组件。渲染过程从一个顶层组件开始，而顶层组件可以按需包含许多子元素（子元素中还可以嵌套子元素）。实际上，尽管这是一个简单的例子，但`h1` 组件中仍然包含一个子元素，即文本Hello world!。

# 1.4　React.DOM.*
现在，你知道可以通过React.DOM 对象把各种各样的HTML 元素当作React 组件使用。（图1-3 展示了如何通过浏览器控制台获取React.DOM 对象的完整属性列表。）接下来我们将深入了解这个API。

![bs64](https://img.handsomemark.com/2019/11/07/e8c6a07e-011c-11ea-91ae-0242ac140002.png)
图1-3：React.DOM 的属性列表

注意React.DOM 和ReactDOM 的区别。前者是预定义好的HTML 元素集合，而后者是在浏览器中渲染应用的一种途径（参考ReactDOM.render() 方法）。

我们首先看看React.DOM.* 方法接收的参数。回顾上述Hello World 应用的代码：
```
ReactDOM.render(
        React.DOM.h1(null,"Hello world!"),
        document.getElementById("app")
    );
```
`h1() `方法的首个参数接收一个对象（在这个例子中是空对象null），用于指定该组件的任何属性（比如DOM 属性）。例如给组件传递id 属性：
```
ReactDOM.render(
        React.DOM.h1({id:"my-heading"},"Hello world!"),
        document.getElementById("app")
    );
```
上述例子生成的HTML 结构如图1-4 所示。

![bs64](https://img.handsomemark.com/2019/11/07/04269d42-011d-11ea-aa69-0242ac140002.png)
图1-4：调用React.DOM 生成的HTML 代码

第二个参数（在这个例子中是"Hello world!"）定义了该组件的子元素。最简单的子元素就是上述例子中的文本（在DOM 结构中是一个文本节点）。此外，你还可以通过传递更多的函数参数，进行子元素的组合与嵌套。比如：
```
React.DOM.h1({id:"my-heading"},
            React.DOM.span(null,"Hello"),
            " world!"
        ),
```
再看另一个例子，这一次调用了多重嵌套的组件（结果如图1-5 所示）：
```
React.DOM.h1({id:"my-heading"},
            React.DOM.span(null,
                React.DOM.em(null,'Hell'),
                "o"
            ),
            " world!"
        ),
```
图1-5：React.DOM 嵌套调用生成的HTML 结构
如你所见，当你开始嵌套组件时，使用上述写法会很快遇到大量的函数调用和圆括号。为了简化工作，你可以使用JSX 语法。我们会在第4 章将JSX作为独立的主题进行探讨；在此之前，我们暂且使用这种纯JavaScript 语法。

原因在于JSX 会引起一些争议：人们在第一次接触JSX 时通常会感到排斥（啊，要在JavaScript 中插入XML ！），但随后就会发现离不开它了。为了让你初步感受一下，这里提供上述代码的JSX 版本：
```
ReactDOM.render( 
        <h1 id="my-heading">
        <span><em>Hell</em>o</span> world! 
        </h1>,
        document.getElementById("app")
    );
```
# 1.5　特殊DOM 属性
下列几个DOM 属性比较特殊，需要引起注意：class、for 和style。

class 和for 不能直接在JavaScript 中使用，因为它们都是JavaScript 中的关键字。取而代之的属性名是className 和htmlFor。
```
// 反例
// 属性不会生效
React.DOM.h1(
	{
		class: "pretty",
		for: "me",
	},
	"Hello world!"
);

// 正确例子
// 属性生效
React.DOM.h1(
	{
		className: "pretty",
		htmlFor: "me",
	},
	"Hello world!"
);
```
至于style 属性，你不能像以往在HTML 中那样使用字符串对其赋值，而需要使用JavaScript 对象取而代之。通过避免使用字符串的方式，可以减少跨站脚本（cross-site scripting，XSS）攻击的威胁，因此这是一个广受欢迎的变化。
```
// 反例
// 属性不会生效
React.DOM.h1(
	{
		style: "background: black; color: white; font-family: Verdana",
	},
	"Hello world!"
);

// 正确例子
// 属性生效
React.DOM.h1(
{
	style: {
		background: "black",
		color: "white",
		fontFamily: "Verdana",
	}
},
	"Hello world!"
);
```
此外，在处理CSS 属性时，还要注意使用JavaScript API 的属性名。换句话说，就是使用fontFamily 代替font-family。

# 1.6　React DevTools 浏览器扩展
如果你在尝试本章前面的例子时，打开过浏览器控制台，你会看到一条提示信息
“Download the React DevTools for a better development experience: https://fb.me/reactdevtools ”。这个URL 是通往浏览器扩展安装页的链接，该扩展可以帮助你调试React 应用（如图1-6 所示）。

![bs64](https://img.handsomemark.com/2019/11/07/5273d820-011d-11ea-85df-0242ac140002.png)
图1-6：浏览器扩展程序React DevTools
虽然这个浏览器扩展在开始阶段可能派不上用场，但到了第4 章你就会发现它的意义所在。

# 1.7　下一步：自定义组件
至此，你已经完成了Hello World 应用的骨架。现在你知道如何：
• 安装、设置并使用React 库（仅仅需要引入两个`<script> `标签）；
• 在选定的DOM 节点中渲染一个React 组件（ 比如ReactDOM.render(reactWhat, domWhere)）；
• 使用内建组件，即那些常规DOM 元素外的包裹层（比如React.DOM.div(attributes, children)）。

然而，React 真正的力量要在你开始使用自定义组件构建（并更新）应用界面后才能体现 出来。下一章，我们将学习组件的具体操作。