✅ Minden alkalommal, amikor elkészít egy tennivaló alkalmazást, egy kiskutya? meghal?

Tudod, amikor valami újat próbálsz megtanulni, de nagyon unod már az alapértelmezett példaalkalmazás felépítését?

Ez az 1. számú motiváció KILLER.

Nem akarom, hogy tanítványaim demotiválódjanak és feladják.

Tehát elkészítettem ezt a gigantikus listát 28 szórakoztató alkalmazásötletből, amelyeket felépíthet, miközben megtanulja a React with Ruby on Rails használatát.

Ez a lista feltételezi, hogy már jól érzi magát a Ruby on Rails (vagy más webfejlesztési keretrendszer). Tehát a backend bit egy kicsit bonyolult lehet a kezdők számára, de az elülső React bitnek viszonylag egyszerűnek kell lennie.

1. projekt: Naptár alkalmazás találkozók lebonyolítására (például a Google naptár)

Ez egyszerű alkalmazásként indulhat, amelyet fokozatosan javíthat további szolgáltatások és UX-fejlesztések hozzáadásával.

Ez segít gyakorolni a beágyazott összetevők használatát (például napi komponens, beágyazott egy héten belüli vagy beágyazott egy hónapos összetevőben).

Ezt példaként használom a Free Complete React on Rails tanfolyamomon. Tehát nézd meg, ha ki akarod próbálni.

A teljes lépésenkénti kódot itt láthatja:

learnetto / calreact

calreact - React and Rails 5 naptári találkozó app github.com

2. projekt: Github explorer alkalmazás érdekes kódtárak megtalálásához

A keresési részt pusztán az ügyféloldalra építheti, de szórakoztatóbbá teheti azt, ha a Rails segítségével tárolja a kereséseket egy adatbázisban, és megmutatja a legnépszerűbb kereséseket.

Gyakorolni fogja egy külső API használatát és a JSON válasz kezelését. Kísérletezhet az összetevő előzetes megjelenítésével a szerveren.

Tekintse meg az Algolia ezen böngészőbővítményét, hogy folyjon az ötletlé:

algolia / github-awesome-autocomplete

github-awesome-autocomplete -: octocat: Azonnali keresési képességek hozzáadása a GitHub keresősávjához github.com

3. projekt: Jegyzetelő alkalmazás

Láthatta, hogy a React képes-e sok állapotváltozást kezelni, például az automatikus mentés engedélyezésével. Nézze meg a Simplenote alkalmazást, ahol jó példa található egy egyszerű, de hatékony jegyzetek alkalmazásra.

Ha ez túl nehéz első alkalmazásként, először kipróbálhatja egy külső szövegszerkesztő összetevőt, hogy megtudja, hogyan működik, majd hajtsa végre a sajátját:

facebook / draft-js

draft-js - A React keretrendszer a szövegszerkesztők felépítéséhez. github.com

4. projekt: Adjon hozzá egy Slack chat modult a webhelyéhez

A reak-slack-chat komponens segítségével csevegőmodult adhat hozzá a meglévő Rails webhelyhez. Az alkatrész a legnehezebb emelést végzi, de jól érezheti magát, ha saját botot készít a Rails-ben, és a widgetet testreszabja a React-ben.

Az összetevő kódja a Githubon található:

5punk / reagál-laza-chat

react-slack-chat - Egy gyönyörű Gooey / Material Design Slack Chat webintegrációs widget. github.com

5. projekt: Meme generátor

A Rails képes kezelni a képtár és a meglévő mémek tárolását és kiszolgálását. A mém elkészítéséhez használja a React alkalmazást az űrlap megjelenítéséhez és kezeléséhez.

Létrehozhatta a mémet a szerveren az ImageMagick segítségével, vagy a böngészőben a vászon segítségével. Lásd a Hung Tran ezt a repo-t:

tranhungt / mémkészítő

mémkészítő - Készítse el kedvenc mémjeit, és küldje el barátjának! github.com

6. projekt: Valós idejű ingyenes képkereső alkalmazás

Használja az Unsplash API-t a kiváló minőségű ingyenes fotókhoz:

unsplash / unsplash_rb

unsplash_rb - Rubin burkoló az Unsplash API-hoz. github.com

Adjon hozzá jó animációkat a React Animation bővítmények használatával.

Engedélyezheti a felhasználók számára, hogy kedvenc képeiket könyvjelzővel ellátják. Kísérletezhet azzal is, hogy a háttérprogram csak egy Rails API alkalmazás legyen, és készítsen egy külön React alkalmazást a kezelőfelület számára.

7. projekt: Könyvklub

