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

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

React 直接在 HTML 中

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

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

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

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

设置 React 环境

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

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

create-react-app 将设置运行 React 应用程序所需的一切。

运行 React 应用程序

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

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

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

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

结果:

修改 React 应用程序

到目前为止一切都很好，但是我该如何更改内容?

查看my-react-app目录，你会发现一个src文件夹。 在 src 文件夹中有一个名为 App.js 的文件，打开它会如下所示:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
        

          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

尝试更改 HTML 内容并保存文件。

实例

将

中的所有内容替换为

元素。

点击保存后在浏览器中查看更改。

function App() {
  return (
    

      
Hello World!
    
  );
}

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 = 
Hello React!

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

运行实例 »

---

学习训练

练习题:

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

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

开始练习

---

简介

ES6