上一节:
下一节:

  React 环境搭建

  • 使用 CDN 方式

    本教程使用了 React 的版本为 16.13.0，你可以在官网 https://reactjs.org/下载最新版。
    你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下： 
    <script src="https://cdn.staticfile.org/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.13.0/umd/react-dom.development.js"></script>
//生产环境中不建议使用
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    官方提供的 CDN 地址： 
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
//生产环境中不建议使用
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。

  • 使用 NPM 方式

    如果已安装 NPM 和 Node.js，则可以通过首先安装 create-react-app 来创建 React 应用程序。
    如果您已经创建了 create-react-app，则可以跳过此部分。
    通过在终端中运行以下命令来安装 create-react-app： 
    C:\Users\Administrator>npm install -g create-react-app
    然后，您可以创建一个 React 应用程序，让我们创建一个名为 myfirstreact 的应用程序。
    运行以下命令以创建一个名为 myfirstreact 的 React 应用程序： 
    C:\Users\Administrator>create-react-app myfirstreact
    create-react-app 将设置运行 React 应用程序所需的一切。
    创建的 myfirstreact 文件目录结构如下：
    React

    运行 React 应用程序

    现在您可以运行第一个真正的 React 应用程序了！
    运行以下命令以移至 myfirstreact 目录： 
    C:\Users\Administrator>cd myfirstreact
    运行以下命令以运行 React 应用程序 myfirstreact： 
    C:\Users\Administrator>myfirstreact>npm start
    新创建的 React App 会弹出一个新的浏览器窗口！ 如果不弹出浏览器窗口，请打开浏览器，然后在地址栏中键入localhost:3000的端口打开。
    运行结果如下：
    React

  • 修改 React 应用

    到目前为止一切正常，但是如何更改内容？
    查看 myfirstreact 目录，您将找到一个 src 文件夹。 在 src 文件夹中，有一个名为 App.js 的文件，将其打开，它将如下所示：
    /myfirstreact/src/App.js: 
    import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;
    尝试更改 HTML 内容并保存文件。
    请注意，更改在保存文件后立即可见，您无需重新刷新加载浏览器！
    将 <div className="App"> 中的所有内容替换为 <h1> 元素。
    然后保存文件，查看浏览器中的更改。
    /myfirstreact/src/App.js: 
    import React from 'react';
function App() {
  render() {
    return (
      <div>
        <h1 style={{color: "red",textAlign:"center"}}>欢迎来到蝴蝶教程！</h1>
      </div>
    );
  }
}

export default App;
    请注意，我们已删除了不需要的导入（logo.svg和App.css）。
    运行结果如下：
    React

  • 下一步做什么？

    现在，您的计算机上已经有了一个 React 环境，您已经准备好了解有关 React 的更多信息。
    在本教程的其余部分，我们将使用 Show React工具来说明 React 的各个方面，以及它们如何在浏览器中显示。
    如果要在计算机上执行相同的步骤，请首先删除 src 文件夹，使其仅包含两个文件：index.js 和 index.html，在某些版本中，您可能会在公用文件夹中找到 index.html， 还应该删除两个文件中的所有不必要的代码行，以使它们看起来像下面的 Show React工具中的文件：
    index.js： 
    import React from 'react';
import ReactDOM from 'react-dom';

const myfirstelement = <h1>Hello React!</h1>

ReactDOM.render(myfirstelement, document.getElementById('root'));
    index.html： 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>
    运行结果如下：
    react
    注意，接下来的章节都围绕这个 npm 创建的环境的文件代码进行学习
上一节:
下一节: