[思客教学] React 全端训练营 - Web 开发的未来

[hayeah]

有兴趣报名话发邮件到 [email protected]

前端不能只做 Web 端

移动时代对 Web 有了很大的冲击，用户的注意力大规模地由浏览器转向了手机。市场随之迁移，前端技术再也不能只局限于 Web 。

但苦于浏览器的限制， Hybrid 或者 Mobile Web 始终无法做到很好的用户体验。与其花费大量的精力去优化 HTML5 应用的性能，并模仿原生组件的交互效果，还倒不如老老实实地去写原生应用。

学一次，通吃三大平台

React 的出现改变了 Web 技术的可能性。 ReactNative 直接操作原生组件，因此用户体验和原生应用完全一样。如果说 Swift 是 "Objective-C Without the C", ReactNative 可以说是 “ Web Without the Browser ”。

虽然 React Web 和 ReactNative 的运行环境不一样，我们只需要学习一套他们共用的 Web 技术：

• React Virtual DOM 。
• React 的单向数据流编程模式。函数式编程风格。
• Flex 布局。 相比传统的 CSS 布局方式更可控。
• ES6 。成熟的 JavaScript 。模块化，更精简的语法。
• W3C 事件模型。 Bubble 和 Capture 。
• Flux 架构。

在这个 React 全端训练营我们会先在 Web 端对 React 有个初步认识。之后我们会立马转战移动端，做出棒棒哒原生应用！

项目演示

Tumblr 客户端

• 原生滚动。
• 原生动画效果。
• “响应式” 布局，支持不同尺寸的设备。

Tumblr Native 视频演示

Swipe 任务管理

• 拉拽排序。
• 滑动删除。
• Flux 架构。
• 用 ReactMotion 实现复杂动画效果。
• 手势驱动动画。

Swipe 视频演示

课程安排

暖身周

• ES6 介绍。 JavaScript 模块化。 NPM 依赖管理。
• 盒子模型。 Flex 布局。
• CSS3 预处理工具。
• 项目构建工具。
• 代码质量工具。 ESLint 。 Flow 类型推理。

第一周

• React 入门。
• Tumblr Web 客户端。
• 实现多栅栏瀑布流。

第二周

• 在手机端实现 Tumblr 原生客户端。
• 了解什么是 UIView ， iOS 的 “盒子模型”， Xcode 素材管理。
• React Native 入门。
• ScrollView 。
• 在 iPad 支持瀑布流。

第三周

• 实现一个可以拖拽更改排序 TodoList 应用。
• 监听触碰事件。
• 动画效果。 Animated ， LayoutAnimation ， React-Motion 。
• 客户端数据管理。各式各样的 “ flux ” 方案选一个来用。

适合我吗？

• HTML 和 CSS 基本语法，不需要深入。
• 你有基础的 Javascript 知识。
• 你有英文阅读能力。
• 你爱折腾，想在书本以外动手做项目。
• *最好有 Mac 和 Xcode ，但不需要 Apple Developer Program 。

没有 Javascript 经验，但是有技术底子好的话还是可以胜任。课程开始之前我会准备 JavaScript 恶补资料，自己啃一下就 ok 啦~

*注：目前 ReactNative 只支持 iOS 。使用 ExponentJS 开发不需要 Xcode, 你愿意尝试的话也可以报名，但我无法提供技术支持。没有 Mac 愿意折腾还是可以报名，真的不行的话退款 -。-|||

和其他 IT 教学有什么不一样

自学才是最好的学习方式。这个训练营只是提供一个方向，掉坑了帮你更快的爬出来。

• 实战：依照任务需求自己查质料，读文档，写代码。
• 自主：不直接给你正确答案，而是适当的提示让你自己解决问题。
• 氛围：和其他有相同兴趣和理想的小伙伴们交流。
• 习惯：每天都加强一点点。
• 耐心：没有人会骂你小白。

只要你有动力学习，我就愿意花时间教你。如果有需要，你也可以约时间跟我做远端结对编程 (使用 Teamviewer 桌面分享)。

怎么申请？

发邮件给我： [email protected]

名额有限。 申请时请回答以下的问题：

有兴趣申请发邮件，回答以下问题：

1. 你的本名, Github, 博客 是什么？
2. 你是学生还是在职？
3. 你读了那些技术相关的书？
4. 你解决过最难的技术问题是什么？
5. 你为什么想加入训练营？

