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

react

前情提要

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

  • Vol.8 - React,“5 分钟快速入门”(什么是 React、它的基本特性和源码的解析)

  • Vol.9 - 进阶吧!React(深入了解各类组件、Redux、性能优化,通过简单的项目对每个部分逐一深入实践)

以及一个番外篇 React Native

  • Vol.10 - React Native丨Learn Once, Write Anywhere

结束了学习阶段,意味着只剩最后的“大怪”——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 是一种什么样的体验?》,各类前端技术层出不穷、更新不断的情况,着实被热辣地调侃了一番。其实每三四年做一个阶段来看,产量与质量都是在指数型的增长,所以,与其说是乱革命,不如看作这是技术还在不断成熟。因为无论规范程度怎样,站在不断累积的前辈们的肩上,自然就会跑得越来越快。

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


# SegmentFault 技术周刊 #

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

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

以上是 SegmentFault 技术周刊 Vol.11 - React 应用与实践 的全部内容, 来源链接: utcz.com/z/381340.html

回到顶部