文档章节

SegmentFault 技术周刊 Vol.11 - React 应用与实践

SegmentFault
 SegmentFault
发布于 2016/11/30 11:57
字数 1383
阅读 3
收藏 0

weekly-vol011

前情提要

前面三期的社区周刊,我们从一个最简单的 To-do List 应用入手,完成了 React.js 学习三部曲的前两部分

以及一个番外篇 React Native

结束了学习阶段,意味着只剩最后的“大怪”——React 的具体应用和实践,现在,我们将结合 Webpack、Node.js、ES6 甚至 Vue.js,完成对学习成果的手动操作和加强。这就是本期周刊的内容。

应用与实践

hantingting - 从零开始:使用 React+Webpack+Nodejs+Express 快速构建项目

React 官方文档中,只有一个 TodoMVC 的范例,里面上百行的代码以及过多的新概念,对于很多初学者来说依然很复杂。所以作者以一个简单的例子,讲解如何使用 React、Webpack、Node.js、Express 来快速构建项目,将前端各类技术知识系统地引入实践,为后期的深入学习铺好道路。

二哲 - Vue 或 React 多页应用脚手架

让多页应用如何能有一套像 SPA 一样优雅的开发模式,很多人都在思考,不妨来看看作者是怎么做的:MeCKodo / react-multipage,这是一篇使用 ES6 (7) + 组件化(.vue | .jsx)开发多页应用的范文。

lhc - 手把手教你基于 ES6 架构自己的 React Boilerplate 项目

结束上篇 ES6 + 组件化的应用,再来看看如何加入 Webpack。作者从项目开发的蛮荒阶段,搭建开发环境、配置和使用 webpack、搭建测试环境,一步一步构建适合自己的 React + Webpack 起始项目。非常详尽,推荐阅读。

xiaoyann - 使用 Webpack + React + Redux + ES6 开发组件化前端项目

文如其题,前端开发者自己常备一个 boilerplate 项目的重要性不言而喻,作者这个项目在 Webpack 配置上做了不少优化和总结。这是复杂性 React 项目实践必看的一篇。

supnate - 使用 React + Redux + React-router 构建可扩展的前端应用

无论使用什么样的技术,一个理想中的 Web 项目大概都需要考虑这么几个方面:易于开发、易于扩展、易于维护、易于测试和易于构建。这些方面并不是互相独立,而是互相依赖互相制约,当某个方面做到极致,其它点就会受到影响。本文这个点出发,讲述如何利用 React + Redux + React-router 来构建可扩展的前端应用,其核心思路就是

  • 以功能(feature)为单位组件文件夹结构
  • 采用每个 action 单独文件的模式

这样能够让代码更加模块化,增加和删除功能都不会对其它模块产生太大影响。同时使用 React-router 来帮助实现页面的概念,让单页应用(SPA)也拥有传统 Web 应用的 URL 导航功能,进一步降低了功能模块间的耦合行,让应用结构更加清晰直观。

kenberkeley - 可能是东半球最好的 React + Redux 启动器,基于 Vue Cli 二次开发

这是一个基于 Vue Cli 开发的 React 简易留言板 + 待办事项,项目架构优雅,且可以快速上手 React 开发 SPA。项目地址:kenberkeley / react-demo

whatif - feWorkflow - 使用 electron, react, redux, immutable 构建桌面 App

feWorkflow 是一套完整的 Gulp 工作流,以 electron 为基础将 gulpfile.js 以及所依赖的 node_modules 封装在一起的一个图形界面,可以进行一键式的开发和压缩。作者在这里就项目的开发框架及其技术,做了一个总结,包括基本的操作流程和一些心得体会。

项目地址:whatifhappen / feWorkflow

还有几个 React 做成的项目,我们已经在第八期周刊(Part.4 - 简单的应用)中做了简单介绍,现在,你可以去深入的研究下他们具体是怎么做了。

系列的结束

本期周刊只有 7 篇内容,但这些内容所包含的实践例子,已完全可以让你对如何在实际中使用 React 有一个非常明确的了解。随之,React 系列的周刊也将告一段落。

