✅ Hver hvalp, du bygger en to-do-app, en hvalp? dør?

Du ved, hvornår du prøver at lære noget nyt, men keder dig virkelig virkelig ved at oprette standardeksemplet på appen?

Det er motivation1 motivationen KILLER.

Jeg vil ikke have, at mine elever bliver demotiverede og giver op.

Så jeg lavede denne gigantiske liste over 28 sjove appideer, du kan bygge, mens du lærer at bruge React with Ruby on Rails.

Denne liste antager, at du allerede er fortrolig med Ruby on Rails (eller en anden ramme til webudvikling). Så backend bit kan være lidt kompleks for begyndere, men frontend React bit skal være relativt enkel.

Projekt nr. 1: En kalender-app til at foretage aftaler (som Google-kalender)

Dette kan starte som en simpel app, som du gradvist kan forbedre ved at tilføje flere funktioner og UX-forbedringer.

Det hjælper dig med at øve dig i at bruge indlejrede komponenter (som en dagskomponent, indlejret i en uges komponent eller en indlejret inde i en månedskomponent).

Jeg bruger dette som en eksempelapp i mit gratis komplette React on Rails-kursus. Så tjek det ud, hvis du vil prøve dette.

Du kan se den fulde trin-for-trin-kode her:

learningetto / calreact

calreact - React and Rails 5 kalender aftale app github.com

Projekt nr. 2: En Github explorer-app til at finde interessante kodeopbevaringssteder

Du kan bygge søgningsdelen udelukkende på klientsiden, men du kan gøre det sjovere ved at gemme søgningerne i en database ved hjælp af Rails og vise de mest populære søgninger.

Du vil øve på at bruge en ekstern API og håndtere JSON-svaret. Du kan eksperimentere med præ-gengivelse af komponenten på serveren.

Se dette browser plugin fra Algolia for at få din idé juice til at flyde:

algolia / github-awesome-autocomplete

github-awesome-autocomplete -: octocat: Tilføj øjeblikkelig søgefunktion til GitHubs søgefelt github.com

Projekt nr. 3: En app til notering

Du kunne se styrken ved React, der håndterer mange tilstandsændringer, f.eks. Ved at aktivere automatisk lagring. Tjek Simplenote for et godt eksempel på en simpel, men kraftfuld notesapp.

Hvis det er for svært som en første app, kan du først prøve at bruge en ekstern teksteditor-komponent til at lære, hvordan den fungerer, og derefter implementere din egen:

facebook / draft-js

draft-js - En React-ramme til opbygning af teksteditorer. github.com

Projekt nr. 4: Tilføj en slap chat-widget til dit websted

Brug react-slack-chat-komponenten til at tilføje en chatwidget til dit eksisterende Rails-websted. Komponenten gør det meste af det tunge løft, men du kan have det sjovt ved at lave din egen bot i Rails og tilpasse widgeten i React.

Koden for komponenten findes på Github:

5punk / reager-slap-chat

react-slack-chat - En smuk klæbrig / materialedesign Slack Chat-web-integrerende widget. github.com

Projekt nr. 5: Meme generator

Skinner kan håndtere lagring og betjening af et billedbibliotek og eksisterende memer. Brug React til gengivelse og håndtering af formularen til oprettelse af meme.

Du kan generere meme på serveren ved hjælp af ImageMagick eller i browseren ved hjælp af lærred. Se denne repo af Hung Tran:

tranhungt / meme-maker

meme-maker - Lav dine yndlingsmeme og send dem til din ven! github.com

Projekt nr. 6: Realtids gratis billedsøgningsapp

Brug Unsplash API til gratis fotos i høj kvalitet:

unsplash / unsplash_rb

unsplash_rb - Ruby wrapper til Unsplash API. github.com

Tilføj cool animationer ved hjælp af React Animation Add-Ons.

Tillad brugere at bogmærke deres yndlingsbilleder. Du kan endda eksperimentere med at lave backend bare til en Rails API-app og oprette en separat React-app til frontend.

Projekt nr. 7: Bogklub

