Anda tahu bila anda cuba mempelajari sesuatu yang baru, tetapi bosan dengan membina aplikasi contoh lalai?
Itulah KILLER motivasi №1.
Saya tidak mahu pelajar-pelajar saya tidak berminat dan berputus asa.
Oleh itu, saya membuat senarai 28 idea aplikasi menyeronokkan yang boleh anda bina sambil belajar menggunakan React with Ruby on Rails.
Senarai ini akan menganggap bahawa anda sudah selesa dengan Ruby on Rails (atau kerangka pembangunan web lain). Jadi bit backend mungkin agak rumit untuk pemula, tetapi bit React bahagian depan mestilah agak sederhana.
Projek # 1: Aplikasi Kalendar untuk membuat janji temu (seperti kalendar Google)
Ini boleh dimulakan sebagai aplikasi sederhana yang dapat anda tingkatkan secara beransur-ansur dengan menambahkan lebih banyak ciri dan peningkatan UX.
Ini akan membantu anda berlatih menggunakan komponen bersarang (seperti komponen hari, bersarang dalam komponen seminggu, atau komponen bersarang dalam sebulan).
Saya menggunakan ini sebagai aplikasi contoh dalam kursus Free Complete React on Rails saya. Oleh itu, periksa sama ada anda ingin mencubanya.
Anda dapat melihat kod langkah demi langkah lengkap di sini:
Learnetto / calreact
calreact - React and Rails 5 aplikasi janji temu kalendar github.com
Projek # 2: Aplikasi penjelajah Github untuk mencari repositori kod yang menarik
Anda boleh membina bahagian carian semata-mata di sisi pelanggan, tetapi anda boleh membuatnya lebih senang dengan menyimpan carian di pangkalan data menggunakan Rails dan menunjukkan carian yang paling popular.
Anda akan berlatih menggunakan API luaran dan menangani tindak balas JSON. Anda boleh bereksperimen dengan membuat pra-komponen pada pelayan.
Lihat pemalam penyemak imbas ini oleh Algolia untuk membuat jus idea anda mengalir:
algolia / github-awesome-autocomplete
github-awesome-autocomplete -: octocat: Tambahkan keupayaan carian segera ke bar carian GitHub github.com
Projek # 3: Aplikasi pengambilan nota
Anda dapat melihat kehebatan React menangani banyak perubahan keadaan, katakanlah, dengan mengaktifkan simpan automatik. Lihat Simplenote untuk contoh aplikasi nota ringkas tetapi hebat.
Sekiranya itu terlalu sukar sebagai aplikasi pertama, pertama-tama anda boleh mencuba menggunakan komponen penyunting teks luaran untuk mengetahui cara kerjanya, dan kemudian melaksanakannya sendiri:
facebook / draf-js
draft-js - Kerangka kerja React untuk membina penyunting teks. github.com
Projek # 4: Tambahkan widget sembang Slack ke laman web anda
Gunakan komponen react-slack-chat untuk menambahkan widget sembang ke laman Rails yang ada. Komponen ini melakukan pengangkatan berat tetapi anda boleh bersenang-senang dengan membuat bot anda sendiri di Rails dan menyesuaikan widget di React.
Kod untuk komponen terdapat di Github:
Sembang 5punk / react-slack-chat
react-slack-chat - Widget Bersepadu Web Slack Chat Reka Bentuk Gooey / Material yang Cantik. github.com
Projek # 5: Penjana Meme
Rel boleh menangani menyimpan dan melayani perpustakaan gambar dan meme yang ada. Gunakan React untuk membuat dan mengendalikan borang untuk membuat meme.
Anda boleh menghasilkan meme di pelayan menggunakan ImageMagick atau di penyemak imbas menggunakan kanvas. Lihat repo ini oleh Hung Tran:
tranhungt / pembuat meme
pembuat meme - Buat meme kegemaran anda dan hantarkan kepada rakan anda! github.com
Projek # 6: Aplikasi carian Imej Percuma Masa Nyata
Gunakan Unsplash API untuk foto percuma berkualiti tinggi:
unsplash / unsplash_rb
unsplash_rb - Pembungkus Ruby untuk Unsplash API. github.com
Tambahkan animasi keren menggunakan React Animation Add-Ons.
Benarkan pengguna menandakan gambar kegemaran mereka. Anda bahkan boleh bereksperimen dengan membuat backend hanya aplikasi Rails API dan membuat aplikasi React yang berasingan untuk bahagian depan.
Projek # 7: Kelab buku
Aplikasi mudah di mana anda dan rakan anda dapat berkongsi buku kegemaran anda dan membincangkannya (seperti Goodreads). Bahagian belakang boleh menjadi aplikasi Rails CRUD yang sederhana, tetapi anda dapat menjadikan bahagian depan aplikasi React satu halaman dan bermain dengan router React dan Redux.
Projek # 8: Pelanggan web Twitter untuk pelbagai akaun (seperti Tweetdeck)
Aplikasi pelanggan web Twitter di mana anda boleh menyambungkan lebih dari satu akaun Twitter (menggunakan OAuth) dan kemudian menambahkan beberapa lajur ke UI - untuk perkara seperti suapan, pemberitahuan, carian, mesej langsung.
Gunakan permata Twitter oleh Erik Michaels-Ober:
sferik / twitter
twitter - Antara muka Ruby ke API Twitter. github.com
Ini akan memberi anda kegembiraan yang tiada tandingannya dengan had had API yang tidak masuk akal dari syarikat yang paling mesra pemaju di dunia.
Anda boleh menambah pengambilan tweet dan pemberitahuan automatik gaya Tweetdeck menggunakan polling atau Action Cable.
Banyak komponen bersarang dan anda boleh mencuba beberapa animasi mudah di React.
Mungkin lebih baik memulakannya dengan hanya membina kemampuan membaca. Sebaik sahaja anda memilikinya, anda boleh menambahkan kemampuan untuk membuat siaran, suka dan retweet.
Projek # 9: OpenStreetMap Custom UI
Adakah anda tahu laman web OpenStreetMap adalah aplikasi Rails?
Anda boleh mendapatkan repo di sini, menyediakannya di mesin anda sendiri dan kemudian bermain dengan menambahkan React di bahagian depan!
laman web openstreetmap / openstreetmap
openstreetmap-website - Aplikasi Mirror of the Rails mengaktifkan //www.openstreetmap.org (dihoskan di git: // git… github.com
Projek # 10: Rolet makan tengah hari berpasukan
Laman web untuk membantu anda menentukan tempat untuk makan tengah hari bersama pasukan anda. Latar belakang Rails hanya perlu aplikasi CRUD sederhana yang membolehkan ahli pasukan memasukkan cadangan tempat. Anda boleh menggunakan API Foursquare untuk carian dan pelengkapan automatik.
Dan gunakan React untuk beberapa animasi yang tidak masuk akal!
Sekiranya anda tidak makan tengah hari, minum kopi atau koktel atau sesuatu yang lebih menarik.
Projek # 11: Super Procrastinator
Satu laman web yang boleh anda lawati untuk mengelakkan kerja - baca Reddit, Hacker News, Product Hunt, Medium, Slashdot dan banyak lagi di satu tempat.
Gunakan backend Rails untuk menyimpan akaun dan pilihan pengguna, dan bercakap dengan API yang berbeza. Anda juga dapat mengambil data dari API secara langsung dari sisi pelanggan.
Mahu membina aplikasi ini dengan saya? Mari, lihat Kursus React Lengkap di Rails Percuma saya, di mana saya akan mengajar anda bagaimana menjadi profesional dalam menggunakan React with Rails, sambil membina beberapa perkara yang menyeronokkan.Projek # 12: Ruang Sembang dengan Kabel Tindakan
Selain mempelajari React, ini akan menjadikan projek kecil yang hebat untuk mencuba Action Cable, sebuah ciri Rails 5 baru yang hebat yang menambahkan sokongan WebSocket ke Rails. Lihat contoh berikut untuk memulakan:
rel / contoh tindakan-tindakan
actioncable-samples - Contoh Kabel Tindakan github.com
Projek # 13: Ekstra Kecil (Klon Medium)
Lihat siri catatan blog ini oleh Andrea Mazzini, di mana dia menerangkan secara terperinci bagaimana dia membuat klon Medium dengan aplikasi Rails API, React dan Flux.
FancyPixel / rel kecil
rel kecil - Kecil, klon kecil Medium. API Rails github.com FancyPixel / frontend kecil
small-frontend - Kecil, klon kecil Medium. React + Flux frontend github.com
Anda boleh membuatnya tanpa menggunakan Flux, tetapi mungkin patut dicuba jika anda menghadapi cabaran.
Projek # 14: Penanda wajah
Aplikasi di mana anda boleh memuat naik foto dan menandai orang (seperti di Facebook). Gunakan permata OpenCV Ruby untuk pengesanan wajah automatik:
ruby-opencv / ruby-opencv
ruby-opencv - Garpu versi permata OpenCV untuk Ruby github.com
Projek # 15: ActiveAdmin pada steroid
Anda mungkin telah menggunakan ActiveAdmin untuk menguruskan rekod aplikasi anda. Tetapi UI tidak betul-betul memberi inspirasi. Anda boleh mengubahnya dengan mengambil satu pandangan sekaligus dan mengubahnya menjadi komponen React yang bergaya dengan baik.
Lihat kod ActiveAdmin di sini:
aktifadmin / aktifadmin
activeadmin - Rangka kerja pentadbiran untuk aplikasi Ruby on Rails. github.com
Projek # 16: Kedai E-dagang
Jam, bir, bendera Inggeris, kari, semuanya disajikan oleh React on Rails. Sekiranya anda tidak mahu membina ciri-ciri kedai di Rails, gunakan Spree dan fokus untuk mempraktikkan komponen React untuk bahagian depan.
spree / spree
spree - Spree adalah penyelesaian e-dagang sumber terbuka lengkap untuk Ruby on Rails. github.com
Tahu tak? Saya membina idea kedai dalam talian ini dalam satu siri tutorial. Yang pertama akan diterbitkan di sini di blog freeCodeCamp! Pastikan anda mengikuti saya di Medium dan mendaftar di Learnetto untuk mendapatkannya di peti masuk anda.
Projek # 17: Hanya Kirim No Chimp
Aplikasi buletin e-mel dengan UI yang baik yang tidak membuat anda ingin merobek rambut anda. Dan tidak ada omong kosong monyet yang comel?
Anda masih boleh menggunakan Mailchimp API atau menggunakan Sendgrid. Sekiranya anda menggunakan Mailchimp, anda tahu ada banyak ciri yang boleh anda coba membina - melihat / menapis / mengurus pelanggan, merancang borang, membuat kempen, dan banyak lagi.
Cukup pilih satu ciri dan cuba buat. Sebilangan besar ciri akan melibatkan beberapa jenis bentuk, jadi sebaiknya membagi UI anda ke dalam komponen React yang akan mengendalikan keadaan dan beberapa komponen fungsional tanpa status.
Projek # 18: Gmail di Rel
Gmail mempunyai UI yang cukup rumit tetapi anda boleh bermula dengan hanya membina UI untuk menyenaraikan dan membaca e-mel. Atau mungkin carian lebih menyenangkan?
Gunakan permata google-api-client dan lihat tutorial React dan repo kod hebat ini oleh Mark Brown ☕ untuk memulakan:
markbrown4 / gmail-bertindak balas
gmail-react - Tutorial React.js - Gmail github.com
Projek # 19: DJ Spotify
Aplikasi DJ yang dibina di atas Spotify. Dapatkan cadangan, buat dan campurkan senarai main dan biarkan orang lain menambahkan lagu ke senarai main anda.
Gunakan permata pembungkus Ruby untuk Spotify API:
guilhermesad / rspotify
rspotify - Pembungkus ruby untuk Spotify Web API github.com
Saya telah membina aplikasi kecil kecil sebelum ini dan agak mudah digunakan. Spotify hanya membenarkan muzik itu dimainkan dengan aplikasinya sendiri, jadi anda harus memastikan aplikasi tetap berjalan.
Projek # 20: Papan pemuka Heroku
Sebagai pembangun Rails, anda mungkin sangat akrab dengan Heroku. Ini adalah perkhidmatan hebat untuk menyebarkan dan menghoskan aplikasi Rails dengan pantas - sempurna ketika anda membuat banyak perkara kecil untuk belajar
Bina papan pemuka ringkas yang menyenaraikan aplikasi anda dan membolehkan anda melihat maklumat penting mengenai setiap aplikasi dengan cepat. Anda boleh menambahkan keupayaan penyuntingan sebagai langkah kedua.
Gunakan permata ini untuk mengakses API Heroku:
heroku / platform-api
platform-api - Pelanggan HTTP Ruby untuk Heroku API github.com
Projek # 21: Pelanggan AWS S3
Bina UI moden yang bagus untuk menguruskan akaun AWS S3 anda. Gunakan permata Ruby dan mulakan dengan membina komponen penyemak imbas fail mudah. Kemudian tambahkan komponen borang untuk memuat naik fail.
aws / aws-sdk-ruby
aws-sdk-ruby - SDK AWS rasmi untuk Ruby. github.com
Projek # 22: Papan pemuka analisis jalur
Papan pemuka untuk menunjukkan beberapa statistik dan carta berdasarkan data Stripe. API didokumentasikan dengan baik dan ini adalah peluang terbaik untuk mencuba menggunakan D3 dengan React (lihat ini dan ini).
Projek # 23: Papan pemuka analitik Google
Papan pemuka web analisis Google lalai berantakan dan membingungkan. Anda boleh membina yang lebih sederhana yang hanya menunjukkan maklumat yang paling penting.
Peluang lain untuk menggunakan D3 atau anda boleh mencuba perpustakaan lain.
Anda boleh mengakses API GA dengan permata ini.
Projek # 24: Penjejak Kebiasaan
Bina aplikasi untuk mengesan kebiasaan harian dan mingguan anda - rutin pagi, sesi gim, berlari, memasak, meditasi, latihan gitar, upacara minum teh?
Untuk mendapatkan inspirasi, lihat Loop Habit Tracker atau Coach.
Jadikannya mudah alih sehingga anda dapat menggunakannya semasa dalam perjalanan. Setelah anda selesa dengan React, anda bahkan boleh membina aplikasi mudah alih menggunakan React Native.
Projek # 25: Papan pemuka kecergasan
Bina papan pemuka untuk semua data kecergasan peribadi anda, yang mengumpulkan data dari aplikasi yang berbeza dan membentangkan beberapa statistik berguna dalam UI yang bagus.
Bergantung pada apa yang anda, keluarga dan rakan anda gunakan, anda dapat dengan mudah menarik data dari sebilangan API - Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings dan banyak lagi!
Anda bahkan boleh membenarkan pengguna memasukkan data secara manual untuk perkara-perkara sederhana seperti penjejakan berat badan dan rutin latihan.
Anda boleh bermula dengan hanya menunjukkan laporan dan kemudian memperbaikinya dengan ciri baru seperti menambah nota dan berkongsi.
Saya telah membina papan pemuka ringkas untuk data Fitbit. Lihat kodnya di sini:
Learnetto / reactfit
reactfit - Aplikasi papan pemuka kecergasan yang dibina menggunakan Rails 5.1 dan React.js github.com
Projek # 26: Tebak Sketsa Saya (permainan)
Buat aplikasi gambar yang boleh anda lukis dengan tetikus, dan seorang rakan harus meneka apa yang anda gambar. Anda boleh menggunakan kanvas untuk melukis. Lihat react-sketchpad oleh Michal Svrček untuk beberapa idea mengenai cara memulakan:
svrcekmichal / react-sketchpad
react-sketchpad - Sketch pad dibuat dengan kanvas github.com
Gunakan Rails untuk memuat naik dan menyimpan gambar dan menunjukkannya kepada seseorang di komputer lain.
Sebagai latihan lanjutan dalam keseronokan, tambah pembelajaran mesin dan buat komputer meneka?
Projek # 27: Anda Menulis Suka
Buat aplikasi pengkelasan teks yang sesuai dengan gaya penulisan anda dengan pengarang terkenal - sama seperti I Write Like (dibuat oleh Dmitry Chestnykh).
Gunakan classifier-reborn untuk mengklasifikasikan teks dan React untuk mengendalikan borang. Aplikasi ini kebanyakannya berat belakang, jadi bereksperimen dengan beberapa animasi UI. Lihat repo ini untuk beberapa idea menarik:
FormidableLabs / reaksi-animasi
react-animations - Kumpulan animasi untuk perpustakaan gaya sebaris github.com
Projek # 28: Dewan Idea
Bina aplikasi papan Idea menggunakan aplikasi Rails 5.1 API dan aplikasi React berasingan yang dibina menggunakan Buat Aplikasi React. Papan Idea adalah papan sederhana yang memaparkan idea dalam bentuk jubin persegi. Anda boleh menambah idea, mengedit idea yang ada dan menghapus idea.
Saya sudah membina yang ini! Lihat dua tutorial video ini yang akan menunjukkan cara membina langkah demi langkah ini:
Bahagian 1:
Tutorial Rails 5 API dan React.js - Cara membuat aplikasi papan Idea | Belajar
Tutorial Rails 5 API dan React.js - Cara membuat aplikasi papan Idea | Learnettolearnetto.com
Bahagian 2:
Cara menghidupkan komponen menggunakan React Transition Group | Belajar
Cara menghidupkan komponen menggunakan React Transition Group | Learnettolearnetto.com
Tutorial ini merangkumi banyak konsep praktikal termasuk komponen fungsional tanpa status, komponen berasaskan kelas, penggunaan aksio untuk membuat panggilan API, immutability-helper dan banyak lagi.
Kini terdapat banyak idea menarik untuk anda memulakan perjalanan React on Rails anda!
Mahu membina aplikasi ini dengan saya? Datang, lihat tutorial percuma mengenai React, Rails dan banyak lagi di Learnetto.com.
Ada idea lain? Kongsi mereka dalam jawapan di bawah
Tolong ? r ecommend / tepukan? dan kongsi artikel ini!