React 环境安装与创建应用

要在生产中使用 React，您需要 npm，它包含在 Node.js 中。

要了解 React 是什么，可以直接用 HTML 编写 React 代码。

但为了在生产中使用 React，您需要安装 npm 和 Node.js。

HTML 中使用 React

开始学习 React 的最快方法是直接在 HTML 文件中编写 React。

首先包括三个脚本文件，前两个让我们在 JavaScripts 中编写 React 代码，第三个 babel.min.js 允许我们在旧浏览器中编写 JSX 语法和 ES6。

您将在 React JSX 章节章节中学习到更多的 JSX 知识。

实例

在 HTML 文件中包含三个 CDN 的 JS 文件:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="mydiv"></div>
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>
  </body>
</html>

运行一下

这种使用 React 的方法可以用于测试目的，但对于生产，您需要设置 React 环境。

安装 React 环境

如果安装了 np 和 Node.js，则可以使用 create-react-app.

如果您以前在全局范围内安装过 create-react-app，建议您卸载该软件包，以确保 npx 始终使用最新版本的 create-react-app。

要卸载，请运行此命令:

npm uninstall -g create-react-app

运行此命令以创建名为 my-react-app 的 React 应用程序:

npx create-react-app my-react-app

create-react-app 将设置运行 React 应用程序所需的所有内容。

运行React应用程序

现在，您已经准备好运行第一个 真正的 React 应用程序了！

运行此命令以移动到 my-react-app 目录:

cd my-react-app

运行此命令以运行 React 应用程序 my-react-app:

npm start

一个新的浏览器窗口将弹出您新创建的React应用程序！如果没有，请打开浏览器并在地址栏中键入 localhost:3000。

结果如下:

修改 React 应用程序

到目前为止还不错，但我如何更改内容？

查看 my-react-app 目录，您将找到一个 src 文件夹。在 src 文件夹中有一个名为 App.js 的文件，打开它，它将如下所示：

/myReactApp/src/App.js：

import logo from './logo.svg';
import './App.css';
function App() {
  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> 元素。

单击“保存”时，请查看浏览器中的更改。

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}
export default App;

请注意，我们已经删除了不需要的导入（logo.svg 和 A pp.css）。

结果如下:

现在，您的计算机上有了 React 环境，您已经准备好了解有关 React 的更多知识。

如果要在计算机上执行相同的步骤，请首先剥离 src 文件夹，使其仅包含一个文件：index.js。您还应该删除 index.js 文件中任何不必要的代码行，使它们看起来像下面的示例：

import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));

React 环境安装与创建应用

HTML 中使用 React

实例

安装 React 环境

运行React应用程序

修改 React 应用程序

实例

分类导航