这是一篇认真的学习心得

哈喽大家好，十分抱歉七日白谈仿佛有不止七十日没更新了吧，再次谢谢各位铁粉不曾取关。{/*笔芯~*/}

言归正传，这次的主题是一篇关于利用React建站的学习心得。本人非软件专业，仅凭个人兴趣企图入行，望大佬轻喷。

首先介绍一下React，React是一个用来创建组合式Web应用程序的开源库，是比较流行的三大前端框架之一：React、Vue和Angular。比较知名的知乎、斗鱼均使用了React。

以下是我梳理的建站过程：

一、页面布局

区别于通过在不同部分使用不同语言实现Web开发关注点的分离：HTML、CSS、JavaScript，React通过组件实现关注点的分离。因此，首先第一步就是在白纸上画出初步设想的页面布局，划分组件：

好吧，丑是丑了点，但好歹算是布局清洗易懂hhh，图中的框便是一个个组件。接着确定界面上的层级关系：

该项目采用从上至下的途径创建组件，并为每个组件创建

二、利用脚手架工具生成项目结构目录，后在此基础上进行开发。

三、创建组件

组件文件位于src文件夹中。首先是App组件，原则上该组件只包含数据并渲染出Header组件与Article组件，但本次任务可以说是极其简略了，目测仅有一些不变的文本，因而选择将文本写至各自的下层组件中。{/*这也是我有疑问的地方*/}

App组件代码如下：

importReact, {Component,Fragment}from'react';

importHeaderfrom'./header';

importArticlefrom'./article';

import'./App.css'

classAppextendsComponent{

render() {

return(

);

}

}

exportdefaultApp;

用接下来类似的方法创建Header、Article、Aboutme和Welcome组件。

创建Avatar组件时，我在其中放了一张头像：

alt="It's myown avatar."

className='avatar'

创建Sociallink组件时，分别添加了四张具有超链接的svg图片指向我的一些社交主页。{/*欢迎互粉哈哈哈哈*/}同理创建Title与Body组件。

以上均未利用React框架响应式渲染的优点。而我打算在Welcome组件中添加一点动态交互，实现鼠标悬停在”Contactme”上时显示微信二维码。

代码如下：

importReact, {Component,Fragment}from'react';

importqrcodefrom'./hre/qrcode.jpg';

classWelcomeextendsComponent{

constructor(){

super();

this.state= {

showQRcode:false

};

}

render(){

letwelcomeStyle1= {

padding:40,

width:1000,

position:'relative',

top:25,

}

letQRStyle= {

position:'absolute',

width:200,

}

letQRCode;

QRCode=

alt='My personalWechat'

className='wechatQRCode'

style={QRStyle}

}

return(

Welcome to key's blog.

className='contactTag'

onMouseEnter={

}

onMouseLeave={

Contact me...

{QRCode}

);

}

}

exportdefaultWelcome;

首先添加一个构造函数，并在组件的state中定义一个showQRcode的键（key）。当showQRcode为false时，不显示（二维码），只有当前状态showQRcode为true时才赋予以二维码并显示在网页中。最后一步，添加onMouseEnter与onMouseLeave事件处理程序在修改内部state。使用Javascript的！（非）操作符来切换showQRcode布尔属性的值。从而实现鼠标在”Contact me”上悬停时显示二维码，离开时消失的效果。

四、CSS样式/内联样式

网页组件齐全之后便要进行页面的样式渲染了。否则页面就是内容的顺（wu）序（nao）排列。

既然React已经通过组件实现了关注点的分离，在设置样式时便可以较多的使用内联样式。相对于传统CSS，它可以提供许多好处。

本人学艺不精，只能一切从简，嘻嘻。对于移动端打开的朋友。。。emmmmmmm，目前还十分不友好，我下次再加个媒体检查并进一步优化、丰富网页功能。{/*毕竟不能一口吃成个大胖子hhh*/}

五、打包，上传至服务器

具体步骤参照网上教程。

作为建站后的第一篇文章，权当是复习了，有些方面也写的不太细致，特别是文章链接还没写，待网页进一步丰富、完善后我也将将源代码上传至Github。有兴趣的朋友欢迎交流，也欢迎大神指正。

最后，提前祝大家猪年大吉，Happy Chinese new year~