想成为顶级开发者吗？亲自动手实现经典案例

译者按： Github 上资源很多，关键在于如何有效挖掘！

本文采用意译，版权归原作者所有

只有努力去实践，你才可能成为一个厉害的开发者！我举一个形象的例子：你不可能因为仅仅读了几本如何健身的书就变得身材棒棒哒，你真正需要的是去健身房挥洒汗水。编程也有同样的奥妙在里面。

这里我列出 8 个很棒的项目可以用来锻炼你的编程“肌肉”！目标是使用任何你熟悉的技术把每一个应用实现出来。当然，写代码少不了会写 bug，Debug 就用 Fundebug！

1. 克隆 Trello

这里是 Indrek Lasn 的一个 Demo: Cloned Trello。
克隆一个 Trello，你可以学到：

路由技术(Routing)
拖放技术(Drag and drop)
创建新的对象(面板、列表、卡片)
处理输入并且验证数据
客户端：如何使用 local storage，将数据存到 local storage，从 local storage 读取数据
服务端：如何使用数据库，将数据存到数据库，从数据库读取数据

这里是一个用 React 和 Redux 实现的代码示例: simple-trell

2. 管理面板

示例来自: laravel-5.4-crud-example on Github

这是一个简单的 CRUD 应用，对于掌握基础很有用。你会学到：

创建用户、管理用户
和数据库交互：创建、读取、编辑、删除用户
输入验证和表单处理

3. 虚拟货币追踪(原生移动应用)

示例来自: react-native-redux-crypto-tracker on Github

这是一个原生应用，由 Swift、Object-C、React Native、Java、Kotlin 开发。

你会学到：

原生应用如何工作
从 API 获取数据
原生应用如何布局
如何使用手机模拟器

4. 从 0 开始个性化配置自己的 webpack 配置

恩，从技术上说这不是一个应用，但是对于理解 webpack 底层如何工作十分有用。对于你来说，webpack 不再是一个黑盒子(blackbox)，而是一个非常强力的工具。

需求：

把 es7 编译到 es5。（基础）
把 jsx 编译到 js 或则.vue 到.js。（你会学到 loaders)
配置 webpack 开发服务器(dev server)，以及模块热加载(hot reloading)。（vue-cli 和 create-react-app 使用了这些技术）
使用 webpack 构建一个生产版本并部署到 Heroku、now.sh 或则 Github pages。（你会学到如何部署 webpack 项目）
配置你最喜欢的 css 预处理器将 scss、less、stylus 编译到 css。
学会配合 webpack 使用 image 和 svg。

这里有很多对于初学者的资源：How to setup Webpack +2.0 from scratch in 2017

5. 克隆 Hackernews

每个人都喜欢去实现自己版本的 hacker news - 我们也来吧^_^！

你会学到：

和 hackernews API 交互
创建单页面应用
实现一些功能：查看评论、单个评论、个人资料
路由

这里是 Hacker News 的 API 文档：Hacker News API。

6. Todo App

示例来自：todomvc 官网

真的吗？一个 todo 应用？已经有多少个了！是的，我知道。不过，听我说，它如此流行是有原因的。

todo 应用是一个掌握基础知识很好的方式。可以尝试用基本的 vanilla JavaScript 来编写整个应用，然后再使用你最喜欢的框架或则库再来写一遍。

你会学到：

创建新任务
输入验证
过滤任务(完成、正在做、所有)。请使用 filter 和 reduce 函数
学习 JavaScript 的基础

7. 一个可以排序的拖放列表

示例来自：atlassian/react-beautiful-dnd

对于理解拖放 api 很有用。如果你会使用这些 api，那么比必然与众不同。
你会学到：

拖放 api
创建富 UI

8. 克隆聊天应用(原生应用)

如果你同时会原生和网页应用开发，那么你将超然于众人！
你将会学到：

Websockets（实时通讯）
原生应用如何工作
原生应用如何布局
原生应用如何路由

这些资源可以让你忙一到两个月了。来吧，开始动手吧！

以上提供的一些练习项目希望能够助你锻炼开发的能力，就像Fundebug能够助你 Debug 一样！

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/06/05/the-secret-to-be-top-fe/

您的用户遇到BUG了吗？

体验Demo 免费使用