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 方式

    如果已安装 NPMNode.js,则可以通过首先安装 create-react-app 来创建 React 应用程序。
    如果您已经创建了 create-react-app,则可以跳过此部分。
    通过在终端中运行以下命令来安装 create-react-app:
    C:\Users\Administrator>npm install -g create-react-app
    
    然后,您可以创建一个 React 应用程序,让我们创建一个名为 myfirstreact 的应用程序。
    运行以下命令以创建一个名为 myfirstreactReact 应用程序:
    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.jsindex.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 创建的环境的文件代码进行学习