React开发实践（6）实战部分 Header 组件开发 1

• 此处 以 简书为例子 实战一下 敲一敲

1、项目目录搭建 开始

1、新建一个 空的 react 项目 并清空 内容 npx create-react-app my-app-jianshu-react

2、注意 index.css 在 index.js 引入后其他部分也可使用，但css 样式可能产生冲突

3、解决上面那个问题 安装 css yarn add styled-components 

4、使用这个 东西 写全局样式 和组件自身样式 

5、为了统一在浏览器的表现形式，需要使用 reset.css https://meyerweb.com/eric/tools/css/reset/ 将这个网站的内容拿过来 

• 清理代码 只显示 hello

* 安装 yarn add styled-components 管理 css

• 将原本的 index.css 更改为 style.js 并且在 index.js 中引入

• 如果使用 injectGlobal 报错 看这一篇 blog.csdn.net/qq_36242361…

• 然后 尝试 给body 添加一个 pink 生效的 nice ！

2、Header 组件布局

    1、新建文件夹 common
    
    2、文件夹内 加一个 header文件夹 创建 index.js 和 style.js
    
    3、在 index.js 引入使用 
    
    4、
    
    5、

• 等会儿 敲完

*style.js

• index.js 此处 使用

• 页面效果

• 点击 这个 logo 图片 刷新本页面

将其他部分 补充一下

• 值得注意的是 有时 为了扩充整个 width 需要设置 容器为 box-sizing: border-box

* style.js

import logoPic from "../../statics/logo.png";

export const HeaderWrapper = styled.div`
  position: relative;
  height: 56px;
  padding-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%;
  background: pink;
  margin: 0 auto;
  padding-right: 70px;
  box-sizing: border-box;
`;

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

export const NavSearch = styled.input.attrs({ placeholder: "搜索" })`
  width: 160px;
  height: 38px;
  padding: 0 20px;
  background: #eee;
  border-radius: 19px;
  border: none;
  margin-top: 9px;
  font-size: 14px;
`;

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

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

• header index.js

import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
} from "./style";
class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <>
        <HeaderWrapper>
          <Logo />
          <Nav>
            <NavItem className="left active">首页</NavItem>
            <NavItem className="left">下载APP</NavItem>
            <NavSearch></NavSearch>
            <NavItem className="right">登陆</NavItem>
            <NavItem className="right">Aa</NavItem>
          </Nav>
          <Addition>
            <Button className="write">写文章</Button>
            <Button className="reg">注册</Button>
          </Addition>
        </HeaderWrapper>
      </>
    );
  }
}

export default Header;

*实现效果

3、使用 iconfont 嵌入头部图标

1、打开 iconfont.cn 登陆后 新建项目 
2、选择需要的东西 然后 下载到本地 （此处使用下载本地后改成在线链接 有点问题）
3、然后 在 src 下新建一个 iconfont 文件夹 将这些东西放进去 
4、然后 将.css 更改后缀为 .js 使用 styled 更改为全局样式
5、在index 中 引入样式 则可生效 
6、

• 引入 全局 iconfont

• 页面上这种 形式使用

• 注意这种两个东西的内外层定位

• 实现效果 非常 nice ！

4、搜索框动画效果实现

1、首先 调整一下 输入框的内容和 搜索框的 间距
2、然后 react 当中 不要直接操作 dom 选择 数据驱动 视图变化
3、添加一个 state 为 isFocused 默认值为 false 
4、给 input 绑定 onChange 事件和 onBlur 事件 

• 此处有个小技巧先设置 isFocused 为 true 调整一下 效果

• 然后添加 事件驱动 改变 state

• 添加动画效果

   1、使用 之前那个 动画库   yarn add react-transition-group
   2、引入后包裹需要动画的内容 input 上
   3、写属性
   4、写 样式 
   5、查看效果
  

• 当前页面 可以 看到 动画的过渡效果 非常的nice !

5、使用 react-redux 进行 页面数据管理

• 非常精彩的 redux 又来啦

    1、yarn add redux           yarn add react-redux  (安装完 重启服务)
    2、目的是将组件内的 isFocused 放到 redux 中管理 
    3、首先 App 中需要 用 Provider 包裹 Header 组件 并 传入 store={store}
    这样 Provider 包裹的部分 就可拿到 store 的数据
    4、需要在组件内 使用 connect 方法 连接 使用数据 
    5、 注意 connect(mapStateToProps,mapDispatchToProps)(Header) 两个参数
    6、然后就是 经典的想更改 store 数据的流程  创建 action --> store.dispatch(action) --> store ---> (prevState, action) --> reducer --> newState --> store --> components
  

* ok 我们开始敲一遍

* APP.js

• store/index.js

• store/reducer.js

• 组件 Header.js

*redux 流程

• 组件上面 原本的 this.state 都更改为 this.props

* 更新后的 reducer.js

• 页面效果 非常的nice ！

• 此时发现 由于页面 没有 管理 state 状态 直接更改为 function组件

• 非常nice !

6、使用 combinReducers 完成对数据的拆分管理

    1、添加 dev tools 
    2、header 文件夹下 新建 store/reducer.js  index.js
    3、将之前的 reducer 内容 移动到 header 下面 reducer
    4、注意 此时层级结构 发生了改变  组件内 取 state 时 需要更改
    5、

• store index.js

• store/reducer.js index.js

*src/ store / reducer.js

• 结构变更 页面 需要更改

• 非常 nice ！

7、actionCreators 和 constants 的拆分

1、header 下 新建 actionCreators  constants
2、然后 将这两个引入 到 header 下的 store/index.js
3、这样在其他地方 引入 就变得更加的简单了

• 重点在于 index.js 这样写 使得 全部都简化了

• actionCreators.js

* 常量管理 constants

• 页面使用

• 尝试效果后 非常 nice ！

撒花 🎉🎉🎉

更多项目请访问 github github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…