React入门
要在生产中使用 React，您需要 npm，它包含在Node.js。
要大致了解 React 是什么，您可以直接在 HTML 中编写 React 代码。
但是为了在生产中使用 React，您需要 npm 和Node.js安装。
直接在 HTML 中编写 React
开始学习 React 的最快方法是直接在 HTML 文件中编写 React。
首先包含三个脚本，前两个让我们在 JavaScript 中编写 React 代码，第三个 Babel 允许我们在旧浏览器中编写 JSX 语法和 ES6。
您将在以下内容中了解有关 JSX 的更多信息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>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</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。
运行此命令来创建一个名为的 React 应用程序my-react-app:
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.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 的更多信息。
在本教程的其余部分中，我们将使用 "Show React" 工具来解释 React 的各个方面，以及它们如何在浏览器中显示。
如果您想在计算机上执行相同的步骤，请首先删除src文件夹只包含一个文件：index.js。您还应该删除里面任何不必要的代码行index.js文件以使它们看起来像下面"Show React" 工具中的示例：
示例
单击"Run Example" 按钮查看结果。
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);