Use Create-React-App with Material UI

Question

I'm new to Material UI and ReactJS. I've been playing around with Create-React-App (CRA) and reactstrap. My question is, can I use Material UI and CRA together to build an app?

Answer 1

First install material-ui

npm install --save material-ui 

or

yarn add material-ui 

src/App.js

import React, { Component } from 'react';  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add import RaisedButton from 'material-ui/RaisedButton'; // add  import logo from './logo.svg'; import './App.css';  class App extends Component {   render() {     return (        <MuiThemeProvider>        <div className="App">         <div className="App-header">           <img src={logo} className="App-logo" alt="logo" />           <h2>Welcome to React</h2>         </div>         <p className="App-intro">           To get started, edit <code>src/App.js</code> and save to reload.         </p>          <RaisedButton label="Material UI" />        </div>        </MuiThemeProvider>      );   } }  export default App; 

In summary, these are the things to be done:

• Install necessary packages.

• import MuiThemeProvider component in App.js, Enclose the app div in MuiThemeProvider component

• Now you can import and use any component in material-ui like I used RaisedButton here

---

Versions of material-ui before 0.19.1 required react-tap-event-plugin

For those versions, you had to do make this change in index.js

src/index.js

import React from 'react'; import ReactDOM from 'react-dom';  import injectTapEventPlugin from 'react-tap-event-plugin';   // add  import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker';  injectTapEventPlugin();  // add  ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); 

• import injectTapEventPlugin from react-tap-event-plugin in index.js and initialise it. injectTapEventPlugin is used inorder to remove tap delay in iOS.