Egy egyszerű alkalmazás, ahol Ön és barátai megoszthatják kedvenc könyveit és megvitathatják azokat (például a Goodreads). A háttér lehet egy egyszerű Rails CRUD alkalmazás, de az elülső oldalt egyoldalas React alkalmazássá teheti, és a React routerrel és a Redux-szal játszik.

8. projekt: Twitter webes kliens több fiókhoz (például Tweetdeck)

Egy Twitter webes kliens alkalmazás, amelyben egynél több Twitter-fiókot csatlakoztathat (az OAuth használatával), majd több oszlopot is hozzáadhat a felhasználói felülethez - például a hírcsatornához, az értesítésekhez, a kereséshez és a közvetlen üzenetekhez.

Használja Erik Michaels-Ober Twitter gyöngyszemét:

sferik / twitter

twitter - Ruby felület a Twitter API-hoz. github.com

Ez páratlan örömöt jelent számodra a nevetséges API-ráták kezelésében a világ legfejlesztőbarátabb vállalatától.

Hozzáadhatja a Tweetdeck stílusú új tweetek és értesítések automatikus lekérését a szavazás vagy az Action Cable segítségével.

Sok beágyazott komponens, és kipróbálhat néhány egyszerű animációt a React-ben.

Legjobb lehet az olvasási képességek kiépítésével kezdeni. Ha ez megvan, hozzáadhatja a közzététel, a like és a retweet lehetőségét.

9. projekt: OpenStreetMap egyéni felhasználói felület

Tudta, hogy az OpenStreetMap webhely egy Rails alkalmazás?

Itt kaphatod a repót, beállíthatod a saját gépedre, majd a React-et hozzáadhatod a kezelőfelülethez!

openstreetmap / openstreetmap-weboldal

openstreetmap-website - A sínek tükre tápellátás // // www.openstreetmap.org

10. projekt: Csapat ebéd rulett

Webhely, amely segít eldönteni, hová menjen ebédelni a csapatával. A Rails háttérprogramnak csak egy egyszerű CRUD alkalmazásnak kell lennie, amely lehetővé teszi a csapattagok számára, hogy javaslatokat adjanak meg. Használhatja a Foursquare API-t a kereséshez és az automatikus kiegészítéshez.

És használja a React nevetséges animációkhoz!

Ha nem éppen ebédel, akkor kávézzon, koktélozzon, vagy valami más izgalmasabb legyen.

11. projekt: Szuper halogató

Egyetlen webhely, amelyen eljuthat a munka elkerülése érdekében - olvassa el a Reddit, a Hacker News, a Product Hunt, a Medium, a Slashdot és egyebeket egy helyen.

Használja a Rails háttérképet a felhasználói fiókok és beállítások mentéséhez, valamint a különböző API-kkal való beszélgetéshez. Az API-kból adatokat közvetlenül az ügyfél felől is be lehet szerezni.

Szeretné velem elkészíteni ezeket az alkalmazásokat? Gyere, nézd meg a Free Complete React on Rails tanfolyamomat, ahol megtanítalak, hogyan legyél profi a React with Rails használatában, miközben szórakoztató dolgokat építesz.

12. projekt: Csevegőszoba akció kábellel

A React megtanulása mellett ez egy nagyszerű projekt lenne az Action Cable kipróbálására, egy remek új Rails 5 szolgáltatásra, amely a WebSocket támogatást nyújtja a Rails számára. A kezdéshez lásd ezeket a példákat:

sínek / cselekvőképes példák

actioncable-példák - Action Cable Példák github.com

13. projekt: Extra kicsi (közepes klón)

Nézze meg Andrea Mazzini blogbejegyzések sorozatát, amelyben részletesen leírja, hogyan épített egy közepes klónot egy Rails API alkalmazással, a React és a Flux segítségével.

FancyPixel / kis sínek

kis sínek - kicsi, a Medium apró klónja. Rails API github.com FancyPixel / small-frontend

small-frontend - kicsi, a Medium apró klónja. React + Flux frontend github.com

A Flux használata nélkül is elkészítheti, de érdemes lehet megpróbálni, ha megfelel a kihívásnak.

14. projekt: Arccímkéző

Egy alkalmazás, ahová fényképeket tölthet fel és címkézheti meg az embereket (például a Facebookon). Használja az OpenCV Ruby drágakövet az automatikus arcfelismeréshez:

ruby-opencv / ruby-opencv

ruby-opencv - Az OpenCV drágakövének változatos villája a Ruby számára github.com

15. projekt: ActiveAdmin a szteroidokon

Valószínűleg az ActiveAdmin programot használta az alkalmazásrekordok kezeléséhez. De a felhasználói felület nem éppen inspiráló. Ezt úgy változtathatja meg, hogy egyszerre egy nézetet vesz fel, és szépen kialakított React komponenssé alakítja.

Itt tekintheti meg az ActiveAdmin kódot:

