首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

这是一篇认真的学习心得

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

言归正传,这次的主题是一篇关于利用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元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券