简书项目(一,头部组件,阿里图标,过渡动画)

创建初始项目

同时为了项目规范,pc端禁止使用页面缓存

  <!-- 禁止页面缓存 -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
   <!-- 禁止页面缓存 -->

styled-components的使用

发现在index.css写一个类名,在子文件App.js里引用这个类名也会生效,这样样式会有全局污染,所以我们采用styled-components来规范样式
1.安装styled-components

yarn add styled-components

2.使用
css文件变为js文件


效果:

引入PC各个浏览器的统一基础样式

网址:http://meyerweb.com/eric/tools/css/reset/

将里面的css放入一个reset.css文件中,在主页中引入即可

头部组件开发

1.简书logo的制作:

小技巧:
上面使用了动态渲染路径;
background-size的contain特定值会保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域;
上面的"/"路径也可以去掉,写成下面这样

2.标题中间部分的制作

小技巧:
使用className属性定义类名,在js样式中使用$.属性名来快速取值;
里面placeholder颜色的修改:

3.右边注册写文章的制作

最终头部组件效果:

过程使用了styled-components插件来完成样式布局,建议在react项目中使用.

搜索框的过渡动画

方法:不要用获取焦点的dom操作,要用数据驱动思想来实现,设置一个状态,在onFocus(获焦)和onBlur(失焦)事件里改变状态的值即可实现不同的效果.


同时增加动画:react-transiton-group
github官网https://reactcommunity.org/react-transition-group/css-transition
安装

yarn add react-transition-group

使用:


最终效果: