Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrienpoly/react_rails_playground
A playground for testing React in a Rails environment
https://github.com/adrienpoly/react_rails_playground
es6 practice-project rails rails5 rails5-1 rails51 react reactonrails redux training webpack
Last synced: 15 days ago
JSON representation
A playground for testing React in a Rails environment
- Host: GitHub
- URL: https://github.com/adrienpoly/react_rails_playground
- Owner: adrienpoly
- Created: 2017-11-25T02:23:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-06T22:37:22.000Z (about 7 years ago)
- Last Synced: 2024-12-18T16:42:21.744Z (about 1 month ago)
- Topics: es6, practice-project, rails, rails5, rails5-1, rails51, react, reactonrails, redux, training, webpack
- Language: CSS
- Homepage: https://react-rails-playground.herokuapp.com/
- Size: 490 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **React and Rails Playground App**
[](https://www.codacy.com/app/adrienpoly/React_Rails_Playground?utm_source=github.com&utm_medium=referral&utm_content=adrienpoly/React_Rails_Playground&utm_campaign=badger)
This 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.
While 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`.
The second step was to use the same components with the `gem React on Rails` to benchmark the pros & cons of the native integration vs React on Rails.
In further experiments, I am testing various approaches to persist data in a Rails back end and in general interface backends with React components.
This app is built with the following key points:
* jQuery is completely removed
* the Rails asset pipeline is only used for images
* all css, scss and js are processed with Webpacker
* optimization to get google page speed as close as possible to 100
* Bootstrap 4
* Turbolinks 5
# Demo
Live demo can be seen at:
https://react-rails-playground.herokuapp.com/
# Install
```sh
git clone [email protected]:adrienpoly/React_Rails_Playground.git
cd React_Rails_Playground
rails db:create db:migrate db:seed
bundle && yarn
foreman start -f Procfile.dev -p 3000
```
and visit http://localhost:3000/
# The various examples demonstrated in the playground
## Page Speed component
Those 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.
**Key Points**
* React component populated from Rails
* React on Rails Gem
* Api Fetching
## Video Player
This is the first component built during the Udemy track.
Search a term and display videos from a Youtube query
**Key points:**
* Youtube api
* Simple components without Redux
* No link to any backends, all data are coming from Youtube and none are persisted
## Book list
This is the second component built and the first introduction to Redux.
**Key points:**
* First introduction to Redux
* Very basic reducers
## Weather
This is the third component built during the Udemy track
Search a city and display the weather forecast for the next 5 days
**Key points:**
* Introduction to Middleware
* Fetching live data from API
* Charting results with Rechart
* Displaying maps with Google maps in React
# Credits
Various project have helped me putting all this together:
....