En simpel app, hvor du og dine venner kan dele dine yndlingsbøger og diskutere dem (som Goodreads). Bagenden kan være en simpel Rails CRUD-app, men du kan gøre frontenden til en enkelt side React-app og lege med React-router og Redux.

Projekt nr. 8: Twitter-webklient til flere konti (som Tweetdeck)

En Twitter-webklientapp, hvor du kan oprette forbindelse til mere end en Twitter-konto (ved hjælp af OAuth) og derefter tilføje flere kolonner til brugergrænsefladen - til ting som feed, meddelelser, søgning, direkte beskeder.

Brug Twitter-perlen af ​​Erik Michaels-Ober:

sferik / twitter

twitter - En Ruby-grænseflade til Twitter API. github.com

Dette giver dig den uovertrufne glæde ved at håndtere de latterlige API-grænser fra det mest udviklervenlige firma i verden.

Du kan tilføje Tweetdeck-stil automatisk hentning af nye tweets og meddelelser ved hjælp af polling eller Action Cable.

Masser af indlejrede komponenter, og du kan prøve nogle enkle animationer i React.

Det kan være bedst at starte med at opbygge kun læsefunktioner. Når du har det, kan du tilføje muligheden for at sende, like og retweet.

Projekt nr. 9: OpenStreetMap brugerdefineret brugergrænseflade

Vidste du, at OpenStreetMap-webstedet er en Rails-app?

Du kan få repoen her, sætte den op på din egen maskine og derefter tinker med at tilføje React til frontenden!

openstreetmap / openstreetmap-websted

openstreetmap-website - Mirror of the Rails-applikationen, der driver //www.openstreetmap.org (hostet på git: // git… github.com

Projekt nr. 10: Team frokostroulette

Et websted, der hjælper dig med at beslutte, hvor du skal spise frokost med dit team. Rails-backend skal bare være en simpel CRUD-app, der lader teammedlemmer indtaste stedforslag. Du kan bruge Foursquare API til søgning og automatisk komplet.

Og brug React til nogle latterlige animationer!

Hvis du ikke er til frokost, skal du lave kaffe eller cocktails eller noget andet mere spændende.

Projekt nr. 11: Super Procrastinator

Et enkelt websted, du kan gå for at undgå arbejde - læs Reddit, Hacker News, Product Hunt, Medium, Slashdot og mere på ét sted.

Brug Rails-backend til at gemme brugerkonti og præferencer og tale med de forskellige API'er. Du kan også hente data fra API'erne direkte fra klientsiden.

Vil du bygge disse apps med mig? Kom, tjek mit gratis komplette React on Rails-kursus, hvor jeg vil lære dig, hvordan du kan være en proff ved at bruge React with Rails, mens du bygger nogle sjove ting.

Projekt nr. 12: Chatroom med Action-kabel

Ud over at lære React, ville dette være et godt lille projekt til at afprøve Action Cable, en sej ny Rails 5-funktion, der tilføjer WebSocket-support til Rails. Se disse eksempler for at komme i gang:

skinner / handlingskabel-eksempler

actioncable-eksempler - Actionkabeleksempler github.com

Projekt nr. 13: Ekstra lille (en medium klon)

Tjek denne serie blogindlæg af Andrea Mazzini, hvor han detaljeret beskriver, hvordan han byggede en Medium klon med en Rails API-app, React og Flux.

FancyPixel / små skinner

små skinner - Lille, en lille klon af Medium. Rails API github.com FancyPixel / small-frontend

lille frontend - Lille, en lille klon af Medium. React + Flux frontend github.com

Du kan bygge det uden at bruge Flux, men det kan være værd at prøve, hvis du er klar til udfordringen.

Projekt nr. 14: Face tagger

En app, hvor du kan uploade fotos og tagge folk (som på Facebook). Brug OpenCV Ruby-perlen til automatisk ansigtsregistrering:

ruby-opencv / ruby-opencv

ruby-opencv - Versionsgaffel af OpenCV-perlen til Ruby github.com

Projekt nr. 15: ActiveAdmin på steroider

