文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React 16 - 构建可维护可扩展的前端应用

# 前端项目的理想架构 易开发 开发工具是否完善 生态是否繁荣 社区是否活跃 可扩展 增加新功能是否容易 新功能是否会显著增加系统复杂度 可维护 代码是否容易理解 文档是否健全 可测试...功能分层是否清晰 副作用少 尽量使用纯函数 易构建 使用通用技术和架构 构建工具的选择 # 拆分复杂度 # 按领域模型组织代码 按领域模型（feature）组织代码，降低耦合度 将业务逻辑拆分成高内聚松耦合的模块...通过 React 技术栈实现 # 组织 Component，Action 和 Reducer 文件夹结构 按 feature 组织源文件 使用 root loader 加载 feature 下的各个资源...Reducer 同一级，在 redux 下 单元测试保持同样目录结构放在 tests 文件夹 constants.js 在 feature 中，变量名以 {FEATURE_NAME}_ 开头 # 组织 React...Router 的路由配置 在每个 feature 中单独定义自己的路由 使用 JSON 定义顶层路由，更容易理解和维护 import { WellcomePage, CounterPage, Layout

37030

谈谈 React + Redux 的可复用性

二、React + Redux 业务层复用方案 上述所述，团队开发方式中存在的一个本质问题就是缺乏 React + Redux 业务层模块的复用。...特别要说明的是，QMRR组件是使用Remod框架输出的可复用业务层组件，该组件包含React 业务组件与Redux 相关业务层代码，与传统Page不同的是，使用了Remod内置的connect方法延迟连接到...，先要了解 React-Redux 的原理。...React-Redux是通过connect方法将React组件绑定到Redux，该方法返回一个WrappedComponent，WrappedComponent包装了当Redux状态变化的对React组件的处理逻辑...Reducer 代码全部优化掉 提升开发效率，表格页面开发效率从1天提升到1小时 减少样板代码，CLOC统计模块代码量减少约 15.3% 减少重复代码，CLOC统计项目代码量平均减少约 50.2% 高可维护

