web-dev-qa-db-fra.com

Utilisez Create-React-App avec l'interface utilisateur du matériau

Je suis nouveau sur Material UI et ReactJS. J'ai joué avec Create-React-App (CRA) et reactstrap . Ma question est, puis-je utiliser l'interface utilisateur matérielle et l'ARC ensemble pour créer une application?

reactjsmaterial-uicreate-react-app
20
Chris

Installez d'abord material-ui

npm install --save material-ui

ou

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;

En résumé, voici les choses à faire:

  • Installez les packages nécessaires.

  • importer le composant MuiThemeProvider dans App.js, Placez la div de l'application dans le composant MuiThemeProvider

  • Vous pouvez maintenant importer et utiliser n'importe quel composant dans material-ui comme j'ai utilisé RaisedButton ici

Versions de matériel-ui avant 0.19.1 requises react-tap-event-plugin

Pour ces versions, vous deviez faire cette modification dans 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();
  • importer injectTapEventPlugin depuis react-tap-event-plugin dans index.js et l'initialiser. injectTapEventPlugin est utilisé pour supprimer le délai de prise sur iOS.
50
sudo bangbang