这是一篇认真的学习心得
哈喽大家好，十分抱歉七日白谈仿佛有不止七十日没更新了吧，再次谢谢各位铁粉不曾取关。{/*笔芯~*/}
言归正传，这次的主题是一篇关于利用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~
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20190129G0C0G900?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