3.7K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    先进的React GUI编辑器 — Structor

    Structor 是 ReactJS 的用户界面构建器，也就是 Node.js Web 应用 React UI 的可视化开发环境，支持编辑和可视化预览两个模式。...Structor可以通过预先构建好的组件，来使你快速开发用户界面。它自带了React Bootstrap，React Material UI等组件库，你可以通过拖拽轻松完成页面设计。...使用 Structor 的时候不需要安装额外的热重载基础设施 (webpack-dev-middleware, webpack-hot-reloading, react-transform-hmr) ，...口头描述已经无法形容它的强大了，赶紧看它的视频演示吧！ ? 全局安装 npm install structor -g 全局安装后可以通过 structor 这个命令运行。...本地安装 npm install structor 在 package.json 中的 scripts 添加如下行： "structor": "structor" 可以通过 npm run structor

    2K20

    用 React 构建可复用的设计系统

    React 让 web 开发简化了很多。原则上 React 基于组件的模式让代码分解和复用变得更加容易。 然而，开发者并不总是清楚如何跨项目分享他们的组件。在这片文章中，我会展示几种可用的方法。...React 让书写漂亮，并富有表达力的代码更加容易。然而，如果组件不能很好的复用，随着时间的推移代码变得更加零散和更加难以维护。 我曾经看到的代码库中，同样的 UI 有十几种不同的实现！...另外一个问题，开发者通常会把 UI 和业务代码耦合在一起，当 UI 需要改变时就变的很困难。 今天，我们将会看到如何创建可共享的 UI 组件，如何构建贯穿整个应用的一致的设计语言。...开始 一开始你需要一个空的 React 项目。最快捷的方式就是 create-react-app，但是，还是需要设置一下 Sass。 我创建了一个应用框架，你可以在 GitHub 克隆它。...你也可以在教程的代码仓中找到完整的项目(https://github.com/tutsplus/build-a-reusable-design-system-with-react)。

    3.2K30

    用 React 构建可复用的设计系统

    React 让 web 开发简化了很多。原则上 React 基于组件的模式让代码分解和复用变得更加容易。 然而，开发者并不总是清楚如何跨项目分享他们的组件。在这片文章中，我会展示几种可用的方法。...React 让书写漂亮，并富有表达力的代码更加容易。然而，如果组件不能很好的复用，随着时间的推移代码变得更加零散和更加难以维护。 我曾经看到的代码库中，同样的 UI 有十几种不同的实现！...另外一个问题，开发者通常会把 UI 和业务代码耦合在一起，当 UI 需要改变时就变的很困难。 今天，我们将会看到如何创建可共享的 UI 组件，如何构建贯穿整个应用的一致的设计语言。...开始 一开始你需要一个空的 React 项目。最快捷的方式就是 create-react-app，但是，还是需要设置一下 Sass。 我创建了一个应用框架，你可以在 GitHub 克隆它。...你也可以在教程的代码仓中找到完整的项目(https://github.com/tutsplus/build-a-reusable-design-system-with-react)。

    1.4K20

    基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)

    前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护...的API文档,里面写的很详细, 通过以上代码,我们便可以实现一个基本的react版的json编辑器组件.接下来我们来按照设计思路一步步实现可实时预览的json编辑器组件. 3....=> this.viewContainer = elem} /> ); } } export default JsonEditor 这样,我们便能实现一个初步的可实时预览的编辑器...使用PropTypes进行类型检测以及在组件卸载时清除实例 类型检测时react内部支持的,安装react的时候会自动帮我们安装PropTypes,具体用法可参考官网地址propTypes文档,其次我们会在...react的componentWillUnmount生命周期中清除编辑器的实例以释放内存.完整代码如下: import React, { PureComponent } from 'react' import

    2.6K20

    基于 React 的可视化编辑平台实践

    前言 前段时间发在朋友圈的一句话：各种自主搭建的平台，想起好多年各种DIY博客，行业门户网站，本质不变，变的是实现的手段了 本文主要介绍了基于 React 构建可视化编辑平台的实践，包括对可视化拖拽布局...二期，支持组件可扩展，提供组件开发工具，组件市场，三期仍在完善阶段，暂未发布。 系统演示 首先看下我们的系统演示，然后再逐步分析深入，主要是可视化编辑系统开发思 路，以及关键模块的实现。...节点使用类似 React 的虚拟 DOM 结构： Type ：组件类型 Props ：组件属性 Children：组件的子节点列表 Sort：排序号 由于直接使用树形的的结构，对节点的增删改查不友好，所有进行了扁平化处理...存储节点的关系，类似一个数据库的二维表，描述节点的父子关系，方便修改父子结构，同级排序。 结构二： ? 存储节点的数据，通过 ID 可以获取节点数据，方便节点数据更新。...组件可扩展 由于一阶段是内置的组件库，包括通用组件以及定制页业务相关的组件，二阶段希望能实现组件可扩展，提升平台的应用范围，实现页面级的组件，增强易用性。

    2.7K30

    ABAP ALV之自建表可编辑内表的增删改查

    这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情 序 HELLO,这里是百里,一个学习中的ABAPER,在工作中,我们会遇到一些自建表进行维护数据,这些自建表需要给用户进行配置操作....此时就出现了我们的需求.通过传统的增删改查直接操作内表.避免上述说出出现的相互制约的情况 ....实际案例 今天的这个案例讲的是一个自建立表,我们要给他实现增加,删除,修改,查询的功能.同时,增加权限检查....建表开始 我们通过SE11进行自建立表的创建.注意的是,自建立表一定要以Z或者Y开头,一般都是附加模块及号码 表示自建表顺序 . 数据准备 我们基础表建立完成后,就开始在SE38中开发程序....结果 选择屏幕界面 ALV输入界面 当我们什么都不做的时候,就是对应的查询界面,当我们点新增和删除时会触发管制 当我们需要点击编辑后才能进行界面编辑 当操作后点击上方保存按钮后进行数据保存

    2.1K40

    后疫情办公时代——你需要的多人同步协同编辑Demo（可粘贴可撤销）

    通过监听命令来实现简单的协同操作 何为命令机制： 命令就是将一步或多步的操作封装成一个可以执行的命令，执行这样的命令并传入对应的参数，就可以执行相关的一连串操作。...命令对于在线协同的应用： 命令的机制我们可以分清操作到底是代码执行的还是用户UI去操作的，而在线协同的场景中需要同步的内容就是用户UI的相关操作。...这里要注意的是，虽然有命令这样的机制，但其初衷并不是为了协同而设置的，所以有些情况下源生的命令并不能完全的符合协同的实现，需要根据实际情况自己进行改造来满足。...mod=attachment&aid=ODY2MjZ8OTBlY2E0NWF8MTY3MTc5MzE5Mnw2MjY3Nnw3NTM0Nw%3D%3D 可粘贴柯撤销的多人协同 那最原始通过命令的方式为什么无法将粘贴命令同步呢...因为对于clipboardPaste命令，禁止将工作表的一个区域从工作簿复制到另一个工作簿，但允许外部粘贴。因此，有一种解决方法可以重置命令选项的fromSheet和fromRanges。

    75130

    SpringBoot + Vue 实现的可拖拽编辑的大屏开源项目

    1、简介 该大屏设计是一个可视化拖拽编辑的全开源项目，直观，酷炫，具有科技感的图表工具。内置的基础功能包括数据源，数据集，报表管理。...webpack：用于现代 JavaScript 应用程序的_静态模块打包工具 ES6：Javascript的新版本，ECMAScript6的简称。...利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。 vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。...flyway5.2.1 ： 主要用于在你的应用版本不断升级的同时，升级你的数据库结构和里面的数据。...3、数据流程图 4、部分截图 拖拽编辑 日志大屏 5、最后 最后，防止找不到本篇文章，可以收藏点赞，方便翻阅查找。 还等什么呢？赶快来试试吧！项目源码和更详细的安装部署文档已经放到了云盘！

    2.9K40

    更可靠的 React 组件：组合及可重用性

    React 组件的组合是自然而然的。这个库使用了一个描述式的范式，从而不会抑制组合式的表现力。...重用第三方库 今天天气不错还风和日丽哒，你打开电脑，并在启动编辑器的几分钟里，看了看今天的需求 -- 往应用里添加一个新特性，准备开干了......检出 brillout/awesome-react-components 仓库，会发现一个编辑过的可重用组件菜单。 良好的库无疑会产生结构性的影响并推广最佳实践。...以我的经验而言，最有影响的当属 react-router 和 redux。 react-router 使用了声明式的路由来规划一个单页应用的结构。...而后当用户访问匹配的 URL 时，路由将渲染相应的组件。 redux 和 react-redux 引入了单向且可预期的应用状态管理。

    2.9K10

    更可靠的 React 组件：清楚易懂的可表达性

    原文摘自：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ 对于一个 意义明确（meaningful...） 的组件，是易于理解其行为的。...编码活动中的 75% 的时间都在理解代码，20% 的时间用来修改既有的代码，仅仅只有 5% 的时间是在写新的代码。 把少量的额外时间花费在可读性上，将减少以后同事和自己的理解时间。...比如，用 list 这个词表示一个渲染过的项目的集合。 为每个概念挑选一个词，并在整个应用中始终保持这种叙述。最终将形成一个由曾经使用过的 词语->概念 组成的可预测意图映射。...可表达性阶梯 我把组件的可表达性分为了 4 种层次。所处的层次越低，则理解组件需要付出的努力就越多。

    52420

    基于 React 的富文本编辑器－－Braft Editor

    最近发了很多关于 React 的文章，记录遇到的新技术点，以及在写代码过程中遇到的问题，希望可以帮助到和我遇到同样问题的同学。...今天分享的是一款基于 React 的富文本编辑器－－Braft Editor。...按照官方的说法，假如你对它的功能还不够满意，不够使用，完全可以扩展它，自己写一个插件来强化他。 经过我的测试，功能绝对强大，可以满足市面上绝大多数的需求。接下来就说一下如何使用这款插件。...save # 使用 yarn 安装 yarn add braft-editor 2.使用 新建一个组件 EditorDemo.js，在里面写入下列代码： // EditorDemo.js import React...from 'react'; import BraftEditor from 'braft-editor'; import 'braft-editor/dist/index.css'; export

    4.4K20

    如何设计可动态扩容缩的分库分表

    选一个数据库中间件,然后深入之 设计分库分表的方案，要分成多少个库，每个库分成多少个表 基于已选的数据库中间件，以及在测试环境建立好的分库分表，?...能否正常执行分库分表的读写 完成单库单表到分库分表的迁移(使用上一文提到的双写方案) 线上系统,开始基于分库分表对外服务 突然! 扩容了，扩容成6个库，每个库需要12个表，你怎么来增加更多库和表？...可能 每个库的容量又快满了 表数据量又太大 每个库的写并发太高 得继续扩容!...分库分表的扩容，第一次分库分表，就一次性给他分个够。 32个库，1024张表，对大部分的中小型互联网公司来说，已经可以支撑好几年。...因为最多是1024个表 这么搞，是不用自己写代码做数据迁移的，都交给DBA来搞好了，但是DBA确实需要做一些库表迁移的工作，总比你自己写代码，抽数据导数据来的效率高得多 哪怕是要减少库的数量，也很简单，

    1.2K20

    每日开源 | SpringBoot + Vue 实现的可拖拽编辑的大屏项目

    1简介 该大屏设计是一个可视化拖拽编辑的全开源项目，直观，酷炫，具有科技感的图表工具。内置的基础功能包括数据源，数据集，报表管理。...webpack：用于现代 JavaScript 应用程序的_静态模块打包工具 ES6：Javascript的新版本，ECMAScript6的简称。...利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。 vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。...flyway5.2.1：主要用于在你的应用版本不断升级的同时，升级你的数据库结构和里面的数据。...3数据流程图 4部分截图 拖拽编辑 日志大屏 物流大屏 汽车销量大屏 5最后 还等什么呢？赶快来试试吧！项目源码和更详细的安装部署文档已经放到了云盘！ 关注 IT码徒 公众号！

    1.9K20

    React Native之StyleSheet样式表

    概述 在React Native中，StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下，先定一个StyleSheet的样式表，然后在View中引用样式。...}> StyleSheet样式表的优点...采用StyleSheet样式表的优点注意如下： 从代码质量角度来分析: 从render渲染方法中移除了styles样式相关代码，这样可以使代码更加容易阅读 通过对不同样式命名，正好也是对render...方法中的组件的一种标志 这样的写法做到了业务和样式的分离，为后面分层开发打下了基础 从性能角度来分析: - 通过StyleSheet，我们可以通过标志的样式ID来引用，而不是每次都要创建一个新的Style...该属性用来设置边框或者两个组件之间的分割线。

    86470

    React可视化拖拽组件编辑代码生成

    mobile.png pc.png 特性： 任意拖拽嵌套：通过组件预览面板拖拽组件，到设计面板实现任意嵌套，设计面板中的组件也可随意拖拽嵌套 实时预览：设计面板中会实时展示组件的属性效果和样式效果，...并且与真实页面无异 DomTree展示：页面组件dom树的展示并实现dom实时追踪 可视化属性配置：结合React 特性和JS语法定制了可视化的组件属性配置，实现复杂数据结构的可视化配置 可视化样式配置...：通过样式配置面板修改样式，实时在页面中显示样式效果 模板功能：可以选中局部或者整个页面做为可复用的模板，提高页面配置效率减少重复工作 组件约束：根据组件特性配置组件约束，减少组件间的错误嵌套和报错 预览与代码生成...：可随时预览页面的真实效果，和页面的jsx代码与样式代码 多平台支持 ：支持PC与移动端多型号设配切换展示 组件库替换 ：通过简单的配置可以对接任何React组件库 github地址 在线预览

    3.7K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券