1.4 创建你的第一个React应用程序

现在你已经知道了组件是 React UI 的基础构件，但是组件到底看起来是什么样子的？怎么样才能创建一个组件呢？ 简单来说，一个 React 组件就是一个带有 render 方法，并且返回组件 UI 描述的 JavaScript 类，如下所示：

class Hello extends React.Component {
    render() {
        return {
            <h1>Hello World</h1>
        }
    }
}

你也许已经注意到了 JavaScript 代码中间的 HTML 标记。之前曾经提到过，React 有一种称为 JSX 的 JavaScript 语法扩展， 可以让我们在代码中直接书写 XML (以生成 HTML)。

是否使用 JSX 是可选的，但是它已经成为一种被广泛接受的在 React 组件中定义 UI 的标准方案，由于 JSX 使用了具有丰富表达能力 的声明式语法，以及这些内容最终会被转换成普通的 JavaScript 函数调用，所以这意味着 JSX 并没有影响 JavaScript 语言原本的语义。

我们会在下一章更详尽地介绍JSX，但是现在要提醒你注意的是，React 需要一个额外的“转换”步骤(或者说是翻译步骤)， 将JSX 转换成JavaScript 代码。

在现代的JavaScript 开发生态系统中，有许多工具可处理这种需要额外转换步骤的情况。

下面花一点时间来讨论如何为React 项目搭建出一套流畅的开发流程。

results matching ""

    No results matching ""