两天内会回复。假如没有收到回复邮件可能是邮箱问题。

有任何疑问可以直接联系我：

• 邮箱： [email protected]
• 微信： hayeah666
• 电话： 186 8269 6795

学费多少？

在职 890 RMB 一人。学生优惠 590 。

因为这个训练营注重学员之间的互动，如果你找朋友一起学习的话可有小伙伴优惠： 690 。

如果你觉得课程不适合，或者不满意，第一周内我愿意 100% 退款。

（请不要在这个帖里结队）

早鸟优惠

这次的训练营在 9/21 周一开始。在 9/14 号前报名可以享有 100Y 的代金卷，只限 10 人哦。

以邮件收到的顺序为准，想要参加赶快发邮件报名喔！

你是谁？

我叫 Howard ，台湾同胞一枚。小时候随家人移民加拿大。

在大学的时候我第一次接触 Rails ，那时它刚发布 1.0 版本。大学读一半跑去一家 YCombinator 的公司做 Rails 开发。后来又去了一家叫 Versapay 加拿大做支付的公司，在那里当 tech lead 。

2010 年辞了 Versapay 的工作，成为自由工作者。 2011 年远程工作，边旅行边赚钱。我写了篇有关这个经历的博文 From The Office to Travelling The World. 那一年第一次来到了天朝。

2012 年觉得生活太安逸，决定来中国发展，发现难度瞬间提升为 Hard 。在深圳和朋友创立了 小象网，做创意纸品，婚纱相册之类的产品。现在已盈利，处稳定发展状态。

2013 夏，搬到成都和女朋友在一起。

2014 夏，和妹子移居大理 ，逃离雾霾。

Twitter: @hayeah
Github: github.com/hayeah
Blog: metacircus.com

有兴趣的话发邮件到 [email protected]

[lx7575000]

报名，求带求带再求带

[sjtlqy]

http://teahour.fm/

[poshboytl]

很早就认识 Howard 同学， 以前他是个非常靠谱的 hacker.
现在他现在也是个靠谱的老师。

Teahour.fm 最新的一期时采访的他， 有兴趣的朋友可以听听: http://teahour.fm/2015/08/31/hakcing-in-dali.html

:D

[crs0910]

报名

[zhaozhiming003]

顶

[RyuZheng]

我来支持一下，学过前端和 sketch 等课，很有收获

[atcuan]

妹子和女票是一个人么？

[alsotang]

@atcuan 哈哈哈哈

[mikan]

先来支持下，回公司就报名

[johnnyhappy365]

前面的课程就学到了很多，持续支持

[g0thic]

又来支持了

[iamcho]

mark

[xhacker]

窝也想报～

[samael]

支持一下

[forest520]

在深圳的珠三角技术沙龙见过楼主，典型的技术男啊

[tony612]

赞 Tumblr 的视频

[tony612]

话说大大现在首选 flux 是哪个？ redux 么？

[hayeah]

我用 https://github.com/Yomguithereal/baobab 。 基本上就只是用一个模块封装数据，然后模块 export 函数来操作数据 + 监听。

flux 对小应用来说太繁琐了

[hayeah]

@forest520 好久以前了。。。在帝王大夏的那次吗？

[hayeah]

@atcuan 妹子女票老婆老板是同一人。。。自邓小平以来权利最集中的人之一。

[forest520]

@hayeah 是的，当时才知道你搞的小象网

[rayhome1987]

刚听完 teahour 就在这里看到此帖

[hayeah]

@rayhome1987 哈哈真巧~

[namebyrant]

哈哈，想报名，正在学 js 的 iOS 程序

[malcolmyu]

只是想知道隐居大理怎么做程序员……

[Nixus]

想学习，想报名，最近也在自学，读了各种技术文档。
但是，上面那几个问题，我真不知道要怎么回答……虽然门槛不高……

[tinkerer]

@poshboytl 活捉 terry 太

[NemoAlex]

说得太好了，我差点相信未来就是 React 了

[Caringor]

想學，然而工資太少負擔不起學費，支持一下 Howard 苣苣吧。

[lijinma]

支持老大。

[hayeah]

@Nixus 只是想了解你的技术背景而已，想到什么就说什么呗~

