使用Create-React-App和Material UI

Question

我是Material UI和ReactJS的新手。我一直在玩Create-React-App (CRA)和reactstrap。 我的問題是，我可以使用Material UI和CRA一起構建應用程序嗎？

Answer 1

首先安裝material-ui

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

或

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

這些文件，你應該換作material-ui工作，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(); 

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; 

總之，這些都是要做的事：

• 安裝必要的軟件包。
• 進口injectTapEventPlugin從react-tap-event-plugin在index.js並初始化它。 injectTapEventPlugin用於中 刪除iOS中的輕拍延遲。在App.js
• 進口MuiThemeProvider組件，請將應用格在MuiThemeProvider組件
• 現在你可以導入和使用任何組件在material-ui不像我以前RaisedButton這裏

Answer 2

有關安裝的第一步，我需要做到這一點，使其工作： npm安裝 - 保存材料 - ui axios react-tap-event-plugin