react | 易学教程

开源在线聊天应用-Fiora

阅读更多关于开源在线聊天应用-Fiora

Fiora是国人开发的一款在线聊天开源应用。基于node.js, mongodb, socket.io和react编写。遵守MIT开源协议。主要功能特色：好友, 群组, 私聊, 群聊文本, 图片, 代码, url等多种类型消息贴吧表情, 滑稽表情, 搜索表情包桌面通知, 声音提醒, 消息语音朗读自定义桌面背景, 主题颜色, 文本颜色查看在线用户, @功能管理员关小黑屋撤回消息给用户打标签重置用户密码查看用户 ip GitHub 仓库挂件 WordPress 插件 yinxin630 / fiora An interesting chat application power by socket.io, koa, mongodb and react https://fiora.suisuijiang.com/ 3,890 765 Download ZIP 相关文件下载地址本地直接下载来源： oschina 链接： https://my.oschina.net/u/4397293/blog/4302042

开发一个大型后台管理系统，应该用前后端分离的技术方案吗？

阅读更多关于开发一个大型后台管理系统，应该用前后端分离的技术方案吗？

话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。背景是这样的：我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成：开发一个大型后台管理系统，应该用前后端分离的技术方案吗？先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下前后端分离的优点多多，这不需要多说，大家人人都清楚。来，讨论之前，我们先一起好好审审题。结合“ 开发一个大型后台管理系统 ”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂，而不是访问量、TPS、数据量大。所以 CMS、OA

程序人生：程序员想要提升英文阅读能力怎么办？实用秘籍推荐！

阅读更多关于程序人生：程序员想要提升英文阅读能力怎么办？实用秘籍推荐！

我相信正在阅读这篇文章的你也努力挣扎于提升英文阅读能力，但是你的感受是英文阅读一直都提升不起来，改变极小或没有任何变化。随着全球化，程序员的我们也应该考虑学好英文，在获取信息上更有竞争力；有时会去查英文技术文档，想获取最原始的信息，然英文阅读能力不够。我也有同样的遭遇。代码人生 6年后，我重拾英语，2018年底开始自学英语，期间经历过放弃、重新开始、写词汇学习工具等。到目前我的英文阅读能力提升不少，对英语学习已变成一个平和的态度，现在我更喜欢阅读英文内容。下面是我的这一年半来英语阅读提升的感受和实用经验，能够帮助你提升你的英文阅读能力，未来让阅读英文更轻松，在工作中能有不一样的优势。心理准备学习语言是一个过程，不能当作考试，心理上给自己2～3年的时间，也就是说在2-3年里，你时不时要阅读一些英文内容，一开始尽管很慢，但当你阅读你喜欢的技术文章、关注你喜欢的事物获取信息后，你就会得到有用的信息，获得信心，从而持续的阅读，然后将英文阅读变成习惯。2019年5-7月期间，我在medium上阅读大概5篇比较长的英文技术文档，读得很慢，但完成一篇阅读获取信息后感觉收获颇多，后还在组内做过深入分享，通过文章所学到的信息使得我对英文阅读增加了不少信心。总之，不急于求成，日积月累，心理上有一个长时间的准备。 2/8原则如果有2500 - 3000的词汇量，可以理解90％的日常英语会话

最全Vue知识点（基础到进阶，覆盖vue3）

阅读更多关于最全Vue知识点（基础到进阶，覆盖vue3）

基础篇说说你对MVVM的理解 Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据了解mvc/mvp/mvvm的区别 Vue2.x响应式数据/双向绑定原理 Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View 。简述：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。深入理解：监听器

前端三大主流框架React、Vue、Angular的对比

阅读更多关于前端三大主流框架React、Vue、Angular的对比

前言每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：必须使用它的模块机制必须使用它的依赖注入必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React

手把手教你项目中使用：JavaScript设计模式

阅读更多关于手把手教你项目中使用：JavaScript设计模式

