【前端】React_Next.js

定期更新，建议关注、收藏！

安装

要使用react的框架，都应当安装node.js

conda install nodejs

选择Next.js 并创建项目

npx create-next-app@latest

可以看到目录结构生成如下

作为网页中的一个子路由

想让其嵌入已经写好的项目中，该如何操作呢？

1. 在框架配置中将 /some-app 指定为基本路径（这里有 Next.js 与 Gatsby 的配置样例）。
2. 配置服务器或代理，以便所有位于 /some-app/ 下的请求都由 React 应用处理。

现有页面一部分中使用

1. 配置 JavaScript 环境，以便使用 JSX 语法、import 和 export 语法将代码拆分为模块，以及从 npm 包注册表中使用包（例如 React）。
2. 在需要的位置渲染 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 构建。