Uso di 'materiale-ui' con gemme di rotaie reattive?

Question

Vorrei utilizzare la libreria di componenti materiale-ui nella mia app Rails 4. Attualmente sto usando la gemma react-rails per aggiungere la compilazione .jsx alla pipeline degli asset. Ho aggiunto materiale-ui tramite rotaie-attivi nel Gemfile in questo modo:

source 'https://rails-assets.org' do 
    gem 'rails-assets-material-ui' 
end 

E ho richiesto la biblioteca nelle mie application.js file in questo modo:

//= require material-ui 

Tuttavia continuo a ricevere il errore "impossibile trovare il file 'material-ui". Come posso utilizzare la libreria dei componenti ui del materiale nella mia app Rails con la gemma react-rails?

Answer 1

Ok ecco quello che ho a lavorare finora ...

al Gemfile ho aggiunto:

gem 'react-rails' 
gem "browserify-rails" 

Questo ci dà la nostra reagire biblioteca, aiutanti e la compilazione JSX, nonché la possibilità di utilizzare la sytax require() per richiedere moduli nel nostro JS. browserify-rails ci consente anche di richiedere moduli npm nelle risorse di Rails tramite un file package.json.

Siamo in grado di aggiungere la libreria materiali-ui per la nostra applicazione tramite questo file package.json ...

"dependencies" : { 
    "browserify": "~> 10.2.4", 
    "browserify-incremental": "^3.0.1", 
    "material-ui": "0.13.1" 
    }, 

La biblioteca ui materiale usa la sintassi necessaria per unire file tutte le diverse componenti JSX insieme nella giusto ordine quindi questo è il motivo per cui abbiamo bisogno di usare browserify-rails.

Avanti per mantenere il nostro codice reagiscono insieme ho fatto una nuova directory in attività/javascript chiamato/reagire ...

react 
    L /components 
    L react.js 
    L react-libraries.js 
    L theme.js 

ora come parte del 'materiale-ui' dipendenze abbiamo la libreria reagire. Questo significa che al momento abbiamo due copie della biblioteca. Uno dalla gemma 'react-rails' e uno dalle dipendenze della libreria 'material-ui' da 'browserify-rails'. Usiamo l'uno dalle dipendenze 'materiale-ui' e lasciamo quello da 'react-rails'.

in react.js:

//= require ./react-libraries 
//= require react_ujs 
//= require_tree ./components 

Poi, nel reagire-libraries.js

//React Library 
React = require('react'); 
//Material Design Library 
MaterialUi = require('material-ui/lib'); 
injectTapEventPlugin = require('react-tap-event-plugin'); injectTapEventPlugin(); 
//Material Design Library Custom Theme 
MyRawTheme = require('./theme'); 
ThemeManager = require('material-ui/lib/styles/theme-manager'); 

Poi vogliamo includere tutto questo in cantiere patrimoniale con ...

//= require react/react 

in application.js.

Ora è possibile scrivere i componenti in file JSX in/reagiscono/componenti/ Si consiglia inoltre di namespace i componenti con ...

//Custom Components Namespace 
Components = {}; 

a reagire-libraries.js

È puoi personalizzare il tuo tema in theme.js come questo ...

Colors = require('material-ui/lib/styles/colors'); 
ColorManipulator = require('material-ui/lib/utils/color-manipulator'); 
Spacing = require('material-ui/lib/styles/spacing'); 

module.exports = { 
    spacing: Spacing, 
    fontFamily: 'Roboto, sans-serif', 
    palette: { 
    primary1Color: Colors.grey300, 
    primary2Color: Colors.grey300, 
    primary3Color: Colors.lightBlack, 
    accent1Color: '#01A9F4', 
    accent2Color: Colors.grey100, 
    accent3Color: Colors.grey500, 
    textColor: Colors.darkBlack, 
    alternateTextColor: Colors.white, 
    canvasColor: Colors.white, 
    borderColor: Colors.grey300, 
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3) 
    } 
}; 

Speranza che aiuta :)