How to Add Material UI to your Rails + React App
Rails + React + Material UI
Found following libraries available as of now:
Material UI (Over 36K stars).
Ant Design (Over 28K stars).
React Bootstrap (Over 13K stars).
React Toolbox (Over 7K stars).
Belle UI (Over 2K stars).
Looking at the popularity of Material UI decided to integrate it. This library has React components that implement Google’s Material Design. Also, recently the Material UI version 1 was released. So decided to go with it.
Yes Thor it is 😉
Following are some useful links for the UI library.
Example Projects: https://material-ui.com/getting-started/example-projects/
Simple Button Demo: https://codesandbox.io/s/4j7m47vlm4
Now let’s get to our rails app directory. The latest version is v1.0.0.
$ yarn add @material-ui/core
$ yarn add @material-ui/icons // To add material icons too
This will add material-ui to package.json file. See attached.
material-ui in package.json
Now can start using all the material-ui components just by importing them. Let’s use some of the components.
Let’s create a new component at in our rails project at:
So their components are now available. Let’s change our app/views/home/index.html.erb to show this React component:
<%= react_component 'MaterialComponentList' %>
So you should see a screen as below:
Simple Material Components!
Thanks for reading. If you liked it, press the thumb & share. 🙂
Consulting is free – let us help you grow!
Choose Your Language
- Digital Marketing
- IT Consulting
- Project Management