{"id":3404,"date":"2018-05-28T08:55:31","date_gmt":"2018-05-28T08:55:31","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=3404"},"modified":"2021-10-11T16:23:23","modified_gmt":"2021-10-11T10:53:23","slug":"how-to-add-material-ui-to-your-rails-react-app","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/","title":{"rendered":"How to Add Material UI to your Rails + React App"},"content":{"rendered":"\n<p>My last blog <a href=\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\" target=\"_blank\" rel=\"noopener noreferrer\">React + Rails + Webpacker<\/a> demonstrated how to add <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ReactJS<\/a> to your Rails project using webpacker. Now the question was which UI library to use with React JS.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"266\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Rails-React-Material-UI.jpeg\" alt=\"Rails + React + Material UI\" class=\"wp-image-12938\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Rails-React-Material-UI.jpeg 800w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Rails-React-Material-UI-300x100.jpeg 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Rails-React-Material-UI-768x255.jpeg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">Rails + React + Material UI<\/h6>\n\n\n\n<h2 class=\"wp-block-heading\">Research.<\/h2>\n\n\n\n<p>Found following libraries available as of now:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/mui-org\/material-ui\" target=\"_blank\" rel=\"noopener noreferrer\">Material UI<\/a> (Over 36K stars).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/github.com\/mui-org\/material-ui\" target=\"_blank\" rel=\"noopener noreferrer\"><b>mui-org\/material-ui<\/b> <i>material-ui &#8211; React components that implement Google&#8217;s Material Design.<\/i> github.com<\/a><\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/github.com\/ant-design\/ant-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ant Design<\/a> (Over 28K stars).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/github.com\/ant-design\/ant-design\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>ant-design\/ant-design<\/b><br><i>ant-design? A UI Design Language<\/i> github.com<\/a><\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/github.com\/react-bootstrap\/react-bootstrap\" target=\"_blank\" rel=\"noopener noreferrer\">React Bootstrap<\/a> (Over 13K stars).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/github.com\/react-bootstrap\/react-bootstrap\" target=\"_blank\" rel=\"noopener noreferrer\"><b>react-bootstrap\/react-bootstrap<\/b> <i>react-bootstrap &#8211; Bootstrap 3 components built with React<\/i> github.com<\/a><\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/github.com\/react-bootstrap\/react-bootstrap\" target=\"_blank\" rel=\"noopener noreferrer\">React Toolbox<\/a> (Over 7K stars).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/github.com\/react-toolbox\/react-toolbox\" target=\"_blank\" rel=\"noopener noreferrer\"><b>react-toolbox\/react-toolbox<\/b> <i>react-toolbox &#8211; A set of React components implementing Google&#8217;s Material Design specification with the power of CSS&#8230;<\/i> github.com<\/a><\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/github.com\/nikgraf\/belle\" target=\"_blank\" rel=\"noopener noreferrer\">Belle UI<\/a> (Over 2K stars).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/github.com\/nikgraf\/belle\" target=\"_blank\" rel=\"noopener noreferrer\">nikgraf\/belle <i>belle &#8211; Configurable React Components with great UX<\/i> github.com<\/a><\/p><\/blockquote>\n\n\n\n<p>Looking at the popularity of Material UI decided to integrate it. This library has <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a> components that implement <a href=\"https:\/\/material.io\/design\/introduction\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google&#8217;s Material Design<\/a>. Also, recently the <a href=\"https:\/\/github.com\/mui-org\/material-ui\/releases\/tag\/v1.0.0\" target=\"_blank\" rel=\"noopener noreferrer\">Material UI version 1<\/a> was released. So decided to go with it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"500\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Good-Decision.jpeg\" alt=\"\" class=\"wp-image-12939\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Good-Decision.jpeg 732w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Good-Decision-300x205.jpeg 300w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/figure><\/div>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">Good Decision<\/h6>\n\n\n\n<p>Yes Thor it is \ud83d\ude09<\/p>\n\n\n\n<p>Following are some useful links for the UI library.<\/p>\n\n\n\n<p><i>Documentation: <a href=\"https:\/\/material-ui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/material-ui.com\/<\/a><\/i><\/p>\n\n\n\n<p><i>Example Projects: <a href=\"https:\/\/material-ui.com\/getting-started\/example-projects\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/material-ui.com\/getting-started\/example-projects\/<\/a><\/i><\/p>\n\n\n\n<p><i>Simple Button Demo: <a href=\"https:\/\/codesandbox.io\/s\/4j7m47vlm4\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/codesandbox.io\/s\/4j7m47vlm4<\/a><\/i><\/p>\n\n\n\n<p>Assuming you have completed <a href=\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-react-js-to-your-ruby-on-rails-app-with-webpacker\" target=\"_blank\" rel=\"noopener noreferrer\">Rails + React + Webpacker<\/a> tutorial. If not then clone the source code from <a href=\"https:\/\/github.com\/AnkurVyas-BTC\/rails-react-webpacker\" target=\"_blank\" rel=\"noopener noreferrer\">rails-react-webpacker<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Implementation.<\/h3>\n\n\n\n<p>Now let&#8217;s get to our rails app directory. The latest version is <i>v1.0.0<\/i>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>$ yarn add @material-ui\/core<br>\n$ yarn add @material-ui\/icons \/\/ To add material icons too<\/code><\/p><\/blockquote>\n\n\n\n<p>This will add material-ui to <i>package.json<\/i> file. See attached.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"512\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/material-ui-in-package.json_.png\" alt=\"material-ui in package.json\" class=\"wp-image-12940\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/material-ui-in-package.json_.png 568w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/material-ui-in-package.json_-300x270.png 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><\/figure><\/div>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">material-ui in package.json<\/h6>\n\n\n\n<p>Now can start using all the <b>material-ui components<\/b> just by importing them. Let&#8217;s use some of the components.<\/p>\n\n\n\n<p>Let&#8217;s create a new component at in our rails project at:<\/p>\n\n\n\n<p><b>app\/javascript\/components\/MaterialComponentList.js<\/b>. For demo purpose, we will just include <a href=\"https:\/\/material-ui.com\/api\/app-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">AppBar<\/a>, Button and TextField. See the following component:<br><script><\/script><\/p>\n\n\n\n<p>So their components are now available. Let&#8217;s change our <i>app\/views\/home\/index.html.erb<\/i> to show this React component:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>&lt;%= react_component 'MaterialComponentList' %&gt;<\/code><\/p><\/blockquote>\n\n\n\n<p>So you should see a screen as below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"161\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Simple-Material-Components.png\" alt=\"Simple Material Components\" class=\"wp-image-12941\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Simple-Material-Components.png 800w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Simple-Material-Components-300x60.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Simple-Material-Components-768x155.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<h6 class=\"has-text-align-center wp-block-heading\">Simple Material Components!<\/h6>\n\n\n\n<p>You can find the whole source code <a href=\"https:\/\/github.com\/AnkurVyas-BTC\/rails-react-webpacker\/tree\/feature\/add-material-ui-v1\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. Please note that the Material UI changes are in <a href=\"https:\/\/github.com\/AnkurVyas-BTC\/rails-react-webpacker\/tree\/feature\/add-material-ui-v1\" target=\"_blank\" rel=\"noopener noreferrer\">feature\/add-material-ui-v1<\/a> branch.<\/p>\n\n\n\n<p>Thanks for reading. If you liked it, press the thumb &amp; share. \ud83d\ude42<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.botreetechnologies.com\/ruby-on-rails-development\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for more details&#8230;<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noopener noreferrer\">Consulting is free<\/a> &#8211; let us help you grow!<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>My last blog React + Rails + Webpacker demonstrated how&#8230;<\/p>\n","protected":false},"author":9,"featured_media":12937,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,73,10],"tags":[],"class_list":["post-3404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","category-ruby-on-rails","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Material UI to your Rails + React App<\/title>\n<meta name=\"description\" content=\"My last blog React + Rails + Webpacker demonstrated how to add ReactJS to your Rails project using webpacker. Now the question was which UI library to use with React JS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Material UI to your Rails + React App\" \/>\n<meta property=\"og:description\" content=\"My last blog React + Rails + Webpacker demonstrated how to add ReactJS to your Rails project using webpacker. Now the question was which UI library to use with React JS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-28T08:55:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-11T10:53:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ankur Vyas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ankur Vyas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\"},\"author\":{\"name\":\"Ankur Vyas\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\"},\"headline\":\"How to Add Material UI to your Rails + React App\",\"datePublished\":\"2018-05-28T08:55:31+00:00\",\"dateModified\":\"2021-10-11T10:53:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\"},\"wordCount\":391,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg\",\"articleSection\":[\"React Native\",\"Ruby on Rails\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\",\"name\":\"How to Add Material UI to your Rails + React App\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg\",\"datePublished\":\"2018-05-28T08:55:31+00:00\",\"dateModified\":\"2021-10-11T10:53:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\"},\"description\":\"My last blog React + Rails + Webpacker demonstrated how to add ReactJS to your Rails project using webpacker. Now the question was which UI library to use with React JS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"Material UI to your Rails + React App\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Material UI to your Rails + React App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5\",\"name\":\"Ankur Vyas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png\",\"caption\":\"Ankur Vyas\"},\"description\":\"Ankur is a Ruby on Rails Developer and Practice Lead JavaScript. He loves Ruby, JavaScript, reading and writing blogs, problem-solving and taking ownership of work. Apart from coding he likes to listen to songs, gaming and traveling.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Material UI to your Rails + React App","description":"My last blog React + Rails + Webpacker demonstrated how to add ReactJS to your Rails project using webpacker. Now the question was which UI library to use with React JS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Material UI to your Rails + React App","og_description":"My last blog React + Rails + Webpacker demonstrated how to add ReactJS to your Rails project using webpacker. Now the question was which UI library to use with React JS.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2018-05-28T08:55:31+00:00","article_modified_time":"2021-10-11T10:53:23+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg","type":"image\/jpeg"}],"author":"Ankur Vyas","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Ankur Vyas","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/"},"author":{"name":"Ankur Vyas","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5"},"headline":"How to Add Material UI to your Rails + React App","datePublished":"2018-05-28T08:55:31+00:00","dateModified":"2021-10-11T10:53:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/"},"wordCount":391,"commentCount":0,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg","articleSection":["React Native","Ruby on Rails","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/","url":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/","name":"How to Add Material UI to your Rails + React App","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg","datePublished":"2018-05-28T08:55:31+00:00","dateModified":"2021-10-11T10:53:23+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5"},"description":"My last blog React + Rails + Webpacker demonstrated how to add ReactJS to your Rails project using webpacker. Now the question was which UI library to use with React JS.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/material-ui-to-your-rails-react-app.jpg","width":1920,"height":1280,"caption":"Material UI to your Rails + React App"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/how-to-add-material-ui-to-your-rails-react-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Material UI to your Rails + React App"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/aa180b4d8d933949f15aba97d8d138a5","name":"Ankur Vyas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/ankur-vyas-1-150x150.png","caption":"Ankur Vyas"},"description":"Ankur is a Ruby on Rails Developer and Practice Lead JavaScript. He loves Ruby, JavaScript, reading and writing blogs, problem-solving and taking ownership of work. Apart from coding he likes to listen to songs, gaming and traveling."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=3404"}],"version-history":[{"count":5,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3404\/revisions"}],"predecessor-version":[{"id":16538,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3404\/revisions\/16538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/12937"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=3404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=3404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=3404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}