❮ React 简介
React 如何使用 ES6 ❯
React 入门
更新于 2024/8/27 17:06:00
要在生产环境中使用 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:
亲自试一试 »
这种使用 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 (
Edit src/App.js and save to reload.
className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > 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'));
提交答案 »
开始练习
❮ React 简介
React 如何使用 ES6 ❯