作者|Indrek Lasn
来源|freecodecamp
编译|QiQi
最近，短视频软件抖音大火，各种小哥哥小姐姐唱唱跳跳，好不热闹！在看完一个8块腹肌小哥哥们的合集，又看了看自己肚子上的那连成一块的腹肌，独自黯然伤神！回想之前，那也是看过健身教程无数的，可惜只是理论上的巨人，行动上的侏儒。
仔细想想，在编程方面也是如此啊！不是上过多少课，读过多少书就可以成为大神的，没有投入大量时间和精力去实践，就得不到“8块腹肌”。接下来就为大家准备了“8块小腹肌”，来练练手吧！
第一块：日程管理 
虽然现在各类日程管理软件有不少，但试着做一个自己的定制版是不是看起来特别酷！
通过第一块“小腹肌”，你可以学到：
1)     Routing布局
2)     拖拽效果
3)     创建新的对象（比如：板块, 列表, 卡片）
4)     对于客户端：如何将数据存储到本地存储和从本地存储中读取数据
5)     对于服务器端：如何将数据存储到数据库和从数据库中读取数据
下面给出了一个DEMO样例，代码在GitHub上，它使用到了React+Redux，供大家参考。
https://github.com/wesharehoodies/simple-trello
第二块：用户管理器
这个项目比较简单，类似我们大学时候老师要我们做的很多MIS 系统，包含了简单的 增删改查功能，不过这个小项目对于我们了解一些基本原理还是极好的。
通过这个“小腹肌”，你可以学到：
1)     创建并管理用户
2)     与数据库交互（增删改查）
3)     校验输入（比如邮箱校验，防注入攻击）以及表单的使用
DEMO样例：
https://github.com/wesharehoodies/laravel-5.4-crud-example
第三块：加密货币价格追踪器（原生APP）
前面两个是Web的，接下来一个是原生APP，可用的语言就多了，比如iOS 的话可以用 Swift 或者 Objective-C ， Android 的话可以用 Java 或者新语言 Kotlin。
通过这个“小腹肌”，你可以学到：
1)    如何开发原生APP
2)    通过API获得数据
3)    如何设计原生APP的布局
4)    如何使用移动模拟器
教程：
https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092
项目中用到的API：
https://coinmarketcap.com/api/
第四块：从头开始配置自己的webpack
从技术上讲，webpack不是一个应用程序，它是一个开源的前端打包工具。我们从头对它进行配置，就可以很好的了解他是如何在后台运行的，这一点对我们非常重要的。
要学习这个“小腹肌”，你可以学到：
1)     把jsx文件编译成js文件，把vue文件编译成js文件
2)     安装webpack开发服务器和热模块重载（HMR）。
3)     如何通过Heroku，now.sh 或者 Github pages部署webpack项目
4)     配置你自己习惯的预处理器（比如 scss, less和stylus）来编译出标准的CSS
5)     如何通过webpack使用SVG（可缩放矢量图形）等图片
教程：
https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e
第五块：类HackerNews的网站
HackerNews是一个一家关于计算机黑客和创业公司的社会化新闻网站，界面十分极(jian)客(lou)的，没有太多花哨的东西，让我们可以更加关注新闻本身。当然了，我们也可以开发一个定制版本，把我们自己想要的加进去喽。
通过这个“小腹肌”，你可以学到：
1)     与Hacker News API进行交互（HackerNews API）
2)     创建单页APP
3)     如何实现诸如查看评论、评论、配置文件等功能
4)      Routing布局
Hacker News API:
https://github.com/HackerNews/API
第六块：备忘录
开什么玩笑，备忘录所有手机都自带加上第三方的，早就烂大街，但是你真的会开发一个称手的备忘录应用吗？
可以在最开始的时候尝试用最基本的JavaScript语言实现，然后再使用您最喜欢的框架/JS库，开发一个定制版本的备忘录，可以帮助我们巩固基础知识。
通过这个“小腹肌”，你可以学到：
1)     如何创建、完成新任务
2)     字段验证知道如何过滤备忘录状态（完成，代办等），了解filter（过滤器）和reduce（清理）的功能
3)     巩固JavaScript的基础知识
DEMO样例:
http://todomvc.com/examples/react/#/
第七块：可排序的拖放列表
实现这个列表非常的有用，尤其对于理解拖放API特别有意义，而且可以做出一些非常酷炫的效果，吸引眼球！
通过这个“小腹肌”，你可以学到：
1)     深入了解拖放API
2)     丰富UI的设计
拖放API：
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
第八块：类Messenger应用
也许你对Messenger不是太了解，其本质是一款即时通讯的APP，和我们每天用的微信是一样的。熟悉原生APP的开发和网络APP的工作原理，会让你在求职者中脱颖而出。
通过这个“小腹肌”，你可以学到：
1）即时通讯方面的网络Socket
2)  如何开发原生APP
3)  如何设计原生APP的布局
整理就到这里吧，剩下的就靠各位小伙伴自己去练习了，祝大家早日习得“8块腹肌”，我也要继续“健身”了！
想进阶的小伙伴也可以参加BitTiger提供的课程，我们为大家提供大量工业级专业项目。欢迎大家点击阅读原文查看详情哟！
继续阅读
阅读原文