React 入门
要在生产环境中使用 React，您需要 npm，它包含在 Node.js 中。
要概述 React 是什么，您可以直接在 HTML 中编写 React 代码。
但要在生产环境中使用 React，您需要安装 npm 和 Node.js。
直接在 HTML 中使用 React
学习 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>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>这种使用 React 的方法对于测试目的来说可能没问题，但对于生产环境，您需要设置一个 **React 环境**。
设置 React 环境
如果您已经安装了 npx 和 Node.js，您可以使用 create-react-app 创建一个 React 应用程序。
如果您之前已全局安装 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.ac.cn"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;尝试更改 HTML 内容并保存文件。
请注意，在您保存文件后，更改会立即显示，您无需重新加载浏览器！
示例
用 <h1> 元素替换 <div className="App"> 内的所有内容。
单击“保存”时，请在浏览器中查看更改。
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;请注意，我们已删除不需要的导入（logo.svg 和 App.css）。
结果
接下来做什么？
现在您在计算机上拥有了一个 React 环境，您可以开始学习有关 React 的更多知识。
在本教程的其余部分，我们将使用我们的“显示 React”工具来解释 React 的各个方面以及它们如何在浏览器中显示。
如果您想在计算机上执行相同的步骤，请从将 src 文件夹简化为仅包含一个文件：index.js 开始。您还应该删除 index.js 文件内部的任何不必要的代码行，使其看起来像下面的“显示 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);