activeadmin / activeadmin

activeadmin - A Ruby on Rails alkalmazások adminisztrációs kerete. github.com

16. projekt: E-kereskedelmi áruház

Lekvár, sör, angliai zászlók, curry, mindezt a React on Rails szolgáltatja fel. Ha nem szeretné felépíteni az áruház funkcióit a Rails szolgáltatásban, használja a Spree alkalmazást, és összpontosítson a React komponensek gyakorlására a kezelőfelületen.

mulatság / mulatság

spree - A Spree egy teljes, nyílt forráskódú e-kereskedelmi megoldás a Ruby on Rails számára. github.com

Találd ki? Ezt az online áruház ötletet oktatóanyagok sorozatában építem. Az első itt jelenik meg a freeCodeCamp blogon! Ügyeljen arra, hogy kövessen a Mediumon, és regisztráljon a Learnetto-ra, hogy a postaládájába kerüljön.

17. projekt: Csak Mail No Chimp

E-mailes hírlevél alkalmazás, jó felhasználói felülettel, amely nem veti fel a haját. És nincs aranyos majom hülyeség?

Továbbra is használhatja a Mailchimp API-t vagy a Sendgrid-et. Ha használta a Mailchimp szolgáltatást, akkor tudja, hogy rengeteg olyan funkcióval próbálkozhat, amelyeket ki lehet próbálni - előfizetők megtekintése / szűrése / kezelése, űrlapok tervezése, kampányok létrehozása és egyebek.

Csak válasszon ki egy funkciót, és próbálja kiépíteni. A legtöbb funkció valamilyen formát tartalmaz, ezért jó gyakorlatnak kell lennie az UI React komponensekre történő felosztására, amelyek kezelik az állapotot és néhány hontalan funkcionális komponenst.

18. projekt: Gmail a Rails-en

A Gmail meglehetősen összetett felhasználói felülettel rendelkezik, de kezdheti azzal, hogy csak felépíti a felhasználói felületet az e-mailek listázására és olvasására. Vagy talán a keresés szórakoztatóbb lehet?

Használja a google-api-client drágakövet, és nézze meg ezt a fantasztikus React oktatóanyagot és Mark Brown kódrepót a kezdéshez:

markbrown4 / gmail-reagál

gmail-reagál - React.js oktatóanyag - Gmail github.com

19. projekt: DJ Spotify

A Spotify tetejére épített DJ'ing alkalmazás. Kérjen ajánlásokat, hozzon létre és keverjen össze lejátszási listákat, és engedje meg, hogy mások is hozzáadjanak dalokat a lejátszási listákhoz.

Használjon Ruby wrapper drágakövet a Spotify API-hoz:

guilhermesad / rspotify

rspotify - Rubin burkoló a Spotify Web API github.com webhelyhez

Korábban már építettem vele egy apró kis alkalmazást, és nagyon egyszerűen használható. A Spotify csak magát a zenét teszi lehetővé saját alkalmazásokkal történő lejátszáshoz, ezért az alkalmazást együtt kell futtatnia.

20. projekt: Heroku műszerfal

A Rails fejlesztőként valószínűleg nagyon ismeri Heroku-t. Félelmetes szolgáltatás a Rails alkalmazások gyors telepítéséhez és tárolásához - tökéletes, ha sok apróságot készít a tanuláshoz

Készítsen egy egyszerű irányítópultot, amely felsorolja az alkalmazásokat, és lehetővé teszi a legfontosabb információk gyors megtekintését mindegyikről. Második lépésként hozzáadhatja a szerkesztési lehetőségeket.

Használja ezt a drágakövet a Heroku API eléréséhez:

heroku / platform-api

platform-api - Ruby HTTP kliens a Heroku API github.com webhelyhez

21. projekt: AWS S3 kliens

Készítsen egy szép, modern felhasználói felületet az AWS S3-fiók kezeléséhez. Használja a Ruby drágakövet, és kezdje el egy egyszerű fájlböngésző összetevő felépítésével. Ezután adjon hozzá egy űrlapkomponentust a fájlok feltöltéséhez.

aws / aws-sdk-ruby

aws-sdk-ruby - A Ruby hivatalos AWS SDK-ja. github.com

22. projekt: Csík elemző műszerfal

Irányítópult néhány statisztika és diagram megjelenítése a Csík adatok alapján. Az API nagyon jól dokumentált, és ez nagyszerű esély a D3 használatának kipróbálására a React-lel (nézd meg ezt és ezt).

23. projekt: Google elemzési irányítópult

Az alapértelmezett Google Analytics webes irányítópult rendetlen és zavaros. Készíthet egy egyszerűbbet, amely csak a legfontosabb információkat mutatja.

