Material-UIを使用したCreate-React-Appを使用

Question

Material UIとReactJSを初めて使用しました。私はCreate-React-App (CRA)とreactstrapで遊んでいます。 私の質問は、マテリアルUIとCRAを併用してアプリを構築することができますか？

Answer 1

まずインストールmaterial-ui

npm install --save material-ui react-tap-event-plugin 

または

yarn add material-ui react-tap-event-plugin 

これらはあなたがCRA

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(); 

で material-ui仕事をするために変更する必要がありますファイルです要約すると0

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; 

、これらが行うべきものです：

• 必要なパッケージをインストールします。
• インポートinjectTapEventPluginreact-tap-event-pluginindex.jsからそれを初期化します。 iOSのタップ遅延を削除するには の中でinjectTapEventPluginが使用されます。 App.jsで
• 輸入MuiThemeProviderコンポーネント、私はインストールの最初のステップのためにここに

Answer 2

RaisedButtonを使用ようにあなたがmaterial-uiで任意のコンポーネントをインポートして使用することができます今、私がする必要MuiThemeProviderコンポーネント

でアプリのdiv要素を囲みこれを動作させるには： npm install --save material-ui axios react-tap-event-plugin