开始之前
通过之前两篇的的努力，我们已经学会搭建我们的项目，并且学会搭建我们的路由了，并且学到了react搭建路由时的一些知识，接下来我们可以开始学习如何编写我们的用户页面了。一般来说，我们的用户页面通常由一个侧边菜单，一个头部菜单，还有对应的页面内容组成，类似这样：
在我们开始学习使用一个新的框架或技术编写项目时，模仿一个自己喜欢的案例是一个非常好的过程哦，这是我模仿后搭建的页面布局
今天我们就来看看应该怎么编写侧边栏菜单，以及在编写侧边栏菜单中会遇到什么有趣的知识呢？
搭建我们的页面结构
让我们根据上图的页面信息，搭建我们的页面结构吧，从图片中我们把整个页面分为三个部分，最左侧的菜单，中间的二级菜单，以及右边的内容区域。分析好了页面结构，我们就开始搭建我们的页面布局。我们在src 文件夹下新建Component文件夹，这个文件夹用来存放我们的公共的组件与方法。因为侧边栏是我们在所有页面都会渲染的，所以我们将侧边栏组件作为一个公用的组件。
在Component 文件夹下新建我们的侧边栏组件GolbalSide.js文件，这个文件就是我们编写侧边栏组件的入口组件了。
这里需要注意在我们使用react编写组件的时候，我们的组件名需要使用大写字母开头。React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。
接下来引入我们需要用到组件，这里我们需要使用到来自antd的Meun组件，它可以帮助我们创建一个菜单。
import {Meun} form 'antd'
在Meun组件中为我们提供了丰富的方法与api，我们这里需要使用到几个基本的api:
- item:接收一个数组，并且将我们的数组渲染成为我们的侧边栏菜单内容。
- mode :菜单类型，现在支持垂直、水平、和内嵌模式三种类型，分别为vertical 、horizontal 、inline
- theme :菜单的主题颜色，支持dark 与light两种主题。
当然，这里可使用的api还不止这些，这里希望大家去阅读官方的文档学习。
接下来我们定义我们的侧边菜单，这次呢我打算做两个功能，第一个就是常规的todo-list列表，第二个是将每日的任务在日历中显示出来。最后就是一个设置菜单了。我们通过定义items数组来构建菜单。首先我们定义一个items数组：
const items = []
然后我们将菜单选项编为一个对象加入item数组中，这个对象就是我们菜单的内容，为了使Meun组件能够识别到我们定义的内容，对象内部也有想对应的api，我们编写一个对象进行说明。
{label: '任务' , // 菜单的名字 icon:'' , //菜单的图标 key:'', //菜单的唯一标识 children:[] ，//子菜单 }
当然可使用的api不止这些，想要了解更多可以到官方文档进行查看。
然后让我们来学习如何写React的组件，首先我们要定义我们的组件名，注意我们的组件名要大写。
const GlobalSider = () => {} 这样我们就定义创建好了一个组件的内容入口，为了使我们的外部的组件也能使用到我们创建的组件，我们需要将我们的定义的组件对外暴露。
export defluat GlobalSider 这样我们就将我们创建的组件对外暴露出去。接着我们在组件里面写入我们的内容，并将我们写的组件内容返回。
const GlobalSider = () => { return () } return（）内就是我们想要的展示的内容，可以是一个组件，也可以是一段Html。这样的编写格式就是react所使用的jsx 语法。jsx 是JavaScript语言的一种扩展，它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用。在使用jsx语法编写我们的组件时，也有一些我们需要注意的语法规范：
- 在jsx 语法中，元素的顶层只有一个父类，你必须将它们包裹到一个共享的父级中，比如
<div>...</div>或使用空的<>...</>包裹。 - 在jsx语法中元素的标签必须是封闭的。
- 在jsx 中，对元素添加样式时class 写作className，然后创建一个css文件编写样式。
- 在jsx , {} 大括号表示你回到了JavaScript，你可以在大括号内部引用变量，或者编写方法，或者写入表达式。
了解jsx的语法特点后，我们来编写我们的组件内容。
const GlobalSider = () => { return (<> <Meun items ={items} , mode='vertical', theme='dark'></>) }
这样，我们就编写好了我们的组件内容，剩下的我们要为组件添加事件。作为菜单，我们希望点击对应的菜单就会调转到对应的页面，显示对应的内容，那么在react中要如何添加我们的事件呢？在react中，可以通过在组件中声明 事件处理 函数来响应事件。例如我们现在需要一个点击事件。
const GlobalSider = () => { return (<> <Meun items ={items} , mode='vertical', theme='dark' Onclick={click}></>) }
在react中，我们声明监听事件时需要要On开头，例如上述的点击事件Onclick ，或者Onmousedown等，在大括号内我们声明事件的处理函数，注意的是我们在大括号内只需要书写方法的名称，并不需要调用事件处理函数（既不需要添加小括号），当用户点击按钮时 React 会调用你传递的事件处理函数。当然你可以添加小括号传值。
这里还可以有写为箭头函数
const GlobalSider = () => { return (<> <Meun items ={items} , mode='vertical', theme='dark' Onclick={() => {}></>) }
当然，这种直接书写事件处理函数只推荐出现在事件逻辑比较简单的情况，当你处理逻辑较为复杂时还是采用第一种写法。在antd中的Meun组件中，调用Onclick事件时会默认传入一些值，比如点击的对象内容等。这里可以在文档中找到。
现在，我们完成了我们的侧边栏菜单组件的书写，同时我们学习了使用react创建一个组件的基本功能。（好耶！！！！）
接下来我们要将我们的组件对外显示，并且搭建好我们的页面布局。再看一看图片上的布局，我们发现要实现无论侧边栏点击到哪个页面，侧边栏应该是一直存在的，要如何实现这种效果呢，这里需要用到一个新的知识点，路由嵌套。 我们要在第一层的路由中渲染第二层路由的组件和内容，比如这种效果;
那要如何实现我们嵌套路由呢？其实十分简单，来到我们编写路由的文件route/index.js ，在我们的根路由下添加一个children属性，就像这样。
在children 属性内部的对象就是我们的嵌套路由，而嵌套路由会在他上一级路由对应的组件中渲染，当然我们还要用到路由的渲染出口，在react中，使用<Outlet />组件作为嵌套路由的出口。在上级路由中把组件添加在我们希望嵌套路由渲染的位置，这样我们就完成了我们的路由嵌套。
来到我们的根路由对应的组件中，这里我们搭建我们的页面结构，在这里我们需要引入antd 中的Layout组件
import {Layout } form 'antd'
然后我们使用Layout 内部的组件Sider 侧边栏组件与Content内容部分组件
const {Sider , Content} = Layout
接下来我们搭建我们的页面，就像这样：
让我们看看这段代码，在Sider 组件中，我们使用到了collapsed 属性，这是用来控制侧边栏展开或收回的属性，接受一个Blur 类型的值，collapsible 表示我们可以使用侧边栏展开或收回的功能，OnCollapse则是我们声明的一个事件，用来监听我们点击控制侧边栏控制按钮的事件。
在这个事件中，我们接收事件返回的value 值，并使用setCollapsed() 将值赋值给collapsed ，这里，我们使用到了react的Hook ,那什么是Hook呢？
先让我们看看这段代码还有什么没有说明的，在return语句的上方，我们使用了State
const [collapsed ,setCollapsed] = useState(false)
在我们的组件中，我们通常希望组件'记住'一些数据并显示出来，比如按钮点击的次数，这时就需要用到state ,首先让我们引入state
import {state} from 'react
然后声明一个state变量，例如我们之前的声明
const [collapsed ,setCollapsed] = useState(false)
在这个语句中，我们拿到了两个东西，一个是collapsed 变量，还有更新他的方法setCollapsed ,在开始时，collapsed 的值为false ,因为我们在useState(false) 将false作为初始值传给了它，当我们想改变collapsed 的值时，使用setCollapsed，例如我们事件中的语句
(value) => setCollapsed(value)这里我们将获得的value值传给了collapsed变量
而以use 开头的useState 就是react内置的一个Hook ，。在react中，这种以use 开头的函数就被叫做Hook 。你可以在 React API 参考 中找到其他内置的 Hook 。你也可以通过组合现有的 Hook 来编写属于你自己的 Hook ，Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的 顶层 （ruturn语句上方）调用 Hook。
最后我们还引用到了Suspense 组件，这个组件是用来作为子组件加载时的备用方案。还记得我们使用的路由懒加载吗？由于路由组件是在路由跳转之后才进行调用渲染，导致我们第一次进入路由（组件并没有调用时），react无法识别路由所对应的组件，这时react页面就会提示错误，而Suspense就是用来显示提示内容并等待组件的加载。用法和其他的react组件一样，首先我们引用
import {Suspense} from 'react'
然后使用组件
<Suspense fallback={}><App / ></Suspense>将我们余姚展示的组件包裹起来，fallback中便是页面加载时显示的内容。
当当，这样我们的页面布局就搭建完成了,让我们回顾一下我们学习到了什么。
首先，我们学会使用react编写组件的方法和注意事项，第二我们学会react路由的嵌套功能与展示，最后我们学会了使用Hook以及使用react提供的组件，接下来我们就可以编写我们的页面了，好耶！