设置React环境：第1部分

react是一个用于构建用户界面 (UI) 的javascript库。它由 Facebook 维护和开发，是当今创建 Web 应用程序最流行的工具之一。

然而，它在设置 React 应用程序时不太友好而享有盛誉，尤其是对于初学者而言。问题源于 React 刚开始流行时，创建 React 应用程序的标准方法涉及对大量设置文件进行复杂的手动配置。

许多旨在帮助初学者开始使用 React 的教程介绍了不同的方法和工具来设置工作应用程序。即使建议的构建方法之间存在细微差别，混淆也是不可避免的。

为了能够通过手动配置成功设置 React 应用程序，需要对多种不同的技术有很好的理解。

设置React环境：第1部分第1张

这种设置的灵活性实际上是一件好事。你有完全的自由来选择你想要构建你的 React 应用程序的特定工具，并完全按照需要配置它们。

一旦熟悉了这些工具，您将有信心充分发挥它们的潜力并创建深入复杂的应用程序。在那之前，对于许多未必具备创建 React 应用程序所需的命令行工具经验的开发人员来说，仍然存在进入障碍。

为了帮助减轻这种挫败感，本教程系列重点介绍了设置 React 应用程序的各种方法。我们将从最基本的方法开始，然后建立更复杂的设置。不过，让我们通过更详细地阐明我们将要介绍的 React 设置的类型来开始。

我们将涵盖的内容

在本教程系列结束时，您将能够通过四种主要方式设置 React 应用程序：

使用在线代码编辑器 (CodePen)
基本手动设置，无需node .js 或 npm
使用 create-react-app
完整的手动设置和配置

第一种方法演示了如何使用CodePen等在线代码编辑器快速设置 React 应用程序。使用这种方法，您将在几秒钟内编写您的第一个应用程序！

然后，我们将继续在本地开发环境中设置 React，从不使用任何构建工具直接将脚本添加到 html 文件开始。接下来的两种设置方法侧重于在日常开发中如何设置典型的 React 应用程序。

正如您将看到的，使用 create-react-app 工具可以非常容易地通过一个命令来启动 React 应用程序！最后，我们将介绍如何通过命令行完全从头开始设置 React 应用程序，这是老式的方式。

每种设置方法都有它的位置，没有单一的“更好”方法，只有根据您的需要的替代方案。

React 是一个很棒的库，可以用来构建 Web 应用程序，而且它也很有趣！现在让我们看一下教程先决条件，以确保您跟上进度。

先决条件

设置 React 应用程序的最简单方法只需要互联网连接。然而，随着我们进行更复杂的设置，我们将完全从头开始设置 React 应用程序。因此，建议对以下主题有所了解。

命令行

Windows、mac OS 和 Linux 都提供对命令行工具的访问。这些在现代 Web 开发中被大量使用，以快速有效地完成复杂的任务。如果您没有任何使用命令行来执行诸如管理文件/文件夹、安装工具、运行脚本等操作的经验，那么至少值得您花时间学习基础知识。

Node.js 和 NPM

如果您从事 Web 开发已经有一段时间了，那么您可能至少听说过Node.js 和npm。Node.js 最初是为了在服务器上运行 JavaScript 而创建的，但现在也被广泛用于开发 Web 应用程序、简化和自动化常见任务，所有这些都在单一环境下进行。

实际上有数十万个可用的 Node.js 模块，并且 npm 被引入作为专用的包管理器，以帮助安装、组织和管理 Web 应用程序中的所有各种模块。由于 npm 与 Node.js 捆绑在一起，因此您只需在系统上安装最新版本的 Node.js 即可通过命令行使用它。

javaScript

设置和开发 React 应用程序需要合理的 JavaScript 水平。否则，您肯定会在某些时候难以创建任何深度或复杂性的 React 应用程序。这包括ES6的一些特性，例如箭头函数、类和模块。如果有必要，我建议在尝试开发 React 应用程序之前复习一下你的 JavaScript 技能。

反应

本教程系列侧重于设置 React 应用程序而不是开发它们，因此我们不会深入研究 React 特定主题，例如组件、道具和状态。不过，了解这些是什么是一个好主意，因此在下一节中，我们将介绍 React 的基本功能，并探索所有部分如何组合在一起以形成一个工作应用程序。

React 应用程序的结构

在我们深入了解我们的第一个设置方法之前，让我们快速浏览一下 React 本身。

大多数应用程序都包含 React 的三个基本特性。这些是：

成分
道具
状态

这些是编写有效的 React 应用程序需要掌握的关键特性。一旦你达到了那个阶段，你就会做好充分的准备，更深入地研究 React 并开发更复杂的应用程序。

你可能会惊喜地发现 React 组件、道具和状态并不难理解。我个人的经验是，React 设置过程比学习 React 本身更难！

成分

任何 React 应用程序的构建块都是组件。将它们视为封装标记、行为和样式的可重用代码块。它们也可以相互嵌套，这使得它们具有高度的可重用性。例如，您可能有一个<Book />组件，它表示与一本书关联的数据和 UI。然后，您还可以拥有一个<BookIndex />渲染多个<Book />组件的组件，依此类推。

为了使const ructing组件更容易，创建了 jsx 来为组件提供类似 HTML 的结构。如果您熟悉 HTML 或 XML，那么您就可以轻松地使用 JSX 构建组件。值得注意的是，在 React 中根本不需要使用 JSX，但它现在已成为定义组件的公认标准方式。

道具

道具允许您在组件之间传递信息。而在 React 中，信息只能通过 props 从父组件传递到子组件。

如果您选择在组件定义中使用 JSX（我强烈建议您这样做），那么在组件上定义 props 与添加 HTML 属性非常相似。这也是 JSX 如此受欢迎的原因之一！能够为 React 组件和 props 使用类似 HTML 的语法使得快速搭建你的应用程序变得非常容易。

让我们仔细看看我们的<BookIndex />React 组件示例，看看我们如何使用多个嵌套的子<Book />组件来定义它。同时，我们会将信息<Book />从<BookIndex />.

首先，这是<BookIndex />组件定义：

class BookIndex extends React.Component {
    render() {
        return (
            <div className="books">
                <h2>List of all books</h2>
                <Book title="Through the Looking-Glass" author="Lewis Carroll" published="1871" />
                <Book title="The Time Machine" author="H. G. Wells" published="1895" />
                <Book title="A Tale of Two Cities" author="Charles Dickens" published="1859" />
            </div>
        )
    }
}

然后，在每个<Book />组件内部，我们可以像这样访问传入的 props：

class Book extends React.Component { 
    render() { 
        return ( 
            <div className="book"> 
                <h2>{this.props.title}</h2> 
                <p>作者：{this.props.author}</p > 
                <p>已发布：{this.props.published}</p> 
            </div> 
        ) 
    } }

如果上面创建 React 组件的语法看起来很奇怪，别担心——它非常简单。一个 ES6 类扩展了基础组件类，然后一个（必需的）渲染方法处理组件的输出。