博客来源 小寒的博客
 

定义好全局配置信息

环境变量不要提取出来,配置信息提取出来

UI样式变量

定义好变量的作用不用多说

样式库建设

工具样式,复用性强的样式,这些class成为会是真个网站样式的底层,将是很重要的一部分

工具函数

这个也不用多说,超级重要的,日常定义一些好的工具函数,说不定哪天就可以产生一个上万star的工具库了

功能封装

包括上传文件,支付,登录,数据返回处理 等等一系列的操作,其实每次都是一个同样的流程

不同的网站根据复用性的业务不同

面对这种问题,复制粘贴代码肯定是不明智的,我们需要维护一系列的功能复用性的工具

静态文件和icon

管理静态文件总是比较麻烦的,最可怕的就是突然的要求复用某个网页里专属的文件,同时cdn建设也很重要,那么这些公共资源如何管理也是一件很重要的事情

尤其是icon的建设

---------------------------分界线-------------------------

以上是常见的复用功能的做法

以下是react项目开发需要注意的地方

UI库建设

UI库建设被放倒第一位的原因也是理所当然的

UI库建设可能在短期降低了开发效率,提高了维护成本,但长期来看,绝对肯定一定以及百分之百是值得的,建设UI库可以有让人意想不到的效果

更是为了保证换即使设计师也可以该组件库,整个网站风格就变了,还有包括间接性的接入第三方UI库,不要直接接入,否则没准哪一天就不用了

说不准哪天就可以产生一个上万star的UI库了

数据层

和后台交互是一件很重要的事情,网页渲染的数据来源一般出了配置信息以外,就是后端请求的数据了

那么怎么去管理这些数据呢

我在项目中的做法是通过mobx建立一个数据层,组件内是完全不可以请求数据的,只会简单的处理数据,然后映射数据到页面上,这样所有的数据操作便会变得清晰起来,很便于维护

多项目并行开发

多项目并行并不是启动多个项目,而是在一个大项目下,根据耦合情况拆分成多个小项目,小项目之间需要有耦合,包括环境变量,UI组件,工具函数,封装好的功能等。盲目的拆开项目去纯粹的解耦是一件很作死的事情

一个大的项目可能会需要并行很多个小项目,比如说我正在做的建站项目,就会并行代理商,自定义网站的后台,网站前台,编辑器,预览,并行多个项目的时候到底拆不拆总是一个很头大的事情

后端渲染和前端渲染

前端渲染的SEO是比较麻烦的事情,next服务端渲染可能是一个不错的选择,很好的解决了浏览内容类页面的加载问题和seo问题

但是编辑器和后台页面本身却不需要什么seo,所以需要前端渲染和后端渲染同时做。

前后端同构

如果后端是node的话,那么同构是一件很有很有意义的事情

总结

同时做好这么多事情看似很麻烦,只要从基本的开始遵循也很快就会完全适应,

其实也不为其他的,为的是不让自己太辛苦的维护项目

为的是换一个设计师的时候 他不会太累

为的是和后端愉快的沟通

为的是自己对自己的东西心里有数

React项目开发经验汇总的更多相关文章

  1. react构建前端项目方法汇总

    react简介: 一.使用react 创建一个PC端的项目 (a):使用 yemon 创建一个 webpack 的 react 的项目 控制台安装并且产看 yemon 的版本 yo -v (b): 全 ...

  2. React项目模板-从项目搭建到部署

    前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...

  3. React 项目引入 Dva

    背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...

  4. H5项目常见问题汇总及解决方案

    H5项目常见问题汇总及解决方案 H5   2015-12-06 10:15:33 发布 您的评价:       4.5   收藏     4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...

  5. GitHub上史上最全的Android开源项目分类汇总 (转)

    GitHub上史上最全的Android开源项目分类汇总 标签: github android 开源 | 发表时间:2014-11-23 23:00 | 作者:u013149325 分享到: 出处:ht ...

  6. GitHub上史上最全的Android开源项目分类汇总

    今天在看博客的时候,无意中发现了 @Trinea 在GitHub上的一个项目 Android开源项目分类汇总 ,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有参考价值,包括很炫 ...

  7. Android 开源项目分类汇总(转)

    Android 开源项目分类汇总(转) ## 第一部分 个性化控件(View)主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Galler ...

  8. Android 开源项目分类汇总

    Android 开源项目分类汇总 Android 开源项目第一篇——个性化控件(View)篇  包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView ...

  9. Android开源项目分类汇总【畜生级别】[转]

    Android开源项目分类汇总 欢迎大家推荐好的Android开源项目,可直接Commit或在 收集&提交页 中告诉我,欢迎Star.Fork :) 微博:Trinea    主页:www.t ...

随机推荐

  1. Visual Studio 2010 启动调试报错 “访问OLE注册表的错误”

    错误:访问OLE注册表的错误(异常来自HRESULT:0x8002801C(TYPE_E_REGISTRYACCESS)) 很简单,其实只要 “以管理员身份运行” Visual Studio即可.

  2. Spark Streaming的简单介绍

    本文讲解Spark流数据处理之Spark Streaming.本文的写作时值Spark 1.6.2发布之际,Spark 2.0预览版也已发布,Spark发展如此迅速,请随时关注Spark Stream ...

  3. mysql sql时间戳格式化语句

    FROM_UNIXTIME(c.lastUpdateTime/1000,'%Y-%c-%d %h:%i:%s' ) as updatetime; select c.roleid, r.username ...

  4. 传统的dom的渲染方式

    DOM渲染的过程大致分为三个阶段: 后端渲染 前端渲染 独立DOM渲染(前后端相结合渲染) 1.后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端D ...

  5. eclipse总结source folder和Deployment Assembly部署

    在src下创建多级目录 然后右键build path-->use as source folder 就可以直接将多级普通文件夹转换成source folder build path下也可以直接n ...

  6. 手写代码注意点 -- HashMap

    1.定义 HashMap<String,String> hashMap = new HashMap<>(); <String,String>只需要写一遍 2.获取k ...

  7. [JZOJ6344] 【NOIP2019模拟2019.9.7】Huge Counting

    题目 题目大意自己看题去-- 正解 比赛时在刚第二题,所以根本没有时间思考-- 模型可以转化为从\((x_1,x_2,..,x_n)\)出发到\((1,1)\)的方案数模\(2\). 方案数就用有重复 ...

  8. 计算几何——圆卡精度cf1059D

    double 在1e17以后就不能顾及小数,所以用一下加精度的技巧 sqrt(r*r-d*d)=sqrt(r+d)*sqrt(r-d) 遇到误差在几位以内的注意要修改二分的精度,用最大的数据去乘以精度 ...

  9. STM32硬件错误HardFault_Handler的处理方法

    https://blog.csdn.net/electrocrazy/article/details/78173558

  10. js和jQuery以及ajax的小练习

    今天学习了通过鼠标的点击事件然后让边框变颜色,还有怎么设置一个点击浏览器的输入框然后显示一个边框,还学习了通过ajak来获取post和get的值,通过它如何调用这个函数. 第一部分: 通过鼠标的点击让 ...