基于Webpack 2的React组件懒加载

2016-12-27
阅读 5 分钟
6.7k
Chunks是Webpack的基本概念之一,最直观的概念是在多入口配置中,诶个单独的入口会生成单独的Chunk。而在添加额外的插件配置之后,Webpack会输出譬如独立的CSS包体这样独立的块。Webpack内置有如三种类型的Chunk:

2016-我的前端之路:工具化与工程化

2016-12-26
阅读 20 分钟
11.6k
近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无数的前端开发框架、技术体系争妍斗艳,让开发者们陷入困惑,乃至于无所适从。Web前端开发可以追溯于1991年蒂姆·伯纳斯-李公开提及HTML描述,而后1999年W3C发...

Webpack 实践技巧与建议

2016-12-25
阅读 3 分钟
5.6k
本文是笔者在使用Webpack的过程中总结的一系列建议与技巧,不过需要注意的是这些小技巧都是关于Webpack 1的。Webpack 2与Webpack 1相比其API发生了较大变化,本文提及的不少技巧可能在Webpack 2并不能起作用。如果你想了解从Webpack 1迁移到Webpack 2的详细教程,可以参考这里,另外可以参考笔者的基于Webpack 2的模板 W...

2017年值得关注的JavaScript框架与主题

2016-12-14
阅读 4 分钟
8.6k
JavaScript的繁荣促生了很多优秀的技术、框架与工具库,这空前的繁荣也给很多人造成了困惑,无所适从。到底何者是值得投入,代表了未来的方向,而何者又是真正适合于当前项目,当前团队的?而本文即时作者基于自身实践的一些思考,与诸君共享。

简单几步助你优化React应用包体

2016-12-04
阅读 2 分钟
8.4k
前端项目中,特别是移动环境下,我们特别关心用户的加载速度。加载速度的限制一个是并发链接数,受限于HTTP 1.1协议,浏览器的并发连接数存在一定限制,不过我们可以利用Webpack等模块打包工具将模块打包到一个文件中(如这里推荐笔者的Webpack2 React Redux Boilerplate)。此时就会面临另一个问题,首屏加载时候包体过...

React 应用中最常见的XSS漏洞以及防御手段

2016-11-30
阅读 2 分钟
14.8k
笔者一直是坚定地React技术栈的使用者,因此也会关注React应用安全相关的话题。笔者在我自己的React+Redux+Webpack2脚手架的第三层级也使用了大量的服务端渲染/同构直出的技术,而本文即是阐述该方法可能存在的某个XSS漏洞。服务端渲染即允许我们在服务端进行HTML渲染,并且在服务端请求部分应用数据追加到页面上然后随...

如何写出漂亮的React组件

2016-11-21
阅读 6 分钟
14.5k
在Walmart Labs的产品开发中,我们进行了大量的Code Review工作,这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我会分享出我最欣赏的五种组件模式与代码片。不过我首先还是要谈谈为什么我们需要执着于提高代码的阅读体验。就好像你有很多种方式去装扮一只猫,如果你把你的爱猫装...

React的未来特性

2016-11-04
阅读 3 分钟
9.5k
周末参加GDG今年的活动时,听人安利Angular2的宏伟蓝图和规划,突然好奇React未来规划如何,之前还关注过react-fiber-architecture。然后在YouTube上搜索到了Andrew Clark: What's Next for React — ReactNext 2016,本文即是翻译整理而来。本文从属于笔者的Web 前端入门与最佳实践的React 入门与最佳实践 系列文章。

在重构脚手架中掌握React/Redux/Webpack2基本套路

2016-10-14
阅读 18 分钟
13.6k
本文从属于笔者的Web Frontend Introduction And Best Practices:前端入门与最佳实践,项目的Github地址为Webpack2-React-Redux-Boilerplate. Warning!笔者自己构建的基于Webpack+React+Redux的脚手架已经经历了三个版本,之前的两个版本参考Webpack实战之Quick Start以及我的Webpack套装。在本文文首此处,我必须严肃吐槽...

React中函数式声明组件

2016-08-05
阅读 3 分钟
50.3k
前文介绍的组件的定义方式主要是声明式组件,其与传统的jQuery中以DOM操作为核心的命令式组件生成相比具有更大的灵活性与可组合性。而实际上随着应用复杂度与所需要的组件数目的持续增加,我们所需要的组件也会被划分为很多的类型。从组件组合的角度或者所谓动态组件的角度来看,常见的即是HOC模式,即将某个组件作为另...

React设计模式:深入理解React&Redux原理套路

2016-07-29
阅读 18 分钟
19.7k
React组件一个很大的特性在于其拥有自己完整的生命周期,因此我们可以将React组件视作可自运行的小型系统,它拥有自己的内部状态、输入与输出。

React开发中常用的工具集锦

2016-07-27
阅读 6 分钟
11.1k
React Devtools是React官方提供的类似于浏览器调试台的插件,可以允许以查看组件的层次、各个组件的Props、States等等信息。使用方式也很简单,直接在Firefox或者Chrome的加载项仓库中搜索下载即可。

React Router最新指南与异步加载实践

