React 入门

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

要大致了解什么是 React，您可以直接在 HTML 中编写 React 代码。

但是为了在生产环境中使用 React，你需要安装 npm 和 Node.js。< /p>

React 直接在 HTML 中

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

以下实例包含三个脚本，前两个让我们在 JavaScript 中编写 React 代码，第三个 Babel 允许我们在旧浏览器中编写 JSX 语法和 ES6。

您将在 React JSX 一章中了解有关 JSX 的更多信息。

实例

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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/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 环境

如果你安装了 npx 和 Node.js，你可以使用 create-react-app 创建一个 React 应用程序。

如果您之前已全局安装过 create-react-app，建议您卸载该包以确保 npx 始终使用最新版本的 create-react-app。< /p>

要卸载，请运行以下命令: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 和 App.css）。

结果:

下一步是什么?

现在您的计算机上有一个 React 环境，您可以了解有关 React 的更多信息。

在本教程的其余部分，我们将使用我们的 "Show React" 工具来解释 React 的各个方面，以及它们如何在浏览器中显示。

如果您想在您的计算机上执行相同的步骤，首先将 src 文件夹删除为仅包含一个文件:index.js。您还应该删除 index.js 文件中所有不必要的代码行，使它们看起来像下面 "Show React" 工具中的示例:

实例

单击"运行实例"按钮查看结果。

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

运行实例 »