譯者按: Github上資源不少,關鍵在於如何有效挖掘!css
- 原文: Want to be a top developer? You should build things. Here’s another list to get you started.
- 譯者: Fundebug
爲了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原做者全部,翻譯僅用於學習。vue
只有努力去實踐,你纔可能成爲一個厲害的開發者!我舉一個形象的例子:你不可能由於僅僅讀了幾本如何健身的書就變得身材棒棒噠,你真正須要的是去健身房揮灑汗水。編程也有一樣的奧妙在裏面。react
這裏我列出8個很棒的項目能夠用來鍛鍊你的編程「肌肉」!目標是使用任何你熟悉的技術把每個應用實現出來。固然,寫代碼少不了會寫bug,Debug就用Fundebug!webpack
1. 克隆Trello
這裏是Indrek Lasn的一個Demo: Cloned Trello。
克隆一個Trello,你能夠學到:laravel
- 路由技術(Routing)
- 拖放技術(Drag and drop)
- 建立新的對象(面板、列表、卡片)
- 處理輸入而且驗證數據
- 客戶端:如何使用local storage,將數據存到local storage,從local storage讀取數據
- 服務端:如何使用數據庫,將數據存到數據庫,從數據庫讀取數據
這裏是一個用React和Redux實現的代碼示例: simple-trellgit
2. 管理面板
示例來自: laravel-5.4-crud-example on Githubgithub
這是一個簡單的CRUD應用,對於掌握基礎頗有用。你會學到:web
- 建立用戶、管理用戶
- 和數據庫交互:建立、讀取、編輯、刪除用戶
- 輸入驗證和表單處理
3. 虛擬貨幣追蹤(原生移動應用)
示例來自: react-native-redux-crypto-tracker on Githubvue-cli
這是一個原生應用,由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同樣!