react项目

react

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, span, 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

}

以上是 react项目 的全部内容, 来源链接: utcz.com/z/381826.html

回到顶部