[hayeah]

@malcolmyu 自由职业咯

[hayeah]

@NemoAlex 哈哈洗脑！ JavaScript 是世界上第二好的语言，值得学习~

[robinlovemaggie]

@hayeah 仅次于 LISP ，哈哈……

[vtexChushu]

请问地点是在哪？深圳？

[vtexChushu]

@vtexChushu 还是远程？

[iugo]

以前以为 React 只是一个前端库. 怎么就跨平台开发了? 想学学.

和 APICloud (AppCan ), DCloud 不同吗? 对比怎样?

[Vincent720]

远程学习么?

[pythonee]

在南山图书馆见过一次 howard

[Dexter123]

刚毕业。。结果只能算在职了。。然而工资都没领几个月， mac 也买不起。桑心。好想学啊=。=

[miaoever]

帮顶

[hantsy]

@hayeah AngularJS/Ionic 好像更成熟一些吧，去年我们已经在项目使用了，当时 1.0 还没正式发布。最新的版本，一套代码，好像 IOS ， Android 可以套不同排版和样式了。唉，半年没关注了。

[LancerComet]

表示很有兴趣，可是看到上课用 Mac 就 … 全家微软 :(

[jiyinyiyong]

这种事居然不 @ 我们... http://weibo.com/reactchina

[anuo]

@hayeah ,每天的课程大约要花多上时间来完成？

[falcon05]

兄弟牛逼啊

[shuiniushushu]

上次报名了，但是错过了上课，可惜

[NCE]

个个封装成组件，开发效率有点悬

而且只能通过 property 单向通信，，，，，，，，

[beenhero]

叶老师，
我能搭车招带「 React 」光环的「前端工程师」么？



<small style="opacity: 0.1">有意者私信</small>

[coolicer]

react-native 编译后就是原生了吗？

[malcolmyu]

@hayeah 梦寐以求…感觉很滋润

[hayeah]

@vtexChushu 是远程的~ （终于回来回复帖子了 orz ）

[hayeah]

@beenhero 哈哈 -。- 你之前没真的上 NodeJS 嘛~ 有兴趣的话补个差价就好了

[hayeah]

@shuiniushushu 之前 NodeJS 没上的话可以还是可以来哦，补差价就行了

[hayeah]

@iugo APICloud/LeanCloud 这些是后端服务。 React 现在支持多种 “绚烂” 机制。 DOM 是一种， iOS 原生组件是一种。之前还有人搞了个 ncurse 的 React 绚烂层

https://twitter.com/dan_abramov/status/639494815860850688

https://github.com/gaearon/react-blessed-hot-motion

[hayeah]

@coolicer ReactNative 的架构是这样的。。。有个 JS 环境运行环境处理 React/UI 逻辑 /业务逻辑。 React 计算出新的 UI 之后会通过一个桥梁让 iOS 端的 “浏览器” 去计算布局，刷新 UI ，启动动画，等等。

iOS 端上的 “浏览器” 其实就是 iOS 的原生组件构成的，并没有 DOM 或者 CSS 的实现。比如说 <View> 这个组件对应 RCTView 这个原生组件，而 `backgroundColor` 这个 ‘ CSS ’ 属性是通过桥梁去对应 UIView 的背景色。

[hayeah]

@NCE 理解为一个 'partial' 一个组件吧。组件的颗粒度多大按项目需求决定。

[shuiniushushu]

@hayeah 我一看到你就感觉好开心，哈

[hayeah]

@shuiniushushu 啊？我是很有喜感吗？

[loading]

如果能给个 demo 我们看看水平就更有吸引力。

[hayeah]

@loading 课程里要做的应用有视频 demo 啊。帖子里的那些。

[hayeah]

@loading 嗷嗷，移动端上 V2EX 没有绚烂 markdown 。要在左面上看 -。-

[bullettrain1433]

报名报名

[imbahom]

顶， hayeah

[shenchuanli]

图片，是你的娘子么？

[xhowhy]

马克

[hayeah]

@shenchuanli 不是... tumblr 上刷出来的。要不然我就靠她吃软饭了。

[robinlovemaggie]

今天 react native for android 公布了，是不是要加一项内容了？

[Nixus]

@hayeah 请问人满了吗？

[glovenone]

已发，是不是晚了

[sandect]

@hayeah 还有名额没？