React 入门
要在生产中使用 React，你需要 npm，它包含在 Node.js.
为了了解 React 是什么，您可以直接在 HTML 中编写 React 代码。
但为了在生产中使用 React，你需要 npm 和 Node.js 已安装。
直接在 HTML 中做出反应
开始学习 React 的最快方法是直接在 HTML 文件中编写 React。
首先包含三个脚本，前两个脚本让我们在 JavaScript 中编写 React 代码，第三个脚本 Babel 允许我们在旧版浏览器中编写 JSX 语法和 ES6。
您将在 React 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，你可以使用以下命令创建 React 应用程序 create-react-app.
如果你之前已经安装 create-react-app 全局而言，建议您卸载该软件包以确保 npx 始终使用最新版本的create-react-app.
要卸载，请运行以下命令： npm uninstall -g create-react-app.
运行此命令创建名为 my-react-app:
npx 创建 React 应用程序 my-react 应用程序
这 create-react-app 将设置运行 React 应用程序所需的一切。
运行 React 应用程序
现在你已经准备好运行你的第一个 真实的 反应应用程序！
运行此命令以移至 my-react-app 目录：
cd 我的反应应用程序
运行此命令来运行 React 应用程序 my-react-app:
npm 启动
一个新的浏览器窗口将会弹出，其中包含您新创建的 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.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 的更多信息了。
在本教程的其余部分，我们将使用“展示 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);
