React开发实践（6）实战部分 Header 组件开发 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/ 将这个网站的内容拿过来 
复制代码

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

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;
  }
`;
复制代码

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;
复制代码

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

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

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

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
复制代码

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

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