28个有趣的动手应用创意(动手游戏)

学习编程的时候，创建一个默认的Demo是非常枯燥的。这是头号动机。我不 我不希望我的学生失去动力，然后放弃学习，所以我整合了28个有趣的APP想法，可以在学习React/Ruby on Rails时使用。

假设你已经熟悉Ruby on Rails或者其他后端框架，那么后端部分会相对复杂，前端react部分会相对简单。

Project 1：预约日历（模仿Google Calendar）

这是一个简单的APP，可以慢慢添加更多的功能来完成。可以用来练习嵌套组件。

完整的代码如下:

Project 2：寻找有趣Repo的Github查找应用/learnetto/calreact

Project 2：寻找有趣Repo的Github查找应用

可以把搜索部分完全放在前端，也可以增加一些趣味性，用Rails存储搜索到的数据库，然后显示热门搜索。

您可以练习使用外部API和处理JSON数据，或者尝试在服务器上预先呈现组件。

尝试此项目的浏览器插件:

Project 3：笔记APP github . com/algolia/github-aw

Project 3：笔记APP

您可以添加自动保存来感受React处理状态更改的能力。SimplProject 4：Slack聊天插件/fac

Project 4：Slack聊天插件

使用react-slack-chat组件向Rails网站添加一个聊天插件。大部分工作由组件完成，但定制自己的聊天机器人和插件风格也很有趣。

完整代码:

Project 5：表情包生成器/5punk/react-slack-chat

Project 5：表情包生成器

Rails可以处理图片库和表情包的访问，React用于渲染和制作表情包。还可以使用ImageMagick在后端生成表情。

Project 6：免费图片实时搜索/tranhungt/m

Project 6：免费图片实时搜索

使用Unsplash API获得高质量的免费图片:

Project 7：读书俱乐部/unsplash/unsplash_rb

使用React动画插件Ns添加有趣的动画。

让用户收藏自己喜欢的图片，甚至可以把后端做成Rail API APP，前端做成React APP。

Project 7：读书俱乐部

一个分享讨论书籍的APP，类似Goodreads，可以在后端使用一个简单的Railcrud app，前端使用一个简单的ReactPage，尝试使用React rout

Project 8：Twitter多账号Web客户端（模仿Tweetdeck）

您可以链接多帐户Twitter Web客户端(使用OAuth ),并为不同的功能添加一个列，如推文、通知、搜索、私人消息等。

推特红宝石:

对付这个可笑的API极限，会给你无与伦比的。

你可以添加一个自动获取新推文的功能，可以通过polling或者Action Cable来完成。

有许多嵌套组件。可以在React中尝试简单的动画。

It 最好从构建一个只读函数开始。有了这个功能，可以添加发布、点赞、转发功能。

Project 9：OpenStreetMap自定义UI

您知道OpenStreetMap是一个Rails应用程序吗？

OpenStreetMap Repo可以配置到本机，然后添加一些React前端内容。

Project 10：团队午餐轮盘

一个可以帮助团队选择午餐的网站。Rails后端只需要是一个简单的CRUD应用程序，允许团队成员输入建议的位置。你可以使用Foursquare API进行搜索和自动完成。

用React做一些夸张的动画！

如果你不 如果你不喜欢午餐，你可以喝咖啡或鸡尾酒，或者更刺激的东西。

Project 11：摸鱼之王

Project 12：用Action Cable做聊天室

除了学习React，这是一个使用Action Cable的很棒的小项目，它为Rails添加了WebSockProject 8：Twitter多账号Web客户端（模仿Tweetdeck）/rails/actioncabl

Project 13：Extra Small（复制Medium）

这一系列文章描述了如何使用Rails API app、React和Flux来复制介质。

Project 9：OpenStreetMap自定义UIgithub.com/FancyPixel/small-rails

Project 14：人脸标记器

一个可以上传照片和标记人脸的应用程序(类似于脸书)。基于OpenCV Ruby gProject 10：团队午餐轮盘/ruby-opencv/ruby-opencv

Project 15：ActiveAdmin前端修改