2016-07-25
阅读 19 分钟
23.1k
React Router是基于React的同时支持服务端路由与客户端路由的强大易用的路由框架,可以允许开发者方便地添加新页面到应用中,保证页面内容与页面路由的一致性以及在页面之间进行方便地参数传递。之前React Router作者没有积极地开发与审核Pull Request,结果有个rrtr一怒之下要建个独立的分支,不过后来好像又回归到了Re...

使用Facebook的create-react-app快速构建React开发环境

2016-07-24
阅读 5 分钟
43.4k
create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践。安装create-react-app的方式也非常简单,可以直接使用npm命令进行全局安装。

基于CSS3 Transform的自适应响应式React封装组件以及对于Swiper.js的封装

2016-07-04
阅读 11 分钟
7.2k
核心思想就是基于CSS3 Transform中的scale变换,根据屏幕尺寸与视觉设计稿的尺寸对比进行自动释放,以求达到较好的浏览效果,适合于懒人快速适配。

ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具

2016-06-03
阅读 4 分钟
7.6k
笔者一直在MacOS上没找到太顺心的OCR工具,导致看书的时候很多东西只能手打,略烦。正好前段时间用了Tesseract,就用Electron封装了一个,这里简要记述下开发当中的一些坑和要点,日后有空把Electron整理好也出个系列

[译] 前端攻略-从路人甲到英雄无敌二:JavaScript 与不断演化的框架

2016-05-26
阅读 10 分钟
18.2k
继续译者的废话,这篇文章是前端攻略-从路人甲到英雄无敌的下半部分,在上半篇中介绍了HTML与CSS的基础知识,在这里就主要介绍JavaScript与各种各样的前端框架。再安利一波笔者的我的前端之路 笔者一直觉得不断变革的前端永远充满活力与激情,但是,哪有那么多激情燃烧的岁月,很多时候会有一种深深的无力感。B狗的才学...

React 概念模型——脱离React谈谈它的设计思想

2016-05-19
阅读 5 分钟
15.6k
在正式学习React之前,我们希望能脱离React本身来了解下React的设计思想,这有助于我们更好地运用React与进行更好地架构设计。当然,这里讨论的一些设计理念肯定还是有争论的,见仁见智,各有所感。React.js本身的学习与实现是偏重于工程解决方案、算法优化、代码兼容以及调试工具这些方法论,不过,这些都是会随着时间...

一次React+Redux实践及思考

2016-05-14
阅读 11 分钟
6k
这是笔者第一次将React+Redux应用到一个较为复杂的项目中,这个项目初期遇到最大的问题是以何种粒度进行组件拆分,因为该项目没有专配的UI,所以是程序猿直接按照自己的理解进行开发,在这种情况下,笔者习惯性的先写了一个包含菜单以及常见控制项的整体项目,然后再进行拆分。笔者在本文中就是把一些迭代和自己感受到的...

Redux生态系统枚举

2016-04-06
阅读 35 分钟
5.6k
本文是对redux-ecosystem-links的Fork与翻译。本文包含了一系列Redux的插件或者与之有紧密关联的项目的集合。本文包含了Redux官方文档中的 Ecosystem page 以及 Awesome-Redux 列表, 并且包含了很多笔者自己搜集的项目列表。列举在某个具体的目录下的项目没有特定的顺序,只是按照我添加的顺序来。

前端之React实战:创建跨平台的项目架构

2015-11-12
阅读 3 分钟
7.2k
React/React Native一个很受欢迎的地方在于它能够在不同平台之间共享业务逻辑,在看完 Desktop, Mobile, and Web app in one project这个项目之后笔者就开始思考应该如何组织项目结构,能够使其在web、desktop(Electron)以及mobile应用之间尽可能地共用相同的代码基础,并且保证能在以后的项目中扩展到其他平台。

前端之React实战-代码规范

2015-09-24
阅读 4 分钟
11.5k
Coding Style(编码风格) Basic Rules(基本原则) 每个文件中只包含一个React组件。 尽可能地使用JSX语法。 除非不用JSX语法创建一个应用,否则不要使用React.createElement方法。 Component(组件规范) Class 与 React.createClass方法 尽可能地使用ES6中的类的语法,除非有特殊的对于Mixin的需求。 {代码...} 组件命名 扩...

前端之React实战-交互与动态UI

2015-09-15
阅读 6 分钟
9.6k
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。但是...

前端之React实战-组件

2015-09-15
阅读 9 分钟
12.4k
React提供了和以往不一样的方式来看待视图,它以组件开发为基础。组件是React的核心概念,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。对React应用而言,你需要分割你的页面,使其成为一个个的组件。也就是说,你的应...

前端之React实战-JSX介绍与使用

2015-09-15
阅读 3 分钟
17.1k
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。

前端之React实战-快速入门以及集成使用

2015-09-14
阅读 4 分钟
14.6k
React独创了一种JS、CSS和HTML混写的JSX格式,可以通过在页面中引入JSXTransformer这个文件进行客户端的编译,不过还是推荐在服务端编译。

前端之React实战-背景概述

2015-09-14
阅读 3 分钟
4.6k
React并不是一个完整的MVC或者MVVM框架,它与Angular也是负责不同的方面,它最大的功能是提供一个高效的视图层。React提供了一些新颖的概念、库和编程原则让你能够同时在服务端和客户端编写快速、紧凑、漂亮的代码来构建你的web应用。如果你使用React,那么可能会涉及到一些常用的概念或技术,包括: