前言

emmmm，这个域名目前是在做博客，而主域名什么也没放。于是，就想做个简易的个人主页挂到上面。使用什么做呢？原生？Vue？React？这几天既然在学习React，就使用React写个吧。

正文

这个个人主页写的比较简单，没有涉及网络请求，也没有涉及状态管理、路由配置等。用React写，正好可以再熟悉熟悉语法。

我把这个页面分为了三个组件，一个是头像，一个是中间的名称啊、信息啊，最后一个是底部的链接。

想要组件中的样式不会影响其他组件的，可以使用一些方法，使样式只能在某个组件里生效。类似于Vue组件中的scoped。在这里，我用的这个方法没有用到插件，所有，可能会稍微有点麻烦。

拿第一个头像（Avatar）组件来说，我们先创建个css文件并写好样式，然后命名为avatar.module.css，如下图：

然后，我们回到Avatar.jsx里，这里，我们不能直接让className等于avatar啊啥的，我们要先引入这个css文件，然后通过.的方式来使用。

这样，我们就能发现，写在这个组件里的样式不会影响其他组件，我们打开F12，发现它是解析成原有的名后面又加了些字符，使其成为独特的。

后记

好了，本篇文章就分享到这里。