@Author：Runsen

创建项目

使用 React 官方脚手架工具提供的工作流快速搭建和开发项目。发现React比Vue在某些方面还是强很多。

$ create-react-app  jianshu
$ cd jianshu
$ npm start 

  

 

  
1
  
2
  
3
 

styled-components

styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。

使用 styled-components 加速 React 开发

$ npm install styled-components

  

 

  
1
 

styled-components官方文档： https://styled-components.com/

注意：这里styled-components更新,没有injectGlobal 的Api。用 createGlobalStyle 替换掉，export导出，然后在App.js导入。

当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，导致浏览器的兼容性问题。

设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设

不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式

具体的Reset.css代码 ：https://meyerweb.com/eric/tools/css/reset/

Header区域布局

index.js

import React, {Component} from 'react'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  SearchWrapper,
  Addition,
  Button,
} from './style'


class Header extends Component{
  render() { return ( <HeaderWrapper> <Logo></Logo> <Nav> <NavItem className='left active'>首页</NavItem> <NavItem className='left'>下载App</NavItem> <NavItem className='right'>登录</NavItem> <NavItem className='right'> <i className="iconfont">&#xe636;</i> </NavItem> <SearchWrapper> <NavSearch></NavSearch> <i className="iconfont">&#xe60c;</i> </SearchWrapper> </Nav> <Addition> <Button className='writting'> <i className="iconfont">&#xe678;</i>&nbsp; 写文章</Button> <Button className='reg'>注册</Button> </Addition> </HeaderWrapper> )
  }
}

export default Header;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
 

style.js

import styled from 'styled-components';
// 由于webpack打包的原因，因此png图片需要导入，不能再background写成url
import logoPic from '../../statics/Logo.png';

export const HeaderWrapper = styled.div`
	position: relative;
	height: 56px;
	border-bottom: 1px solid #f0f0f0;
`;

export const Logo = styled.a.attrs({
	href: '/'
})`
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100px;
	height: 56px;
	background: url(${logoPic});
	background-size: contain;
`;

export const Nav = styled.div`
	width: 960px;
	height: 100%;
	padding-right: 70px;
	box-sizing: border-box;
	margin: 0 auto;
`;

export const NavItem = styled.div`
	line-height: 56px;
	padding: 0 15px;
	font-size: 17px;
	color: #333;
	&.left {
		float: left;
	}
	&.right {
		float: right;
		color: #969696;
	}
	&.active {
		color: #ea6f5a;
	}
`;

export const SearchWrapper = styled.div`
	position: relative;
	float: left;
	.slide-enter {
		transition: all .2s ease-out;
	}
	.slide-enter-active {
		width: 240px;
	}
	.slide-exit {
		transition: all .2s ease-out;
	}
	.slide-exit-active {
		width: 160px;
	}
	.iconfont {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 30px;
		line-height: 30px;
		border-radius: 15px;
		text-align: center;
		&.focused { background: #777; color: #fff;
		}
	}
`;

export const NavSearch = styled.input.attrs({
	placeholder: '搜索'
})`
	width: 160px;
	height: 38px;
	padding: 0 30px 0 20px;
	margin-top: 9px;
	margin-left: 20px;
	box-sizing: border-box;
	border: none;
	outline: none;
	border-radius: 19px;
	background: #eee;
	font-size: 14px;
	color: #666;
	&::placeholder {
		color: #999;
	}
	&.focused {
		width: 240px;
	}
`;

export const Addition = styled.div`
	position: absolute;
	right: 0;
	top: 0;
	height: 56px;
`;

export const Button = styled.div`
	float: right;
	margin-top: 9px;
	margin-right: 20px;
	padding: 0 20px;
	line-height: 38px;
	border-radius: 19px;
	border: 1px solid #ec6149;
	font-siz: 14px;
	&.reg {
		color: #ec6149;
	}
	&.writting {
		color: #fff;
		background: #ec6149;
	}
`

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
  
121
  
122
  
123
  
124
  
125
 

iconfont图标的导入

在阿里巴巴创建项目，下载至本地。

最终Header布局如下

文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。

原文链接：maoli.blog.csdn.net/article/details/109898723