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.