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

2015-09-06 11:11:46 +08:00
 hayeah
有兴趣报名话发邮件到 hayeah@gmail.com

![Web 开发的未来,今天就在你的手里]( http://7fvhy7.com1.z0.glb.clouddn.com/react-course-splash.jpg )

# 前端不能只做 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 视频演示]( http://7fvhy7.com1.z0.glb.clouddn.com/tumblr.mp4 )

[![]( http://7fvhy7.com1.z0.glb.clouddn.com/tumblr.jpg )]( http://7fvhy7.com1.z0.glb.clouddn.com/tumblr.mp4 )

### Swipe 任务管理

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

[Swipe 视频演示]( http://7fvhy7.com1.z0.glb.clouddn.com/swype-demo.mp4 )

[![]( http://7fvhy7.com1.z0.glb.clouddn.com/swipe.jpg )]( http://7fvhy7.com1.z0.glb.clouddn.com/swype-demo.mp4 )

# 课程安排

暖身周

+ 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]( http://exponentjs.com/) 开发不需要 Xcode, 你愿意尝试的话也可以报名,但我无法提供技术支持。没有 Mac 愿意折腾还是可以报名,真的不行的话退款 -。-|||

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

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

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

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

# 怎么申请?

发邮件给我: hayeah@gmail.com

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

有兴趣申请发邮件,回答以下问题:

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

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

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

+ 邮箱: hayeah@gmail.com
+ 微信: 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]( http://metacircus.com/writings/2011/09/19/from-the-office-to-travelling-the-world.html ). 那一年第一次来到了天朝。

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

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

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

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

**有兴趣的话发邮件到** hayeah@gmail.com
13777 次点击
所在节点    程序员
71 条回复
miaoever
2015-09-07 19:31:24 +08:00
帮顶
hantsy
2015-09-07 20:15:50 +08:00
@hayeah AngularJS/Ionic 好像更成熟一些吧,去年我们已经在项目使用了,当时 1.0 还没正式发布。最新的版本,一套代码,好像 IOS , Android 可以套不同排版和样式了。唉,半年没关注了。
LancerComet
2015-09-07 20:24:45 +08:00
表示很有兴趣,可是看到上课用 Mac 就 … 全家微软 :(
jiyinyiyong
2015-09-07 22:16:53 +08:00
这种事居然不 @ 我们... http://weibo.com/reactchina
anuo
2015-09-07 22:19:17 +08:00
@hayeah ,每天的课程大约要花多上时间来完成?
falcon05
2015-09-07 22:36:16 +08:00
兄弟牛逼啊
shuiniushushu
2015-09-07 23:36:04 +08:00
上次报名了,但是错过了上课,可惜
NCE
2015-09-08 08:57:48 +08:00
个个封装成组件,开发效率有点悬

而且只能通过 property 单向通信,,,,,,,,
beenhero
2015-09-08 09:37:08 +08:00
叶老师,
我能搭车招带「 React 」光环的「前端工程师」么?



<small style="opacity: 0.1">有意者私信</small>
coolicer
2015-09-08 15:37:08 +08:00
react-native 编译后就是原生了吗?
malcolmyu
2015-09-10 11:49:50 +08:00
@hayeah 梦寐以求…感觉很滋润
hayeah
2015-09-11 10:42:43 +08:00
@vtexChushu 是远程的~ (终于回来回复帖子了 orz )
hayeah
2015-09-11 10:43:27 +08:00
@beenhero 哈哈 -。- 你之前没真的上 NodeJS 嘛~ 有兴趣的话补个差价就好了
hayeah
2015-09-11 10:45:07 +08:00
@shuiniushushu 之前 NodeJS 没上的话可以还是可以来哦,补差价就行了
hayeah
2015-09-11 10:48:55 +08:00
@iugo APICloud/LeanCloud 这些是后端服务。 React 现在支持多种 “绚烂” 机制。 DOM 是一种, iOS 原生组件是一种。之前还有人搞了个 ncurse 的 React 绚烂层

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

https://github.com/gaearon/react-blessed-hot-motion
hayeah
2015-09-11 10:54:38 +08:00
@coolicer ReactNative 的架构是这样的。。。有个 JS 环境运行环境处理 React/UI 逻辑 /业务逻辑。 React 计算出新的 UI 之后会通过一个桥梁让 iOS 端的 “浏览器” 去计算布局,刷新 UI ,启动动画,等等。

iOS 端上的 “浏览器” 其实就是 iOS 的原生组件构成的,并没有 DOM 或者 CSS 的实现。比如说 <View> 这个组件对应 RCTView 这个原生组件,而 `backgroundColor` 这个 ‘ CSS ’ 属性是通过桥梁去对应 UIView 的背景色。
hayeah
2015-09-11 10:55:38 +08:00
@NCE 理解为一个 'partial' 一个组件吧。组件的颗粒度多大按项目需求决定。
shuiniushushu
2015-09-11 11:29:22 +08:00
@hayeah 我一看到你就感觉好开心,哈
hayeah
2015-09-11 11:46:34 +08:00
@shuiniushushu 啊?我是很有喜感吗?
loading
2015-09-11 11:55:28 +08:00
如果能给个 demo 我们看看水平就更有吸引力。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/218523

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX