React项目开发经验汇总
定义好全局配置信息
环境变量不要提取出来,配置信息提取出来
UI样式变量
定义好变量的作用不用多说
样式库建设
工具样式,复用性强的样式,这些class成为会是真个网站样式的底层,将是很重要的一部分
工具函数
这个也不用多说,超级重要的,日常定义一些好的工具函数,说不定哪天就可以产生一个上万star的工具库了
功能封装
包括上传文件,支付,登录,数据返回处理 等等一系列的操作,其实每次都是一个同样的流程
不同的网站根据复用性的业务不同
面对这种问题,复制粘贴代码肯定是不明智的,我们需要维护一系列的功能复用性的工具
静态文件和icon
管理静态文件总是比较麻烦的,最可怕的就是突然的要求复用某个网页里专属的文件,同时cdn建设也很重要,那么这些公共资源如何管理也是一件很重要的事情
尤其是icon的建设
---------------------------分界线-------------------------
以上是常见的复用功能的做法
以下是react项目开发需要注意的地方
UI库建设
UI库建设被放倒第一位的原因也是理所当然的
UI库建设可能在短期降低了开发效率,提高了维护成本,但长期来看,绝对肯定一定以及百分之百是值得的,建设UI库可以有让人意想不到的效果
更是为了保证换即使设计师也可以该组件库,整个网站风格就变了,还有包括间接性的接入第三方UI库,不要直接接入,否则没准哪一天就不用了
说不准哪天就可以产生一个上万star的UI库了
数据层
和后台交互是一件很重要的事情,网页渲染的数据来源一般出了配置信息以外,就是后端请求的数据了
那么怎么去管理这些数据呢
我在项目中的做法是通过mobx建立一个数据层,组件内是完全不可以请求数据的,只会简单的处理数据,然后映射数据到页面上,这样所有的数据操作便会变得清晰起来,很便于维护
多项目并行开发
多项目并行并不是启动多个项目,而是在一个大项目下,根据耦合情况拆分成多个小项目,小项目之间需要有耦合,包括环境变量,UI组件,工具函数,封装好的功能等。盲目的拆开项目去纯粹的解耦是一件很作死的事情
一个大的项目可能会需要并行很多个小项目,比如说我正在做的建站项目,就会并行代理商,自定义网站的后台,网站前台,编辑器,预览,并行多个项目的时候到底拆不拆总是一个很头大的事情
后端渲染和前端渲染
前端渲染的SEO是比较麻烦的事情,next服务端渲染可能是一个不错的选择,很好的解决了浏览内容类页面的加载问题和seo问题
但是编辑器和后台页面本身却不需要什么seo,所以需要前端渲染和后端渲染同时做。
前后端同构
如果后端是node的话,那么同构是一件很有很有意义的事情
总结
同时做好这么多事情看似很麻烦,只要从基本的开始遵循也很快就会完全适应,
其实也不为其他的,为的是不让自己太辛苦的维护项目
为的是换一个设计师的时候 他不会太累
为的是和后端愉快的沟通
为的是自己对自己的东西心里有数
React项目开发经验汇总的更多相关文章
- react构建前端项目方法汇总
react简介: 一.使用react 创建一个PC端的项目 (a):使用 yemon 创建一个 webpack 的 react 的项目 控制台安装并且产看 yemon 的版本 yo -v (b): 全 ...
- React项目模板-从项目搭建到部署
前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...
- React 项目引入 Dva
背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...
- H5项目常见问题汇总及解决方案
H5项目常见问题汇总及解决方案 H5 2015-12-06 10:15:33 发布 您的评价: 4.5 收藏 4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...
- GitHub上史上最全的Android开源项目分类汇总 (转)
GitHub上史上最全的Android开源项目分类汇总 标签: github android 开源 | 发表时间:2014-11-23 23:00 | 作者:u013149325 分享到: 出处:ht ...
- GitHub上史上最全的Android开源项目分类汇总
今天在看博客的时候,无意中发现了 @Trinea 在GitHub上的一个项目 Android开源项目分类汇总 ,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有参考价值,包括很炫 ...
- Android 开源项目分类汇总(转)
Android 开源项目分类汇总(转) ## 第一部分 个性化控件(View)主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Galler ...
- Android 开源项目分类汇总
Android 开源项目分类汇总 Android 开源项目第一篇——个性化控件(View)篇 包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView ...
- Android开源项目分类汇总【畜生级别】[转]
Android开源项目分类汇总 欢迎大家推荐好的Android开源项目,可直接Commit或在 收集&提交页 中告诉我,欢迎Star.Fork :) 微博:Trinea 主页:www.t ...
随机推荐
- 5-MySQL高级-事务-回滚(3)
回滚 为了演示效果,需要打开两个终端窗口,使用同一个数据库,操作同一张表 step1:连接 终端1 select * from goods_cates; step2:增加数据 终端2:开启事务,插入数 ...
- 17-MySQL-Ubuntu-数据表的查询-分页(六)
分页(limit) 注: (1)limit位于SQL语句的最后面; (2)limit 2; 2表示查询前两条数据; (3)limit 0,2; 0表示查询第1页的起始数据的下标,2表示每页有两条数据 ...
- Java基础知识之常见关键字以及概念总结
static 特点: 随着类的加载而加载 优先于对象存在 被所有对象所共享 可以直接被类名调用 使用注意: 静态方法只能访问静态成员 但是非静态成员可以直接访问静态成员 静态方法中不可用使用this, ...
- 基于第三方开源库的OPC服务器开发指南(2)——LightOPC的编译及部署
前文已经说过,OPC基于微软的DCOM技术,所以开发OPC服务器我们要做的事情就是开发一个基于DCOM的EXE文件.一个代理/存根文件,然后就是写一个OPC客户端测试一下我们的服务器了.对于第一项工作 ...
- JAVA算法之递归
Ⅰ.三角数字 首先我们来看一组数字:1,3,6,10,15,21.....,在这个数列中第n项是由n-1项加n得到的,这个序列中的数字称为三角数字因为他们可以形象化地表示成一个三角形排列.如下图 通过 ...
- [JZOJ2679] 跨时代
题目 题目大意 给你一堆边,你要将它们围成面积最大的矩形. 边不一定要用完,而且围成的矩形不能凸出一块. \(n\leq 16\) \(l_i \leq 15\) 思考历程 看到这题的第一眼,就会立马 ...
- ROS 自定义消息类型方法
流程 1.在package中新建文件夹名为msg 2.在msg文件夹中创建消息(此处以my_msg.msg)为例,注意的是要以msg为后缀名 内容举例如下: int32 data1 float64 d ...
- angular2 组件内容嵌入(ng-content)
一.简介 内容嵌入是组件的一个高级功能特性,使用组件的内容嵌入特性能很好地扩充组件的功能,方便代码的复用. 二.用法 如上,在模版中使用了<ng-content>标签,这个标签就是用来渲染 ...
- BZOJ 1296(SCOI 2009) 粉刷匠
1296: [SCOI2009]粉刷匠 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2544 Solved: 1466 [Submit][Statu ...
- ArrayList 和linkedList 插入比较
从学Java开始, 就一直大脑记着 arrayList 底层是数组 ,查询快, 插入慢, 有移动的动作.linkedList 底层链表, 插入快 查询慢,今天写了例子跑了跑, 果然. public ...