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);

运行实例 »


学习训练

练习题:

输入正确的 ReactDOM 方法以将 React 元素渲染到 DOM。

ReactDOM.(myElement, document.getElementById('root'));

开始练习