- 创建项目 create-react-app jianshu
- 使用Styled-Components，减少样式的耦合
src/style.js
import {createGlobalStyle} from 'styled-components';
export const GlobalStyled = createGlobalStyle`
body{
margin:0;
padding:0;
background:red;
}`;
src/App.js
import React from 'react';
import {GlobalStyled} from './style.js';
function App() {
return(
<div className='App'>
<GlobalStyled />
</div>
)
}
export default App;
统一浏览器的显示
import {createGlobalStyle} from 'styled-components';
export const GlobalStyled = 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;
}`;
- 完成Header组件1
background详解
header/index.js
import React,{Component} from 'react';
import {HeaderWrapper,Logo,Nav} from './style';
class Header extends Component{
render(){
return(
<HeaderWrapper>
<Logo href="/"/>
<Nav>
</Nav>
</HeaderWrapper>
)
}
}
export default Header;
header/style.js
import styled from 'styled-components';
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`
display:block;
height:56px;width:100px;
position:absolute;
top:0;left:0;
background:#fff center center no-repeat url(${logoPic});
background-size:contain;
`;
export const Nav=styled.div`
width:960px;
height:100%;
margin:0 auto;
background:grey
`;
显示效果
-
完成Header组件2
页面结构
效果
-
嵌入头部图标
建项目并下载
这样修改
app.js中引用
页面中显示图标
-
搜索框添加动画效果
注意：要使用到react-transition-group插件
参考文档
CSS3动画方法
-
使用 React-Redux 进行应用数据的管理
安装 redux
npm install --save redux
npm install --save react-redux
store.reducer.js
const defaultState={};
export default (state=defaultState,action)=>{
return state;
}
store/index.js
import {createStore} from 'redux';
import reducer from './reudcer';
const store =createStore(reducer);
export default store;
image.png
先把store提供给Header组件
image.png
组件和store建立连接
image.png
image.png
image.png
-
使用 combineReducers 完成对数据的拆分管理
合并几个小的reducers
image.png
image.png
注意修改
image.png
import {combineReducers} from 'redux';
import headerReducer from '../common/header/store/reducer';
export default combineReducers({
header:headerReducer
});
image.png
-
actionCreators 与 constants 的拆分
actionCreators是为了统一action。
image.png
import * as actionCreators from './store/actionCreators';
.......
const mapDispatchToProps=(dispatch)=>{
return{
handleInputFocus(){
console.log("111");
dispatch(actionCreators.searchFocus());
}
}
};
添加constants.js将cation.type的名字常量化
image.png
image.png
image.png
同时导出方便管理
-
使用 Immutable.js 来管理store中的数据
image.png
让state不可改变
image.png
image.png
-
使用 redux-immutable 统一数据格式
是为了让最外部的state变成Immutable形式
image.png
image.png
有时间细研究把
-
热门搜索样式布局
最难的部分都在前面了，后面是主要内容的部分
image.png
image.png
可以这样切换
-
Ajax获取推荐数据
使用redux-thunk获取数据
npm install --save redux-thunk
在这里使用
image.png
这样使用
image.png
image.png
用axios请求异步数据
image.png
react会先找工程文件，如果没有就会去找public文件夹
image.png
网友评论