设置React环境：第2部分

如果您是 react 新手，那么可以理解，您只想编写代码，并尝试一些简单的组件来了解 React 是如何工作的。您真的不想在一开始就经历漫长的设置过程。

在本教程中，我将向您展示如何在几秒钟内开始使用 React 进行编码，几乎完全消除了设置过程！您将使用CodePen，一个在线代码编辑器，它使您能够立即开始编写 React 代码。

使用在线代码编辑器的一个有用的副作用是您可以通过唯一的 URL 轻松地与他人分享您的工作。其他开发人员也可以搜索您创建的任何内容，以寻找基于 React 的示例。

让我们看一下 CodePen，看看设置 React 并开始编写您的第一个应用程序是多么容易！

代码笔

CodePen 让您可以访问三个窗口来编辑 html、css和javascript，以及另一个窗口来呈现输出。您可以完全免费使用 CodePen，甚至不需要注册一个帐户来分享您的工作。但是，如果您经常使用该服务，您可能需要考虑开设一个帐户，以便您可以填写个人资料并开始建立投资组合。

CodePen 中的每个新创建都称为“笔”。转到主页并单击屏幕右上角的大“创建 ”按钮，然后从下拉菜单中单击“新建笔”。

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

根据您的默认设置，三个编辑器将位于主窗口的左侧/右侧，或者在单行的顶部布局。

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

每次您在任一编辑器窗口中键入时，CodePen 输出窗口都会自动更新。这是可选的，可以通过笔的设置禁用。

配置设置

在我们编写任何 React 代码之前，我们需要导入必要的库脚本并设置我们的 JavaScript 处理器。我们将在我们的 React 组件中使用jsx，以及 ES6 的一些特性，所以为了确保 CodePen javaScript 编辑器可以解释我们的代码，我们需要一个工具来获取我们的 JSX 和 ES6 代码并将其编译为标准所有浏览器都可以运行的 JavaScript。

我们将使用 Babel 作为我们的 JavaScript 编译器，因此您将能够安全地使用 JavaScript 的所有最新功能，而不必担心浏览器的兼容性。增加对 JSX 编译的支持是一个真正的好处，因为这意味着我们只需要使用一个工具。

要在 CodePen 中启用babel，我们需要配置笔的设置。单击右上角菜单中的设置按钮，然后在出现的 笔设置 对话框中单击JavaScript 。我们也可以在这里添加需要的React 库。

单击 快速添加 下拉菜单并从列表中选择 React 。请注意，React 被添加到第一个输入框中，并指定了库的完整路径。再次单击下拉菜单以添加 React dom。当我们将 React 组件渲染到浏览器 DOM 时，这是必需的。

最后，在 JavaScript Preprocessor 下拉列表中，选择 Babel。您的 笔设置 对话框现在应该类似于以下内容：

设置React环境：第2部分第3张

React 和 React DOM 脚本的确切版本在您的屏幕上可能会略有不同，因为 CodePen 不可避免地会不时更新到最新版本。

单击关闭返回到 CodePen 主界面。请注意，在 JavaScript 编辑器窗口中的JS标签旁边，添加了一个额外的 （Babel） 标签，以提醒 JavaScript 在浏览器中执行之前将通过 Babel 编译器。

我们的第一个 React 应用程序

在 HTML CodePen 编辑器窗口中，添加一个 <div id="app"> 元素。这是一个空的占位符，我们的 React 应用可以使用它来渲染我们的组件。

我们不需要手动添加太多 HTML，因为 React 会为我们处理添加和更新 DOM 元素。我们也不会向我们的笔添加任何 CSS，因此请随意重新排列窗口，以便 JavaScript 编辑器和输出窗口有更多可用空间。

设置React环境：第2部分第4张

在 JavaScript 编辑器窗口中，输入以下代码以添加我们的第一个组件。

class MyFirstComponent extends React.Component {
    render() {
        return (
            <p>Hello from React!</p>
        )
    }
}

这几乎是 React 中可能的组件的最基本版本。我们使用了一个 ES6 类来扩展核心 React 组件类，它实现了一个render() 方法并返回一个 HTML 元素。

要显示我们的组件，我们需要调用该ReactDOM.render() 方法：

ReactDOM.render(< MyFirstComponent />, document.queryselector ('#app'));

第一个参数是要渲染的 React 组件，第二个参数指定要渲染到的 DOM 元素。

设置React环境：第2部分第5张

现在让我们创建另外几个 React 组件。首先，将此代码段添加到 HTML 窗口：

<div id="app2"></div>

现在向 JavaScript 窗口添加另一个组件定义：

class MySecondComponent extends React.Component {
    render() {
        return (
            <p>My Second React Component.</p>
        )
    }
}

第二个组件与第一个组件非常相似，我们使用 of 将其渲染到元素，div 并再次调用.idapp2ReactDOM.render()

ReactDOM.render( <MySecondComponent />, document.querySelector( '#app2') );

但是，以这种方式渲染单个组件并不是很有效。当前接受的方法是定义一个顶级组件，例如<App />，它包含 React 应用程序中的所有其他组件。然后，您所需要的只是对的一次调用RenderDOM.render()，而不是对每个组件的单独调用。

因此，让我们重构我们非常简单的 React 应用程序以利用这种顶级组件方法。

首先，删除<div id="app2> 元素，因为我们只需要一个元素来“挂载”我们的 React 应用程序。然后，添加一个<App /> 组件定义：

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>My First React Components!</h1>
                <MyFirstComponent/>
                <MySecondComponent/>
             </div>
        )
    }
}

现在，我们的 React 应用程序通过单个顶级组件完全自包含。请注意，它由 HTML 元素和React 组件组成。这使得您可以根据需要轻松构建应用程序。

最后，删除所有ReactDOM.render() 方法并用一个调用替换：

ReactDOM.render( <App />, document.querySelector( '#app' ) );

设置React环境：第2部分第6张

现在，如果我们想向组件定义中添加一些信息<MyFirstComponent /> 但又<MySecondComponent /> 不想在组件定义中指定它怎么办？我们可以通过使用类似 HTML 属性的语法将信息从父组件传递给子组件来做到这一点。这在 React 中被称为 props。

让我们通过将编号信息传递给我们的两个嵌套组件来演示这一点。<App />将定义更改为：

class App extends React.Component {
    render() {
        return (
            <div>
                <h2>My First React Components!</h2>
                <MyFirstComponent number="1st" />
                <MySecondComponent number="2nd" />
            </div>
        )
    }
}

我们添加了两个number props，它们将传递给每个子组件并通过 JavaScript 对象提供。在组件定义中，我们可以通过props 对象访问 props，如下所示：

class MyFirstComponent extends React.Component {
    render() {
        return (
            <p>{this.props.number}: Hello from React!</p>
        )
    }
}

class MySecondComponent extends React.Component {
    render() {
        return (
            <p>{this.props.number}: My Second React Component.</p>
        )
    }
}

设置React环境：第2部分第7张