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 App！如果不行，请打开你的浏览器并在地址栏输入 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 内容并保存文件。
请注意，在你保存文件后，更改会立即显示，你无需重新加载浏览器！
示例
将 <div className="App"> 中的所有内容替换为 <h1> 元素。
点击“保存”后，在浏览器中查看更改。
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);