Újabb lehetőség a D3 használatára, vagy kipróbálhat egy másik könyvtárat.

Ezzel a drágakővel érheti el a GA API-t.

24. projekt: Habit Tracker

Készítsen egy alkalmazást a napi és heti szokások nyomon követésére - reggeli rutin, tornaterem, futás, főzés, meditáció, gitárgyakorlat, tea-szertartások?

Inspirációért nézze meg a Loop Habit Trackert vagy az edzőt.

Tegye mobilbaráttá, hogy útközben is használhassa. Ha jól érzed magad a React-ben, akár a React Native segítségével mobilalkalmazást is készíthetsz.

25. projekt: Fitness műszerfal

Készítsen egy irányítópultot az összes személyes fitnesz adatához, amely különböző alkalmazásokból gyűjti be az adatokat, és hasznos statisztikákat mutat be egy szép felhasználói felületen.

Attól függően, hogy mit használ Ön, családja és barátai, könnyedén behúzhat adatokat számos API-ból - Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings és még sok más!

Akár megengedheti a felhasználónak, hogy manuálisan adja meg az adatokat olyan egyszerű dolgokhoz, mint a súlykövetés és a testmozgás.

Kezdheti azzal, hogy csak jelentéseket mutat be, majd tovább javíthatja új funkciókkal, például jegyzetek hozzáadásával és megosztással.

Felépítettem egy egyszerű irányítópultot a Fitbit adataihoz. Lásd a kódot itt:

learnetto / reactfit

reaktivitás - A Rails 5.1 és a React.js github.com használatával felépített fitnesz irányítópult-alkalmazás

26. projekt: Találd meg a vázlatomat (játék)

Készítsen rajzalkalmazást, amelyben egérrel rajzolhat, és egy barátjának meg kell tippelnie, mit rajzolt. Használhatja a vásznat a rajzoláshoz. Lásd Michal Svrček reakció-vázlatfüzetét néhány ötlettel a kezdéshez:

svrcekmichal / react-sketchpad

reakció-vázlatpad - Vázlati pad a github.com vászon segítségével készült

A Rails segítségével töltse fel és mentse el a rajzot, és mutassa meg valakinek egy másik számítógépen.

Fejlett szórakozásként adjon hozzá gépi tanulást, és találgassa a számítógépet?

27. projekt: Tetszik

Készítsen egy szövegosztályozó alkalmazást, amely megfelel az írás stílusának egy híres szerzőhöz - akárcsak az I Write Like (készítette: Dmitry Chestnykh).

Használja a class osztályozó-újjászületést a szöveg osztályozásához, a React pedig az űrlap kezeléséhez. Ez az alkalmazás többnyire háttérigényes, ezért kísérletezzen néhány felhasználói felület-animációval. Nézze meg ezt a repót néhány jó ötletért:

FormidableLabs / reakció-animációk

reagálás-animációk - Animációk gyűjteménye a github.com inline stílusú könyvtárakhoz

28. projekt: Ötlettábla

Készítsen egy Idea tábla alkalmazást egy Rails 5.1 API alkalmazás és egy külön React alkalmazás segítségével, amely a React alkalmazás létrehozása segítségével készült. Az Idea tábla egy egyszerű tábla, amely négyzet alakú csempék formájában jeleníti meg az ötleteket. Hozzáadhat ötleteket, szerkesztheti a meglévő ötleteket és törölheti azokat.

Ezt már megépítettem! Nézze meg ezt a két oktatóanyagot, amelyek bemutatják, hogyan lehet ezt a lépést lépésről lépésre felépíteni:

1. rész:

Rails 5 API és React.js oktatóanyag - Hogyan készítsünk egy Idea fórum alkalmazást | Learnetto

Rails 5 API és React.js oktatóanyag - Hogyan készítsünk egy Idea fórum alkalmazást | Learnettolearnetto.com

2. rész:

Hogyan animálhat egy összetevőt a React Transition Group | Learnetto

Hogyan animálhat egy összetevőt a React Transition Group | Learnettolearnetto.com

Ezek az oktatóanyagok sok gyakorlati fogalmat tartalmaznak, ideértve a hontalan funkcionális komponenseket, az osztályalapú összetevőket, az axiózák használatát az API-hívások kezdeményezéséhez, a megváltoztathatatlanság segítőjét és még sok mást.

Ez egy csomó érdekes ötlet az Ön számára, hogy elindítsa a React on Rails utazást!

Szeretné velem elkészíteni ezeket az alkalmazásokat? Gyere, nézd meg az ingyenes oktatóanyagokat a React, a Rails és a Learnetto.com webhelyen.

Van más ötleted? Oszd meg őket az alábbi válaszban.

Kérem ? r ajánlás / taps? és ossza meg ezt a cikket!