# React 快速入门
## 1. Hello World
```html
Hello React!
```
刚才代码发生的是：在选择的 DOM 节点中渲染了一个 React 组件。渲染过程从一个顶层组件开始，顶层组件可以按需包含许多子元素(子元素还可以嵌套子元素)。
ReactDOM 对象只包含几个方法，其中 `render()` 方法是最有用的。从 0.14 版本开始，它们被从 React 对象分离出来，目的是强调应用渲染实际上属于单独的概念。
接下来，我们需要关注组件的概念。组件可以用于构建用户界面，并通过任何适当的方式进行组合。在实际应用中，你需要创建自定义组件，但在起步阶段，我们先学习使用 React 提供的一个包裹层，它用于包裹 HTML DOM 元素。该包裹层可通过 `React.DOM` 对象进行调用。
最后，我们调用了熟悉的 `document.getElementById("app")` 方法访问 DOM 节点。函数调用通过该参数告诉 React 需要把应用渲染在页面的哪个部分。因此，这是连接你所熟知的DOM 操作到 React 新大陆的一座桥梁。
### React.DOM.*
通过浏览器控制台获取 React.DOM 对象的完整属性列表。
注意 `React.DOM` 和 `ReactDOM` 的区别。前者是预定义好的 HTML 元素集合，而后者是在浏览器中渲染应用的一种途径。
`React.DOM.h1()` 方法的首个参数接收一个对象，用于指定该组件的任何属性，如 DOM 属性。
第二个参数定义了组件的子元素。最简单的子元素就是例子中的文本。此外，还可以传递更多的参数，进行子元素的组合与嵌套。
```js
React.DOM.h1({id: "my-heading"},
React.DOM.span(null, React.DOM.em(null, "Hell"), "o"),
" world!",
React.DOM.i(null, 'React'),
),
```
> 如你所见，当你开始嵌套组件时，使用上述写法会很快遇到大量的函数调用和圆括号。为了简化工作，未来我们会使用 JSX 语法。
### 特殊 DOM 属性
`class` 和 `for` 不能直接在 JavaScript 中使用，因为它们都是 JS 中的关键字。取而代之的属性名是 `className` 和 `htmlFor`。
至于 `style` 属性，你不能像以往在 HTML 中那样使用字符串对其赋值，而需要使用 JS 对象取代。通过避免使用字符串的方式，可以减少跨站脚本攻击的威胁，因此这是一个广受欢迎的变化。
```js
React.DOM.h1(
{
className: "pretty",
htmlFor: "me",
style: {
background: "black",
color: "white",
fontFamily: "Verdana",
}
},
"Hello world!"
)
```
### 下一步：自定义组件
至此，你已经完成了 Hello World 应用的骨架。现在你知道如何：
* 安装、设置并使用 React 库 (仅仅需要引入两个 `