一个题外话,突然想起来,前段时间很火的《在 2016 年学 JavaScript 是一种什么样的体验?》,各类前端技术层出不穷、更新不断的情况,着实被热辣地调侃了一番。其实每三四年做一个阶段来看,产量与质量都是在指数型的增长,所以,与其说是乱革命,不如看作这是技术还在不断成熟。因为无论规范程度怎样,站在不断累积的前辈们的肩上,自然就会跑得越来越快。

当然,贵圈华丽也是需要克制的。 <br>


# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。周刊筛选的每篇内容,是作者的独到见解,踩坑总结和经验分享。

每周二更新,欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

© 著作权归作者所有

共有 人打赏支持
SegmentFault
粉丝 14
博文 24
码字总数 41594
作品 2
杭州
高级程序员
OSChina 技术周刊第二十一期 —— 下一代 ECharts

每周技术抢先看,总有你想要的! 移动开发 【博客】Android ListView 复杂列表优化实践 前端开发 【翻译】100 行代码实现的 JavaScript MVC 样式框架 服务端开发/管理 【翻译】使用 React.js...

OSC编辑部
2015/02/08
3.2K
0
fir.im Weekly - 2016 年 Android 最佳实践列表

2016 年已经过去一半,你在年初制定的成长计划都实现了吗? 学海无涯,技术成长不是一簇而就的事情。本期 fir.im Weekly 推荐 王下邀月熊_Chevalier的 我的编程之路——知识管理与知识体系,...

风起云飞fir_im
2016/06/27
27
0
SegmentFault 2017 年社区周报 Vol.1

Hello,各位 SegmentFault 的 GG 和 MM,SegmentFault 新人 Jenny 来报道啦!本喵资料:性别女,爱好你猜,皂片请点击头像~ 新人一周见闻:分享了技术头条,学习了技术问题,放行了一丢丢内容...

Jenny
2017/04/21
0
0
ELSE 技术周刊(2018.01.08期)

本期推荐 浏览器页面资源加载过程与优化 本文介绍浏览器页面资源加载过程,在此基础上提出一些优化方法,并给出浏览器兼容性参考,最后展示各大厂商在前端性能优化上所使用的奇技淫巧,值得参...

01/09
0
0
OSChina 开源周刊 49 期,每周技术精粹

本周开源资讯 Digium 开源实时音频和视频通信 SDKs 集群管理器 Mesos 能在 Windows 上运行了! 软件更新 KDE Plasma 5.4 发布,引入 1400 多个新图标 Linux Kernel 4.2 RC8 发布 Node.js 3....

OSC编辑部
2015/08/28
2.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

arts-week5

Algorithm 824. Goat Latin - LeetCode 152. Maximum Product Subarray - LeetCode 110. Balanced Binary Tree - LeetCode 67. Two Sum II - Input array is sorted - LeetCode 665. Non-dec......

yysue
15分钟前
0
0
iOS开发之AddressBook框架详解

iOS开发之AddressBook框架详解 一、写在前面 首先,AddressBook框架是一个已经过时的框架,iOS9之后官方提供了Contacts框架来进行用户通讯录相关操作。尽管如此,AddressBook框架依然是一个非...

珲少
44分钟前
1
0
两年摸爬滚打 Spring Boot,总结了这 16 条最佳实践

Spring Boot是最流行的用于开发微服务的Java框架。在本文中,我将与你分享自2016年以来我在专业开发中使用Spring Boot所采用的最佳实践。这些内容是基于我的个人经验和一些熟知的Spring Boot...

Java填坑之路
今天
3
0
《Spring5学习》04 - 面向切面编程

一、Spring面向切面编程的基本概念 面向切面编程(即AOP):把项目中需要再多处使用的功能比如日志、安全和事务等集中到一个类中处理,而不用在每个需要用到该功能的地方显式调用。 横切关注...

老韭菜
今天
2
0
day61-20180819-流利阅读笔记

跑道没了,它们还在跑:澳门赛狗业的遗孤 Daniel 2018-08-19 1.今日导读 相信你早就知道香港有个赛马会,可是你听说过香港的邻居澳门原本有个赛狗会吗?其实,对于澳门人来说,赛狗这项活动历...

aibinxiao
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部