{"id":29200,"date":"2017-02-14T21:01:57","date_gmt":"2017-02-14T13:01:57","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29200"},"modified":"2019-02-14T23:55:40","modified_gmt":"2019-02-14T15:55:40","slug":"react-mdl","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/","title":{"rendered":"React MDL Merges React with Material Design Lite"},"content":{"rendered":"

Google recently put out a library called Material Design Lite<\/a> which is a frontend resource for developers. It automatically styles any website using the material design guidelines with pre-built CSS and JS.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t15 React.js Tools & Resources for Developers<\/a>\n\t\t\t\t<\/p>\n

This is a popular framework for simple dev projects. React MDL<\/a> combines Google\u2019s framework with the React library to make a well-rounded frontend resource.<\/p>\n

\"react<\/a><\/figure>\n

Google\u2019s material design<\/a> is clearly the future of UI\/UX in the world of Google. And with Material Design Lite it\u2019s easier than ever to implement these features onto any website with a proprietary open source library.<\/p>\n

React is also by far the most popular frontend JS framework used for frontend view components. With React MDL you can merge these React components with the MDL library to get a view much like you\u2019ll find in Google\u2019s online documentation.<\/p>\n

Here\u2019s a sample article template<\/a> so you can get a feel of how this looks.<\/p>\n

This page doesn\u2019t have many React components but it demonstrates the aesthetic of material design. You\u2019ll find a lot more action on this demo<\/a> built using React components.<\/p>\n

\"react<\/a><\/figure>\n

You can actually find more info about Material Design Lite on the GitHub repo<\/a> if you\u2019re curious to learn more. From there you can download the raw CSS and JS to implement into your page which automatically supports all modern browsers and graceful degradation.<\/p>\n

Unfortunately since React MDL is still fairly new it doesn\u2019t have full support for all components.<\/p>\n

But you can see a full list here<\/a> including small demos for each one. This also includes bits of source code that you can copy\/paste into your own projects as needed.<\/p>\n

I would not<\/strong> recommend learning React MDL until you already feel comfortable with both libraries.<\/p>\n

The Material Design Lite suite is pretty simple to start but React is much more complex.<\/p>\n

To learn more about MDL check out the FAQ page<\/a> on their official site. It offers tips on where to use MDL, which features it offers, and how it can fit into a typical webdev workflow.<\/p>\n

But truthfully even if you don\u2019t understand React very well you can still get by with all the samples on the components page. For example the textfield page<\/a> has working textfields using material design but with React code snippets.<\/p>\n

\"react<\/a><\/figure>\n

Feel free to play around and see what you can build. Both libraries are completely free and open source for all projects whether personal or commercial.<\/p>\n

You can find out more from the React MDL GitHub page<\/a> if you want to study the source and dive in.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tGetting Started with React.js<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"

Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the material design guidelines with pre-built CSS and JS. This is a popular framework for simple dev projects. React MDL combines Google\u2019s framework with the React library to make a well-rounded frontend…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nReact MDL Merges React with Material Design Lite - Hongkiat<\/title>\n<meta name=\"description\" content=\"Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the\" \/>\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.hongkiat.com\/blog\/react-mdl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React MDL Merges React with Material Design Lite\" \/>\n<meta property=\"og:description\" content=\"Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/react-mdl\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-14T13:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-14T15:55:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/react-mdl\/01-react-mdl-homepage.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"React MDL Merges React with Material Design Lite\",\"datePublished\":\"2017-02-14T13:01:57+00:00\",\"dateModified\":\"2019-02-14T15:55:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/\"},\"wordCount\":436,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-mdl\\\/01-react-mdl-homepage.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/\",\"name\":\"React MDL Merges React with Material Design Lite - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-mdl\\\/01-react-mdl-homepage.jpg\",\"datePublished\":\"2017-02-14T13:01:57+00:00\",\"dateModified\":\"2019-02-14T15:55:40+00:00\",\"description\":\"Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-mdl\\\/01-react-mdl-homepage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-mdl\\\/01-react-mdl-homepage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-mdl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React MDL Merges React with Material Design Lite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React MDL Merges React with Material Design Lite - Hongkiat","description":"Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the","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.hongkiat.com\/blog\/react-mdl\/","og_locale":"en_US","og_type":"article","og_title":"React MDL Merges React with Material Design Lite","og_description":"Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the","og_url":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-02-14T13:01:57+00:00","article_modified_time":"2019-02-14T15:55:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/react-mdl\/01-react-mdl-homepage.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"React MDL Merges React with Material Design Lite","datePublished":"2017-02-14T13:01:57+00:00","dateModified":"2019-02-14T15:55:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/"},"wordCount":436,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/react-mdl\/01-react-mdl-homepage.jpg","articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/react-mdl\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/","url":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/","name":"React MDL Merges React with Material Design Lite - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/react-mdl\/01-react-mdl-homepage.jpg","datePublished":"2017-02-14T13:01:57+00:00","dateModified":"2019-02-14T15:55:40+00:00","description":"Google recently put out a library called Material Design Lite which is a frontend resource for developers. It automatically styles any website using the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/react-mdl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/react-mdl\/01-react-mdl-homepage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/react-mdl\/01-react-mdl-homepage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/react-mdl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React MDL Merges React with Material Design Lite"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7AY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29200"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29200\/revisions"}],"predecessor-version":[{"id":47022,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29200\/revisions\/47022"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29200"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}