Du har sandsynligvis brugt ActiveAdmin til at administrere dine app-poster. Men brugergrænsefladen er ikke ligefrem inspirerende. Du kan ændre det ved at tage en visning ad gangen og gøre det til en pænt stylet React-komponent.

Se på ActiveAdmin-koden her:

aktiveadmin / aktiveadmin

activeadmin - Administrationsrammen for Ruby on Rails-applikationer. github.com

Projekt nr. 16: En e-handelsbutik

Marmelade, øl, Englands flag, karry, alt serveret af React on Rails. Hvis du ikke vil opbygge butiksfunktionerne i Rails, skal du bare bruge Spree og fokusere på at øve React-komponenter til frontenden.

spree / spree

spree - Spree er en komplet open source e-handelsløsning til Ruby on Rails. github.com

Gæt hvad? Jeg bygger denne onlinebutikidee i en række tutorials. Den første vil blive offentliggjort lige her på freeCodeCamp-bloggen! Sørg for at følge mig på Medium og tilmeld dig Learnetto for at få det i din indbakke.

Projekt nr. 17: Mail bare ingen chimpanse

En nyhedsbrevsapp med e-mail med et godt brugergrænseflade, der ikke får dig til at rive dit hår ud. Og ingen sød abe nonsens?

Du kan stadig bruge Mailchimp API eller bruge Sendgrid. Hvis du har brugt Mailchimp, ved du, at der er masser af funktioner, du kan prøve at opbygge - se / filtrere / administrere abonnenter, designe formularer, oprette kampagner og mere.

Vælg bare en funktion, og prøv at opbygge den. De fleste funktioner involverer en slags form, så det bør være god praksis at opdele dit brugergrænseflade i React-komponenter, der håndterer tilstand og nogle statsløse funktionelle komponenter.

Projekt nr. 18: Gmail på skinner

Gmail har en ret kompleks brugergrænseflade, men du kan starte med bare at bygge brugergrænsefladen til notering og læsning af e-mails. Eller måske kan søgning være sjovere?

Brug google-api-client perlen og tjek denne fantastiske React tutorial og kode repo af Mark Brown ☕ for at komme i gang:

markbrown4 / gmail-react

gmail-react - En React.js-vejledning - Gmail github.com

Projekt nr. 19: DJ Spotify

En DJ'ing-app bygget oven på Spotify. Få anbefalinger, opret og bland afspilningslister, og lad endda andre tilføje sange til dine afspilningslister.

Brug en Ruby wrapper perle til Spotify API:

guilhermesad / rspotify

rspotify - En rubinindpakning til Spotify Web API github.com

Jeg har bygget en lille lille app med det før, og det er ret nemt at bruge. Spotify tillader kun selve musikken at blive spillet med deres egne apps, så du skal holde appen kørende ved siden af.

Projekt nr. 20: Heroku dashboard

Som Rails-udvikler er du sandsynligvis meget fortrolig med Heroku. Det er en fantastisk service til hurtig implementering og hosting af Rails-apps - perfekt når du laver mange små ting til læring

Byg et simpelt dashboard, der viser dine apps og lader dig hurtigt se vigtige oplysninger om hver af dem. Du kan tilføje redigeringsfunktioner som et andet trin.

Brug denne perle til at få adgang til Heroku API:

heroku / platform-api

platform-api - Ruby HTTP-klient til Heroku API github.com

Projekt nr. 21: AWS S3-klient

Byg en flot moderne brugergrænseflade til administration af din AWS S3-konto. Brug Ruby-perlen og start med at oprette en simpel filbrowser-komponent. Tilføj derefter en formularkomponent for at uploade filer.

aws / aws-sdk-rubin

aws-sdk-ruby - Den officielle AWS SDK til Ruby. github.com

Projekt nr. 22: Stripe analytics dashboard

Et instrumentbræt til visning af nogle statistikker og diagrammer baseret på Stripe-data. API'en er meget veldokumenteret, og dette er en stor chance for at prøve at bruge D3 med React (se på dette og dette).

