Including material ui in Reactjs app

Question

I am trying to include cdn link for my react js app. What would be the link to include material ui. http://www.material-ui.com/#/

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
<div id="container" style="font-style: italic;"></div>

<script type="text/babel">
    var destination = document.querySelector("#container");

    ReactDOM.render(
            <h1>My First App</h1>,
        destination);
</script>
</body>

</html>

I don't think Material UI is available via a CDN - You'd have to install it via NPM. I suggest you check out Create React App if you want a quick way to get up and running. — Matt Holland
– Matt Holland, Commented Nov 7, 2017 at 21:28

Akshay · Accepted Answer · 2017-11-07 21:31:34Z

1

The way to include material ui is through npm rather than a CDN link like traditional Frontend frameworks or libraries.

The correct way to to do it is through npm packages.

You install the library by running

npm install material-ui

Then you can use it inside your react component as below

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

You can read more about it here http://www.material-ui.com/#/get-started/installation

answered Nov 7, 2017 at 21:31

Akshay

7836 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Corey Alix Over a year ago

It shouldn't be the only way. There seems to be no way to use an AMD loader (requirejs) with material-ui. You can do it with react and react-dom.

Collectives™ on Stack Overflow

Including material ui in Reactjs app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related