设置React环境：第3部分

在本教程系列的其余部分中，我们将专注于在本地设置 react。这些方法中的第一种类似于 CodePen，其中 React 脚本被动态插入到您的 html 文件中，然后在输出窗口中呈现。

这里唯一的区别是我们将手动插入脚本。

手动反应设置

首先创建一个文档并为 React 和 React dom库index.html添加几个标签。<script>

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         
<title>Document</title>     </head>     <body>         <div id="app"></div>         
<script src="https://unpkg.com/react@15/dist/react.js"></script>         
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>          
<script>         </script>     
</body> </html>

添加的 React 脚本是通过 CDN 进行的，特定的 URI 是Facebook推荐的。如果您想完全离线工作，您可以在本地下载这些脚本并将链接更改为相对链接。

添加了一个元素<div id='app'> 作为我们的 React 应用程序将被渲染到的 DOM 中的位置。还添加了一个空白<script>标签，稍后将用于添加我们的 React 代码。

然而，这一次，我们将无法使用jsx，因为无法在运行时将其转换为javascript。它必须通过诸如babel之类的预处理器提前编译。我们也不能使用 ES6 类或模块，因为这些特性还没有通用的浏览器支持。

让我们使用本教程系列第二部分中 CodePen 示例中的相同 React 组件，因此我们可以直接比较两种设置方法。

仅从组件开始<App />：

const App = function () {
    return React.createElement(
        'div',
        null,
        React.createElement( 'h2', null, 'My First React Components!' )
    );
}

ReactDOM.render( React.createElement( App ), document.queryselector( '#app' ) );

这就是没有 JSX 的 React 组件的样子。事实上，这就是 Babel 实际编译成的 JSX 代码。

现在让我们添加两个子组件的定义，并在顶级组件中添加对每个子组件的引用<App />。我还将实现number CodePen 示例中的道具。

这是整个 HTML 源代码现在的样子。

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         
<title>Document</title>     </head>     <body>         <div id="app"></div>         
<script src="https://unpkg.com/react@15/dist/react.js"></script>         
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>         
<script>         
const App = function () {             
return React.createElement(                 
'div',                 
null,                 
React.createElement( 
'h1', 
null, 
'My First React Components!' ),                 
React.createElement( 
MyFirstComponent, 
{ number: '1st' } ),                 
React.createElement( 
MySecondComponent, 
{ number: '2nd' } )             
);         
}         
const MyFirstComponent = function ( props ) {             
return React.createElement(                 
'p',                
 null,                 
 props.number + ': Hello from React!'             
 );         
 }         
 const MySecondComponent = function ( props ) {             
 return React.createElement(                 
 'p',                 
 null,                 
 props.number + ': My Second React Component.'             
 );         
 }         
 ReactDOM.render( React.createElement( App ), document.querySelector( '#app' ) );         
 </script>     
 </body> </html>

请注意，我们如何在<App />组件中通过添加更多调用来创建任意数量的元素React.createElement()。此外，道具通过propsJavaScript 对象传递给子组件，然后可以通过函数参数在组件内部访问props。

在浏览器中打开index.html以查看 React 输出。

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

我不会在这里详细介绍React.createElement()和其他非 JSX 主题，因为大多数 React 用户选择使用 JSX 编写他们的组件。在本教程系列的其余部分，我们将使用 JSX 作为我们的 React 组件。

显然，缺少 Babel 等工具限制了完全从头开始编写 React 代码的难易程度。我们也可以利用许多其他工具，例如从所有require d React 库和我们的应用程序代码创建单个 javaScript 文件的捆绑器。我们将在下一节中发现一种更好的方法，该方法同样易于设置。

创建反应应用

为了解决复杂的手动 React 设置问题，Facebook 引入了create-react-app，这是一种用户友好的方式来开始使用 React 进行开发。它为您提供完整的构建设置，但根本不需要手动配置。

让我们继续安装 create-react-app。在命令行窗口中键入以下代码。

npm install -g create-react-app

这将全局安装 create-react-app，以便您可以从任何目录访问它。

你需要安装 npm 来运行这个命令，并且需要node .js 来运行 create-react-app。由于 npm 与Node.js捆绑在一起，因此只需从官方网站下载并安装最新版本的 Node.js。

我们现在将创建一个新的 React 应用程序，名为my-first-components. 请注意，create-react-app 会自动为您的应用程序创建包含文件夹，因此您只需确保您位于要在其中创建应用程序文件夹的目录中。

运行这些命令来创建您的应用程序并运行启动脚本。

create-react-app my-first-components
cd my-first-components/
npm start

create-react-app 可能需要一两分钟才能完成安装所有内容。完成后，输入npm start命令，将打开一个新的浏览器窗口，几秒钟后，将显示您的 React 应用程序。

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

create-react-app 的好处在于它包含一个迷你 Web 服务器，并且还监视应用程序中的文件以进行更改。每当进行更改时，您的应用程序都会重新构建，并且浏览器窗口会自动重新加载以显示您更新的应用程序。

在自动设置过程中，create-react-app 会生成几个文件以及以下三个文件夹：

节点模块
上市
源代码

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

为了了解我们如何创建组件并将它们连接到一个 create-react-app 生成的应用程序中，我们将创建迄今为止我们一直在使用的相同组件。

该应用程序的默认输出建议我们以编辑 App.js 为起点，因此打开此文件并删除徽标和css文件的导入调用，因为我们不需要这些文件。我们还可以简化<App />组件，并添加之前的两个子组件。

您的App.js文件现在应如下所示：

import React, { Component } from 'react';

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

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

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

export default App;

保存您的更改，create-react-app 将在浏览器中自动更新您的应用程序。这导致与以前相同的输出。（请注意，这次它是通过本地 Web 服务器加载到浏览器中的。）

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

不过，让我们让它更加模块化，以符合创建 React 应用程序的现代最佳实践。src在名为MyFirstComponent.js和的文件夹中创建两个新文件MySecondComponent.js。

在里面MyFirstComponent.js，添加以下代码：

import React, { Component } from 'react';

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

export default MyFirstComponent;

在里面MySecondComponent.js，添加类似的代码：

import React, { Component } from 'react';

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

export default MySecondComponent;

最后，我们需要更新App.js以导入两个子组件，因为它们现在位于单独的文件中：

import React, { Component } from 'react';
import MyFirstComponent from './MyFirstComponent';
import MySecondComponent from './MySecondComponent';

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

export default App;

这种构建 React 应用程序的方法更加模块化和可移植。它还允许更轻松的调试，因为每个组件都在其自己的模块中自包含。