定期更新，建议关注、收藏！
安装
要使用react的框架，都应当安装node.js
conda install nodejs
选择Next.js 并创建项目
npx create-next-app@latest
可以看到目录结构生成如下
作为网页中的一个子路由
想让其嵌入已经写好的项目中，该如何操作呢？
- 在框架配置中将 /some-app 指定为基本路径（这里有 Next.js 与 Gatsby 的配置样例）。
- 配置服务器或代理，以便所有位于 /some-app/ 下的请求都由 React 应用处理。
现有页面一部分中使用
- 配置 JavaScript 环境，以便使用 JSX 语法、import 和 export 语法将代码拆分为模块，以及从 npm 包注册表中使用包（例如 React）。
- 在需要的位置渲染 React 组件。
如果想要检查你的配置是否有效，可以在项目文件夹中运行以下命令：
npm install react react-dom
然后在你的 JavaScript 主文件（它可能被称为 index.js 或 main.js）的顶部添加以下代码：
import { createRoot } from 'react-dom/client';// 清除现有的 HTML 内容而替换
document.body.innerHTML = '<div id="app"></div>';// 渲染你的 React 组件
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);你可能想要在 HTML 中特定的位置渲染 React 组件。打开 HTML 页面（或用于生成它的服务端模板），并向任意一个标签添加一个唯一的 id 属性
这样可以使用 document.getElementById 查找到该 HTML 元素，并将其传递给 createRoot，以便可以在其中渲染自己的 React 组件
import { createRoot } from 'react-dom/client';function NavigationBar() {// TODO: 实际实现一个导航栏return <h1>Hello from React!</h1>;
}const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);createRoot(domNode): 该方法会在 domNode 指定的 DOM 元素上创建一个 React 根节点实例，并返回一个 root 对象。
root.render(< App />): 使用 root.render() 方法来渲染 < App /> 组件。这里 App 是 React 组件，渲染后它会成为 domNode 的内容。
当在现有项目中采用 React 时，通常会从小型交互式组件（例如按钮）开始，然后逐渐“向上移动”，直到最终整个页面都由 React 构建。
)
