Next.js+React进门记003【代码组件化】

代码组件化是React的特点之一，减少了代码工作量，降低了维护难度。

Ctrl+C拷贝index.js文件后，Ctrl+v粘贴，修改文件名和内容，建立一个about.js文件

查看about页面

查看index页面

组件化

由于多个页面都存在以下两部分内容，可以分别进行组件化

新建components文件夹
1.新建Footer.js组件，编辑组件内容

在index.js页面中使用Footer.js组件
①首先删除footer标签内容
②输入"<Footer"后回车，会自动引入Footer.js组件

查看index.js页面，footer部分只要显示正常，即组件化成功

2.新建Links.js组件，编辑组件内容

在index.js页面中使用Links.js组件
①首先删除各标签内容
②输入"<Links"后回车，会自动引入Links.js组件

查看index.js页面，links部分只要显示正常，即组件化成功

使用同样方法，在about.js页面中也使用Links.js和Footer.js组件

查看about.js页面，links部分以及footer部分只要显示正常，即组件化成功