{"id":16074280,"url":"https://github.com/adrienpoly/react_rails_playground","last_synced_at":"2026-04-11T04:34:14.852Z","repository":{"id":92447717,"uuid":"111970098","full_name":"adrienpoly/React_Rails_Playground","owner":"adrienpoly","description":"A playground for testing React in a Rails environment","archived":false,"fork":false,"pushed_at":"2017-12-06T22:37:22.000Z","size":502,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-10T21:35:20.843Z","etag":null,"topics":["es6","practice-project","rails","rails5","rails5-1","rails51","react","reactonrails","redux","training","webpack"],"latest_commit_sha":null,"homepage":"https://react-rails-playground.herokuapp.com/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adrienpoly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-25T02:23:49.000Z","updated_at":"2019-11-18T16:16:19.000Z","dependencies_parsed_at":"2023-06-01T03:00:09.039Z","dependency_job_id":null,"html_url":"https://github.com/adrienpoly/React_Rails_Playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2FReact_Rails_Playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2FReact_Rails_Playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2FReact_Rails_Playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrienpoly%2FReact_Rails_Playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrienpoly","download_url":"https://codeload.github.com/adrienpoly/React_Rails_Playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325647,"owners_count":20920713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","practice-project","rails","rails5","rails5-1","rails51","react","reactonrails","redux","training","webpack"],"created_at":"2024-10-09T08:42:26.420Z","updated_at":"2025-12-30T22:45:29.417Z","avatar_url":"https://github.com/adrienpoly.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **React and Rails Playground App**\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/14c0c089767146219949c03bc11b0dbf)](https://www.codacy.com/app/adrienpoly/React_Rails_Playground?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=adrienpoly/React_Rails_Playground\u0026utm_campaign=badger)\n\nThis project was initiated while I was following the Udemy course \"Modern React with Redux\". It is now a Playground app for testing various technologies between React and Rails.\n\nWhile the courses on Udemy focus mostly on stand alone application, the first step was to bundle those components into a basic rails app using `rails 5.1.4` and `Webpacker 3.0`.\n\nThe second step was to use the same components with the `gem React on Rails` to benchmark the pros \u0026 cons of the native integration vs React on Rails.\n\nIn further experiments, I am testing various approaches to persist data in a Rails back end and in general interface backends with React components.\n\nThis app is built with the following key points:\n\n* jQuery is completely removed\n* the Rails asset pipeline is only used for images\n* all css, scss and js are processed with Webpacker\n* optimization to get google page speed as close as possible to 100\n* Bootstrap 4\n* Turbolinks 5\n\n# Demo\n\nLive demo can be seen at:\nhttps://react-rails-playground.herokuapp.com/\n\n# Install\n\n```sh\ngit clone git@github.com:adrienpoly/React_Rails_Playground.git\n\ncd React_Rails_Playground\n\nrails db:create db:migrate db:seed\n\nbundle \u0026\u0026 yarn\n\nforeman start -f Procfile.dev -p 3000\n```\n\nand visit http://localhost:3000/\n\n# The various examples demonstrated in the playground\n\n## Page Speed component\n\nThose are simple react charting components built with Recharts lib. Those charts are populated with data store in the rails db. Two options are used to populate the charts the native React approach with an api call to /commits endpoint or the React on Rails gem approach.\n\n**Key Points**\n\n* React component populated from Rails\n* React on Rails Gem\n* Api Fetching\n\n## Video Player\n\nThis is the first component built during the Udemy track.\nSearch a term and display videos from a Youtube query\n\n**Key points:**\n\n* Youtube api\n* Simple components without Redux\n* No link to any backends, all data are coming from Youtube and none are persisted\n\n## Book list\n\nThis is the second component built and the first introduction to Redux.\n\n**Key points:**\n\n* First introduction to Redux\n* Very basic reducers\n\n## Weather\n\nThis is the third component built during the Udemy track\nSearch a city and display the weather forecast for the next 5 days\n\n**Key points:**\n\n* Introduction to Middleware\n* Fetching live data from API\n* Charting results with Rechart\n* Displaying maps with Google maps in React\n\n# Credits\n\nVarious project have helped me putting all this together:\n....\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrienpoly%2Freact_rails_playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrienpoly%2Freact_rails_playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrienpoly%2Freact_rails_playground/lists"}