reactjs - tutorial - create react app with decorators

Use la aplicación Create-React con la interfaz de usuario del material

Question

Soy nuevo en Material UI y ReactJS. He estado jugando con Create-React-App (CRA) y reactstrap . Mi pregunta es, ¿puedo usar Material UI y CRA juntos para crear una aplicación?

Answer 1

Primero instala material-ui

npm install --save material-ui

o

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 resumen, estas son las cosas que hay que hacer:

• Instalar los paquetes necesarios.

• importar el componente MuiThemeProvider en App.js , App.js el div de aplicación en el componente MuiThemeProvider

• Ahora puedes importar y usar cualquier componente en material-ui como usé RaisedButton aquí

Las versiones de material-ui anteriores a la 0.19.1 requerían react-tap-event-plugin

Para esas versiones, tenía que hacer este cambio en 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();

• importe injectTapEventPlugin desde react-tap-event-plugin en index.js e inicialícelo. injectTapEventPlugin se usa para eliminar el retardo del tap en iOS.