虎克小哥哥想必很多程序员谈到设计模式，肯定是一头雾水,我才没心思管你什么设计模式不设计模式呢! 只要能够实现需要就行，就是一顿搞。其实在编码中合理按照一定设计模式去设计项目代码结构，是能够很好的提高代码的可维护行/可读性，和减少代码的数量。这样性能不就提示了么，自己编码的时候不香，不舒服么？今天将通过4个实际案例学习前端的设计模式。下面是常见的四种设计模式策略模式发布-订阅模式装饰器模式责任链模式策略模式假设我们有一个要求，当用户试图打开一个页面时，只有满足以下条件才能看到正确的内容：该用户是该站点的注册用户用户等级不小于1 用户必须是前端开发工程师用户类型是活跃用户现在，我们需要编写判断逻辑以确保只有合适的用户才能看到内容。你是做什么？许多新手程序员可能只是选择了“ if-else”并编写如下代码： function checkAuth ( data ) { if (data.role !== 'registered' ) { console .log( '如果没用注册' ); return false ; } if (data.grade < 1 ) { console .log( "用户级别小于1" ); return false ; } if (data.job !== 'FE' ) { console .log( '用户不是前端开发工程师' );

简单的react示例

阅读更多关于简单的react示例

自留 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel" src="patient.jsx"></script> <script type="text/babel" src="page.jsx"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <Page />, document.getElementById(

MEAN架构实战：基于MongoDB、Express、Angular、Node.js构建企业级应用

阅读更多关于 MEAN架构实战：基于MongoDB、Express、Angular、Node.js构建企业级应用

曾几何时，业界流行使用LAMP架构（Linux、Apache、MySQL和PHP）来快速开发中小网站。LAMP是开放源代码的，而且使用简单、价格廉价，因此LAMP这个组合成为了当时开发中小网站的首选，号称“平民英雄”。而今，随着Node.js的流行，这使得JavaScript终于能够在服务器端拥有了一席之地。JavaScript成为了从前端到后端再到数据库层能够支持全栈开发的语言。而以MongoDB、Express、Angular和Node.js四种开源技术为基础的MEAN架构，除了具备LAMP架构的一切优点外，更能支撑高可用、高并发的大型互联网应用的开发。MEAN架构势必也会成为新的“平民英雄”。本文介绍了MEAN架构的概念、发展趋势，并阐述了如何学习和使用MEAN架构。什么是MEAN架构？ MEAN架构，是指以MongoDB、Express、Angular和Node.js四种技术为核心的技术栈，广泛应用于全堆栈Web开发。 1. MongoDB MongoDB是强大的非关系型数据库（NoSQL）。与Redis或者HBase等不同，MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富、最像关系数据库的，旨在为Web应用提供可扩展的高性能数据存储解决方案。它支持的数据结构非常松散，是类似JSON的BSON格式，因此可以存储比较复杂的数据类型

作为程序员，你可开发哪些有趣项目？

阅读更多关于作为程序员，你可开发哪些有趣项目？

初次看到原文我是有一些震撼的，原来作为开发人员，闲暇时间还算可以做这么多有趣程序的开发。阅读时暂且抛弃你所使用的语言的限制，你是否也能够在“无聊”之时找到一个开发者的乐趣。阅读以下内容时重点关注项目的创意性，并结合自己的独特经历进行拓展，你一定也能够找到编程的乐趣所在。很多项目都可以通过不同的技术栈来进行尝试。以下为原文内容：正文经过1000天的培训，你能够成为一位初学者。经过10000天的练习，你将成为一位大师。这是出自Mas Oyama的话，对学习新事物做了很好的总结。成为出色的开发人员的秘诀在于肯下功夫。要想成为一名开发人员，你需要花大量的时间在键盘上，并且需要亲手实践。下面有7个项目可以帮助你提高开发水平。选择自己的技术栈，随心所欲的写代码吧。项目一：吃豆人构建吃豆人是一个很好的可以从基础角度来了解游戏开发的途径。可以通过像React或Vue这样的JavaScript框架来实现。通过该项目你可以学到：实体的运动检测按键是否被按下碰撞检测你可以通过给幽灵添加转向行来做更多的事情 GitHub示例地址： https://github.com/mbfassnacht/pacman-react 项目二：用户管理开发一个基于用户管理的CRUD项目，可以教会你很多关于开发的基础知识。这对刚入门的开发人员特别有用。通过该项目你可以学到：路由（Routing）

微前端入门-最容易看懂的微前端知识

阅读更多关于微前端入门-最容易看懂的微前端知识

本文将以理论介绍的方式来对微前端这个概念做一个整体扫盲，涉及到的大多数理论知识并不会太过于对展开，如果读者对一些细节比较感兴趣，可以留言或者搜索相关的概念。什么是微前端？微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系，这个概念最早在2016年底被提出，可以参考在Google上搜索Micro-Frontends, 排名靠前的https://micro-frontends.org的博客文章，提出了早期的微前端模型。为什么会有微前端任何新技术的产生都是为了解决现有场景和需求下的技术痛点，微前端也不例外：拆分和细化：当下前端领域，单页面应用（SPA）是非常流行的项目形态之一，而随着时间的推移以及应用功能的丰富，单页应用变得不再单一而是越来越庞大也越来越难以维护，往往是改一处而动全身，由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分，并随之解耦，每个部分可以单独进行维护和部署，提升效率。整合历史系统：在不少的业务中，或多或少会存在一些历史项目，这些项目大多以采用老框架类似（Backbone.js，Angular.js 1

订阅 react