Cordova com React Material UI

Nesse post mostramos como usar React e webpack no Cordova. Mas se seguir as mesmas instruções pode adicionar React em qualquer projeto web. Mesmo tratando-se de um projeto legado.

Uma ótima opção para quem já tem um projeto feito em Corva mas quer começar a migrar para React ou até mesmo se quiser usar Cordova puro sem Ionic/ Angular.

Para projetos React mobile o mais indicado seria React native. Mas para quem ainda prefere webview e quer aproveitar a produtividade do React, recomendo essa ótima biblioteca para componentes visuáis. Trata-se do Material UI 

Vamos a prática. Vou adotar como base o projeto criado nesse post. Primeiro vamos navegar até a pasta do projeto e instalar o módulo npm no Material UI:

 npm install material-ui

Agora vamos no arquivo index.html e deixar apenas uma div com id app e a chamada do arquivo bundle.js

 <!DOCTYPE html>
 <html>
     <head>
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
         <title>Hello World</title>
     </head>
     <body>
         <div id="app"></div>
         <script type="text/javascript" src="./bundle.js"></script>
     </body>
 </html>
 

Já o arquivo src/app/index.js deve ficar assim:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import {green100, green500, green700} from 'material-ui/styles/colors';
 import AppBar from 'material-ui/AppBar';
 import RaisedButton from 'material-ui/RaisedButton';
 import DatePicker from 'material-ui/DatePicker';
 
 const muiTheme = getMuiTheme({
   palette: {
     primary1Color: green500,
     primary2Color: green700,
     primary3Color: green100,
   },
 }, {
   avatar: {
     borderColor: null,
   }
 });
  
 const style = {
   margin: 12,
 }; 
  
 const App = () => (
   <MuiThemeProvider muiTheme={muiTheme}>
     <AppBar
         title="Title"
         iconClassNameRight="muidocs-icon-navigation-expand-more"
       />
       <div>
         <RaisedButton label="Default" style={style} />
         <RaisedButton label="Primary" primary={true} style={style} />
         <RaisedButton label="Secondary" secondary={true} style={style} />
         <RaisedButton label="Disabled" disabled={true} style={style} />
         <br />
         <br />
         <RaisedButton label="Full width" fullWidth={true} />
       </div>
       <div>
         <DatePicker hintText="Portrait Dialog" />
         <DatePicker hintText="Landscape Dialog" mode="landscape" />
         <DatePicker hintText="Dialog Disabled" disabled={true} />
         <DatePicker hintText="Open to Year" openToYearSelection={true} />
       </div>
   </MuiThemeProvider>
 );
  
 ReactDOM.render(
   <App />,
   document.getElementById('app')
 );

Agora basta iniciar o webpack-dev-ser e ver o resultado:

Imagem

Imagem

Adicionei algums componentes apenas para demonstração.

Segue a documentação completa: http://www.material-ui.com/#/components/app-bar

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente