Series Reminder is a web application that helps you keep track of the TV shows you’re watching. It also has a great recommendations engine that we’ll dive into in a later article. The web app is built with Rails, and I recently helped sprinkle in some React. The main reason we decided to go for React for the front end was the easy integration with Material-UI. Material-UI helps engineers design beautiful interfaces without designer input.

While there are plenty of articles online about setting up React in Rails (I recommend using webpacker and react_rails), I want to dive deeper and explore some of the great things you can do with React.

Let’s get started. We will assume you already installed webpacker and react_rails. In your pack entry file, you will need to enable the rendering of React components:

Under the app/javascript folder, I made a separate folder for React components. Here’s a diagram for the file structure I’m using:

.

├── app
│   ├─── controllers
│   └─── javascript
│       ├── packs
│           └─── application.js
│       └── react
│           └─── SeriesDetails
│               └─── index.js

#react-components #react #programming #ruby-on-rails #material-ui