您可能正在使用ActiveAdmin管理应用程序记录。但是它的UI比较单调。您可以尝试一次修改一个视图，并用漂亮的React组件替换它们。查看ActivProject 11：摸鱼之王/activeadmin/activ

Project 16：电商网店

如果你不 如果不想在Rails中构建存储功能，可以使用Spree并专注于练习React前端组件。

Project 12：用Action Cable做聊天室/spr

Project 17：邮箱RSS订阅

您可以使用Mailchimp API或Sendgrid。如果你用过Mailchimp，你会知道你可以尝试构建很多功能——查看/过滤/管理订阅者、设计表单、创建活动等等。

只需选择一个函数并尝试构建它。大部分功能都会涉及到某种形式，所以这是一个把UI分成React组件和一些无状态功能组件的好机会。

Project 18：Gmail on Rails

Gmail 的界面非常复杂，但是您可以从构建一个显示电子邮件的UI开始。或者搜索可能更有趣？

使用google-api-cliProject 13：Extra Small（复制Medium）/markbrown4/gmail-react

Project 19：DJ Spotify

基于Spotify的DJ app。获取建议，创建和混合播放列表，甚至允许其他人将歌曲添加到您的播放列表中。

用Ruby wrappProject 14：人脸标记器/guilh

Project 20：Heroku控制面板

作为一个RaiLs开发者，你可能对HProject 15：ActiveAdmin前端修改/h

Project 21：AWS S3客户端

建立一个漂亮的现代用户界面来管理AWS S3帐户。使用Ruby gProject 16：电商网店/aws/aws-sdk-ruby

Project 22：Stripe数据分析面板

基于条带数据显示分析和图标控制面板。这个API文档很棒，是学习D3的好机会。

Project 1：预约日历（模仿Google Calendar）

Project 17：邮箱RSS订阅/QubitProducts/d3-react-sparklin

Project 23：Google数据分析面板

默认的谷歌数据分析面板非常混乱，让人摸不着头脑。您可以构建一个简洁的版本，只显示最重要的信息。

另一个使用D3的机会，你可以使用另一个库。

Project 24：习惯追踪器

建立一个应用程序来跟踪每天和每周的习惯，例如早上要做的例行事情，健身，跑步，烹饪，冥想，吉他练习和茶道。

看看回路习惯和蔻驰的灵感。

调整移动设备以随时随地使用它。在你熟悉React之后，你甚至可以使用React Nativ

Project 25：健身控制面板

为所有个人健身数据建立一个控制面板，从不同的应用程序中获取数据，并用漂亮的UI显示有用的统计数据。

根据健身app的使用情况，可以很容易的从很多API中获取数据——Fitbit、GooglProject 18：Gmail on Rails/learnetto/reactfit

Project 26：你画我猜（游戏）

做一个你画一个猜谜游戏，可以用画布画画。查看react-sketchbad获取灵感:

Project 19：DJ Spotify/svrcekmichal/react-sketchpad

使用Rails上传和保存图片，并在另一台机器上显示。

提高锻炼:加一个机器学习让机器猜。

Project 27：You Write Like

做一个文本分类app，把你的写作风格和著名作者匹配起来，类似于我写喜欢。

使用classifier-reborn对文本进行分类，使用React处理表单。这个app大部分工作都是后端，尽量做一些UI动画。

Project 20：Heroku控制面板/FormidableLabs/react-animations

Project 28：创意面板

制作一个有创意的面板app，用不同的方形标签展示创意。可用于添加、修改和删除意见。

这里有两个教学视频，你可以逐步学习:

Project 21：AWS S3客户端 learnetto . com/tutorials/rails-5-API-and-react-js-tutorial-how-to-makProject 22：Stripe数据分析面板 learnetto . com/tutorials/how-to-animate-a-component-using-react-transition-group

这些教程涵盖了很多实用的概念，包括无状态功能组件、基于类的组件、使用axios的API调用、immutanbility-helper等等。

现在，您有了许多有趣的想法，所以开始您的React on Rails之旅吧！

翻译自:

首发官方账号:Programming brighter，一个编程布道者