使用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