我们项目目前使用的react脚手架是create-react-app,官方脚手架,基本配置依赖已经完成,只需要下载安装我们接下来项目所需要的别的依赖包就可以了,create构建项目过程:
安装
- 安装nodejs npm 基础环境
- 运用npm 安装create-react-app
- 利用create-react-app构建项目
启动项目
npm install -g create-react-app
- create-react-app my-app
- cd my-app
- my-app start
我本地现在用的是webstorm来启动工程,直接在webstrom的终端输入
npm start 就可以启动项目,启动成功之后浏览器会自动打开,如果端口占用,会提示切换到端口+1的端口,如,3001;每一次修改工程中的代码,都会自动刷新页面。
项目启动后,进入工程,查看src文件夹中的index.js,index.js为工程的入口文件,组件命名全部以.js为后缀。所用到的依赖包,都在package.json中有版本信息,新增依赖包,通过npm install –save xxx 来添加
代码书写方法
|
|
在编写组件时,必须引入react依赖。其余的是我们需要什么才引入什么,如,Head,Footer这都是我们在页面上需要展示的组件,通过ES6的语法糖import引入,来按需加载。
一个组件的js文件中,必须有的是
这是基本结构。也可以是这样的形式
我们一般编写代码是在开发环境,代码部署到服务器时都是运用的自动构建工具,将代码自动打包,转化之后的代码,我们叫产品环境。
用npm run build 命令打包
需要先修改package.json文件,添加上这个,来解决路径问题,之后再执行run build 命令
打包之后的文件,在工程中的build文件夹中,进入build文件夹,双击index.html就可以看到我们之前编辑的页面。
用npm run eject 实现弹射,自定义我们自己的需求
run eject 命令是一个不可逆的操作,但是eject只是将webpack的一些配置文件弹射出来,让我们来改变配置文件,实现我们自己需要的功能配置,eject之后,工程中就会多出来两个文件就夹,一个是scripts,还有一个是config文件夹,我们在这次的项目中只是修改了三个地方。
1.paths.js 文件
|
|
这个地方修改的是将pathname:’/‘,修改为’./‘;
|
|
这个地方修改的是将原来的resolveApp(‘build’)替换成了dashboard,目的是执行完build命令之后将build文件夹的名字换为dashboard;
2.webpack.config.dev.js 文件
修改这个文件的目的是让其能够将antd框架中的组件实现按需加载,避免全部加载过大,影响渲染速度,修改之后,需要重启才能看到生效,未修改之前项目页面的debug会有一个错误提示信息。
|
|
做的修改是在options中直接加上
|
|
3.webpack.config.prod.js 文件
这个文件的修改跟dev文件的修改是一样的,也是在bable-loader直接添加上
|
|
以上基本项目安装及配置
基础语法
初始化及周期函数
|
|
我们一般是通过this.state来进行初始化赋值
样式
可以通过引入样式文件
1 import './index.css';可以在组件内写样式,不过这里一切皆对象,在样式表文件中的border-right写法要转换成驼峰是写法borderRight,多个样式以逗号隔开, 在react中class要写成className
1234 <div className="text"><div style={{width:"50%"}}>***</div><div style={{borderRight:'0px'}}>***</div><div style={{float:'left',width:'16.667%',padding:'0 15px 0 0'}}>可以通过在上面定义样式,引入到行内
123456 let backAndTextColor = {backgroundColor:'red',color:'white',fontSize:40};<div style={backAndTextColor}>***</div>
图片引入
|
|
背景图片
图标引入
我们项目中送到的图标有两种,一种是直接在antd框架中的图标,一种是我们自定义的图标,由iconfont.com生成的字体图标
1.antd框架中的图标引用方法
type中写的就是我们需要的图标类型
2.我们自定义的图标引用方法
只需在 i 标签中添加上两个类,iconfont(图标基本样式) 和 icon-lianjie (图标类型)
修改值
我们不能直接修改State的值,要通过修改setState的值来实现改变值
如:
我们经常在代码中使用三元运算来进行简单的状态切换
|
|
传值:
|
|
{cardmenu}这里的cardmenu 是一个数组
cardmenu是个属性(就跟我们在原来html中设置 data-id差不多),在CardsLayout中调用改数组的值通过props来调用
|
|
就是这样的用法,props.cardsmenu来调用之前我们赋予他的数组
函数
我们在项目中写函数方法的方式有
1. 箭头函数
|
|
2.普通函数
3.写在render外面的函数
function loginState(){}
遍历取值
我们项目中主要使用的遍历方法是通过map来遍历
要注意的是,每个遍历出来的对象都要有一个你能够唯一识别的key,从而实现哪个值变化了根据key来加载改变的值,避免重复渲染,提高渲染速度。
fetch数据
我们之前都是用ajax来获取服务端的数据,进行数据交互,现在我们用的是fecth来获取数据
首先要做的就是在install fetch依赖包,我们项目上使用的是 fetch和whatwg-fetch
项目框架
我们本次的项目框架是antd,首先要做的就是现在安装antd依赖包
|
|
安装好之后就可以按需加载antd了(前提是完成上面webpack的配置)
antd的用法
参考:https://ant.design/docs/react/introduce-cn
路由 react-router
我们在项目中现在使用的react-touter版本为v4,最新的,
在最新版本中我们是这样来设置我们的路由的
我们运用的是hashRouter,这个是带有锚点的路由 http://localhost:3000/#/ ,
在我们本地环境中就可以直接通过路由跳转,如果我们使用browserRouter的话就需要配置服务器环境才能正常访问页面,所以我们暂时先采用的是hashRouter,另外我们所用到的路由方法一般都是从react-router-dom里面引用的。
exact属性是严格匹配才会跳转,path就是我们的跳转路径,也就是链接后面的路径,component是跳转时要加载的组件,可以同时使用多个route
我们在项目中的跳转都是通过Link组件来代替我们之前的a标签,to来制定跳转路径,这个只是需要我们用到路由跳转的是时候才会用,一般的跳转链接还是可以用 a 标签的。
主要依赖库 react-grid-layout
|
|
在这个里面控制布局的区域大小的是breakpoints属性,里面的数值设置就是我们的区域大小
我们要做的就是将每一个子组件的位置设定好
|
|
x,y,w,h是必须的,如果没有设置则都会在0,0的位置。
在组件中,通过下面的方式来根据屏幕节点的改变,实现自适应布局
删除
新增
在AddList组件中的方法
遗留问题
目前我只是实现了一个组件的两种样式的显示,可以增加和删除,现在删除之后可以在新增的列表中添加,但不还未实现去重。新增可以新增,但是在重新切换新增按钮之后,之前已经拖拽过的项状态没有保存下来.