React 简书项目
1：create-react-app “jianshu”
2:项目准备：
备注：是全局的样式，放入reset.css。
3：引入第三方模块 styled-components ，yarn add styled-components -S，该模块是把css变成js文件，把index.css换成style.js
4：style.js引入reset.css
import { createGlobalStyle } from 'styled-components'
export const Globalstyle = createGlobalStyle`
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
`
在App.js中使用
import React, { Component,Fragment } from 'react';
import {Globalstyle} from './style'
class App extends Component {
render() {
return (
<Fragment>
<Globalstyle/>
1234
</Fragment>
);
}
}
export default App;
目录更新
在src下面新建一个静态文件static，里面存放logo.png。引入的时候需要当成资源引入。
//import logopic from '../../static/logo.png'
common/header/style.js文件
import styled from 'styled-components'
import logopic from '../../static/logo.png'
export const HeaderWrapper = styled.div`
position:relative
height:56px;
border-bottom:1px solid #f0f0f0
`
export const Logo = styled.a.attrs({href:"/"})`
height:56px;
position:absolute;
top:0;
left:0;
display:block;
width:100px;
background:url(${logopic});
background-size:contain
`
export const Nav = styled.div`
width:960px;
margin:0 auto;
height:100%;
background:red
`
common/header/index.js文件
import React ,{Component} from 'react'
import {
HeaderWrapper,
Logo,
Nav
} from './style'
class Header extends Component{
render(){
return(
<div>
<HeaderWrapper>
<Logo></Logo>
<Nav/>
</HeaderWrapper>
</div>
)
}
}
export default Header
给组件添加样式：
<NavItem className="right ">Aa</NavItem> //&.right{float:left}
给组件添加属性：
styled.a.attrs({href:"/"})`
怎么使用iconfont.css?在static文件夹中创建iconfont文件。放入所需的6个文件。
1：把iconfont.css改为incofont.js,删除里面没必要的内容，在url路径中添加“./”使路径更可靠。
2：在全局App.js中
import {Globalstylefont} from './static/iconfont/iconfont'
3：使用方法
<Fragment>
<Globalstyle/>
<Globalstylefont/>
<Header/>
</Fragment>
动画实现：
1：安装第三方模块：yarn add react-transition-group
2：<SearchWrapper>
<CSSTransition
timeout={200}
in={this.state.focused}
classNames="slide"
>
<NavSearch
className={this.state.focused?"focused":''}
onFocus={this.handleInputFocused}
onBlur={this.handleInputBlur}
></NavSearch>
</CSSTransition>
<i className={this.state.focused?"focused iconfont":'iconfont'}></i>
</SearchWrapper>
CSS
.slide-enter{
width:160px;
transition:all .2s ease-out
}
.slide-enter-active{
width:240px
}
.slide-exit{
transition:all .2s ease-out
}
.slide-exit-active{
width:160px
}