Projekt nr. 23: Google analytics dashboard

Standardanalyseprogrammet til Google Analytics er rodet og forvirrende. Du kan opbygge en enklere, som bare viser de vigtigste oplysninger.

En anden chance for at bruge D3, ellers kan du prøve et andet bibliotek.

Du kan få adgang til GA API med denne perle.

Projekt nr. 24: Habit Tracker

Byg en app til sporing af dine daglige og ugentlige vaner - morgenrutiner, gymsessioner, løb, madlavning, meditation, guitarøvelse, teceremonier?

For inspiration, se Loop Habit Tracker eller Coach.

Gør det mobilvenligt, så du kan bruge det på farten. Når du er fortrolig med React, kan du endda oprette en mobilapp ved hjælp af React Native.

Projekt nr. 25: Fitness dashboard

Byg et dashboard til alle dine personlige fitnessdata, der henter data fra forskellige apps og præsenterer nogle nyttige statistikker i et flot brugergrænseflade.

Afhængigt af hvad du, din familie og venner bruger, kan du nemt hente data fra en række API'er - Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings og meget mere!

Du kan endda give brugeren mulighed for manuelt at indtaste data til enkle ting som vægtsporing og træningsrutiner.

Du kan starte med bare at vise rapporter og derefter forbedre det med nye funktioner som tilføjelse af noter og deling.

Jeg har bygget et simpelt instrumentbræt til Fitbit-data. Se koden her:

learningetto / reactfit

reactfit - En fitness-dashboard-app bygget med Rails 5.1 og React.js github.com

Projekt nr. 26: Gæt min skitse (spil)

Lav en tegne-app, hvor du kan tegne med en mus, og en ven skal gætte, hvad du tegnede. Du kan bruge lærred til tegning. Se react-sketchpad af Michal Svrček for nogle ideer til, hvordan man starter:

svrcekmichal / react-sketchpad

react-sketchpad - Skitsepude oprettet med lærred github.com

Brug skinner til at uploade og gemme tegningen og vise den til nogen på en anden computer.

Som en avanceret øvelse i sjov, tilføj maskinindlæring og få computeren til at gætte?

Projekt nr. 27: Du skriver som

Lav en tekstklassificeringsapp, der matcher din skrivestil til en berømt forfatter - ligesom jeg skriver som (lavet af Dmitry Chestnykh).

Brug klassificering-genfødt til klassificering af teksten og React til håndtering af formularen. Denne app er for det meste backend-tung, så eksperimenter med nogle UI-animationer. Se denne repo for nogle seje ideer:

FormidableLabs / react-animationer

react-animations - En samling animationer til inline- stilbiblioteker github.com

Projekt nr. 28: Idea Board

Byg en Idea board-app ved hjælp af en Rails 5.1 API-app og en separat React-app bygget med Create React App. Idea boardet er et simpelt board, der viser ideer i form af firkantede fliser. Du kan tilføje ideer, redigere eksisterende ideer og slette ideer.

Jeg har allerede bygget denne! Tjek disse to videovejledninger, der viser dig, hvordan du bygger dette trin for trin:

Del 1:

Rails 5 API og React.js tutorial - Sådan oprettes en Idea board-app | Learnetto

Rails 5 API og React.js tutorial - Sådan oprettes en Idea board-app | Learnettolearnetto.com

Del 2:

Sådan animeres en komponent ved hjælp af React Transition Group Learnetto

Sådan animeres en komponent ved hjælp af React Transition Group Learnettolearnetto.com

Disse tutorials dækker mange praktiske koncepter, herunder statsløse funktionelle komponenter, klassebaserede komponenter, brug af axios til at foretage API-opkald, uforanderlig hjælper og mere.

Nu er det en masse interessante ideer til dig til at starte din React on Rails-rejse!

Vil du bygge disse apps med mig? Kom, se gratis tutorials om React, Rails og mere på Learnetto.com.

Har du andre ideer? Del dem i et svar nedenfor.

Venligst ? kan jeg anbefale / klappe? og del denne artikel!