1:准备工作在VSCode中安装es7插件 然后重启编译器生效
![[React日志]03-第一个class组件页面 [React日志]03-第一个class组件页面](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVek1pOWlNemczWVRZeVpEWTBNRFZpWXpRMVpqQTVOakEzWmpoak9Ea3hOemsxTkM1d2JtYz0=)
2:在src中新建一个js文件取名header.js 然后使用快捷方式rcc ps:rcc是class组件 rfc是函数组件
![[React日志]03-第一个class组件页面 [React日志]03-第一个class组件页面](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFd05pODJaREZqWlRjNVlqVXpPREkxT0RjNVlqSXdOelpqWkdWaU5qVmtNRFk0TWk1d2JtYz0=)
3:在index.js中使用header组件
![[React日志]03-第一个class组件页面 [React日志]03-第一个class组件页面](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFeU9TOHlObVl3TURJMVlXWTJPRE5sTWpBd1pEaG1aREU0WXpNelpERmxZbVpoTVM1d2JtYz0=)
4:改造函数APP组件变成class组件
![[React日志]03-第一个class组件页面 [React日志]03-第一个class组件页面](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnMU9DOHhZelE0Tm1GaE1UUXhNREV3T0Rkak5HUm1OMkl5TURBMlptUTBPR0UxWVM1d2JtYz0=)
5:完成以后记得保存 运行启动命令 npm run start 注意命令是否在项目目录中 就可以看到效果如下
![[React日志]03-第一个class组件页面 [React日志]03-第一个class组件页面](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFMEwyRTFNemhsWldObE5USXhZV1V5TkROaU1HVmlaR00zWWpOaVlqY3dOMkpsTG5CdVp3PT0=)
相关文章:
-
2022-12-23
-
2021-10-08
-
2022-12-23
-
2021-12-27
-
2022-12-23
-
2021-04-08
-
2021-06-03
-
2022-12-23
猜你喜欢
-
2021-04-21
-
2021-08-08
-
2022-12-23
-
2021-07-18
-
2021-07-31
-
2022-12-23
相关资源
-
下载
2021-06-05
-
下载
2021-06-06
-
下载
2021-06-05