react 包目录及用途

 

 

利用脚手架工具创建一个react环境代码如下:

打开命令行 create-react-app my-app cd my-app npm start

创建成功后包含目录结构如下:

使用图片的第一种方式${图片的路径}如下:后边还有第二种方式

yarn add styled-components import styled from "styled-components"; import logoPic from "../../statics/logo.png" 生成带样式并且带属性的a标签 图片的引用方式:先导入路径,然后用如下方式引用路径 export const Logo = styled.a.attrs({ href:"/", })` position:absolute; top:0; left:0; height:56px; display:block; width:100px; background:url(${logoPic}); background-size:contain; ` yarn add react-transition-group import {CSSTransition} from "react-transition-group" 给NavSearch标签添加上动画 <CSSTransition in的作用就是啥事后将动画的样式添加到NavSearch这个组件上 如果为true就添加如果为false就去除NavSearch的样式 in={this.state.focused} timeout为动画执行的时间即200毫秒后停止执行动画 timeout={200} 这个样式名字(slide)就是NavSearch的样式中的&.slide-enter\&.slide-enter-active等的样式的前边的那个slide就是通过这个前缀找到这几个样式的名字然后执行里边的动画 classNames={"slide"} > <NavSearch className={this.state.focused ? "focused" : ""} onFocus={this.handleInputFocus} onBlur={this.handleInputBlur} ></NavSearch> </CSSTransition> 动画的效果是 export const NavSearch = styled.input.attrs({ placeholder:"搜索", })` width:160px; height:38px; border:none; outline:none; padding:0 30px 0 20px; margin-left:20px; box-sizing:border-box; margin-top:9px; border-radius:19px; background:#eee; font-size:14px; color:#666; &.focused { width:240px; } &::placeholder{ color:#999; } &.slide-enter{ transition:all .2s ease-out; } &.slide-enter-active{ width:240px; } &.slide-exit{ transition:all .2s ease-out; } &.slide-exit-active{ width:160px; } `

使用图片的第二种方式即通过属性的方式传递进来

<img className="banner-img" src="//upload.jianshu.io/admin_banners/web_images/4592/22f5cfa984d47eaf3def6a48510cc87c157bf293.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/> 则可以通过如下方式使用图片其实本质上还是${路径} export const RecommendItem = styled.div` width:280px; height:50px; background:url(${(props)=>props.imgUrl}); background-size:contain; `;

局部加载的实现需要借助于react-loadable

yarn add react-loadable

 在自己需要用到的组件中写入一个loadable.js文件

内容如下:

import React from "react"; import Loadable from "react-loadable"; const LoadableComponent = Loadable({ loader:()=>import("./"), loading(){ // 网速慢的时候显示的内容,可以改成自己的组件 return <div>正在加载</div> } }); export default ()=><LoadableComponent/>

官网可能和上边的有点不一样但是不影响使用

如果路由传参数需要修改如下内容:

局部加载完成

 

&的用法

yarn add redux

yarn add react-redux

创建store

创建reducer

导入provider给其包含的组件及其子孙组件提供store中的数据

链接模型，交互数据

connect

 

yarn add immutable  fromjs fromJS

如果是用immutable的话可以用PureComponent如果不是最好不要用会有坑,用PureComponent的好处是提升性能,

yarn add redux-immutable

reducer的多级分发嵌套问题

一个项目目录下有一个大的store这个store下有一个reducer这个reducer作用为总路的reducer,其他的reducer作为这个的子reducer,

 

yarn add redux-thunk   作用应该是二级嵌套dispatch方法

yarn add axios

import axios from "axios"

对应的public下创建一个api的目录然后api下还应该有一个headerList.json的文件如下:

特别需要注意的是.json文件必须是json格式特别注意不能有逗号结尾,否则会报错

 

yarn add react-router-dom            路由

react-router-dom 此包下边还有  Redirect  Link 等常用组件用法如下: