设置React环境，第2部分

最新推荐文章于 2022-02-09 12:14:54 发布

cunjie3951

最新推荐文章于 2022-02-09 12:14:54 发布

阅读量132

点赞数

文章标签： python java vue javascript react ViewUI

如果您不熟悉React，那么可以理解，您只想获取代码，并尝试一些简单的组件来了解React的工作原理。您真的不想在第一时间就经过冗长的设置过程。

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

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

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

密码笔

使用CodePen，您可以访问三个窗口来编辑HTML，CSS和JavaScript，还可以访问另一个窗口来呈现输出。您可以完全免费使用CodePen，甚至不需要注册帐户即可共享您的工作。但是，如果您定期使用该服务，则可能需要考虑开设一个帐户，以便填写个人资料并开始建立投资组合。

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

根据您的默认设置，这三个编辑器将位于主窗口的左侧/右侧，或放在顶部的一行中。

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

配置设定

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

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

要在CodePen中启用Babel，我们需要配置笔的设置。单击右上方菜单中的“设置”按钮，然后在出现的“ 笔设置”对话框中的JavaScript上。我们也可以在此处添加所需的React库。

单击快速添加下拉列表，然后从列表中选择反应。注意，React已添加到第一个输入框中，并带有指定库的完整路径。再次单击下拉列表以添加React DOM 。当我们将React组件呈现到浏览器DOM时，这是必需的。

最后，在JavaScript Preprocessor下拉菜单中，选择Babel 。现在，“ 笔设置”对话框应类似于以下内容：

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

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

我们的第一个React App

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

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

在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组件。首先，将此代码段添加到HTML窗口：

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

现在，将另一个组件定义添加到JavaScript窗口：

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

第二个组件与第一个组件非常相似，我们通过另一个对ReactDOM.render()调用将其呈现给id为app2的div元素。

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' ) );

现在，如果我们想向<MyFirstComponent />和<MySecondComponent />添加一些信息， <MyFirstComponent />不想在组件定义中指定这些信息怎么办？为此，我们可以使用语法等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道具，这些number道具将传递给每个子组件，并通过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>
        )
    }
}