Sử dụng Tạo phản ứng-ứng dụng với giao diện người dùng Material

Question

Tôi mới sử dụng Material UI và ReactJS. Tôi đã chơi xung quanh với Create-React-App (CRA) và reactstrap. Câu hỏi của tôi là, tôi có thể sử dụng Material UI và CRA cùng nhau để tạo ứng dụng không?

Answer 1

Đầu tiên cài đặt material-ui

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

hoặc

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

Đây là những dữ liệu mà bạn nên thay đổi để làm cho material-ui làm việc với 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; 

Nói tóm lại, đây là những điều cần được thực hiện:

• Cài đặt các gói cần thiết.
• nhập injectTapEventPlugin từ react-tap-event-plugin trong index.js và khởi chạy. injectTapEventPlugin được sử dụng theo thứ tự để xóa độ trễ nhấn trong iOS.
• nhập khẩu MuiThemeProvider thành phần trong App.js, Kèm theo div ứng dụng trong thành phần MuiThemeProvider
• Bây giờ bạn có thể nhập và sử dụng bất kỳ thành phần trong material-ui như tôi đã sử dụng RaisedButton đây

Answer 2

Đối với bước đầu tiên cài đặt, tôi cần phải làm điều này để làm cho nó hoạt động: npm cài đặt --save vật liệu-ui axios phản ứng-tap-event-plugin