Reagire MDL si fonde Reagire con Material Design Lite

Google ha recentemente pubblicato una libreria chiamata Material Design Lite, che è una risorsa di frontend per gli sviluppatori. Stilizza automaticamente qualsiasi sito Web utilizzando le linee guida di progettazione dei materiali con CSS e JS precostruiti.

Questa è una struttura popolare per semplici progetti di sviluppo. React MDL combina il framework di Google con la libreria React per creare una risorsa di frontend a tutto tondo.

Il material design di Google è chiaramente il futuro di UI / UX nel mondo di Google. E con Material Design Lite è più facile che mai implementare queste funzionalità su qualsiasi sito Web con una libreria proprietaria open source.

React è anche il framework JS di frontend più popolare utilizzato per i componenti di visualizzazione frontend. Con React MDL puoi unire questi componenti React con la libreria MDL per ottenere una visualizzazione molto simile a quella che troverai nella documentazione online di Google.

Ecco un esempio di modello di esempio per farti un'idea di come appare.

Questa pagina non ha molti componenti React ma dimostra l'estetica del design dei materiali. Troverai molta più azione su questa demo creata usando i componenti React.

Se sei curioso di saperne di più, puoi trovare più informazioni su Material Design Lite sul repository GitHub. Da lì puoi scaricare il raw CSS e JS da implementare nella tua pagina, che supporta automaticamente tutti i browser moderni e un degrado aggraziato.

Sfortunatamente, poiché React MDL è ancora abbastanza nuovo, non ha il supporto completo per tutti i componenti.

Ma puoi vedere una lista completa qui inclusi piccoli demo per ognuno. Questo include anche parti del codice sorgente che puoi copiare / incollare nei tuoi progetti secondo necessità.

Vorrei non consiglia di imparare React MDL fino a quando non ti senti già a tuo agio con entrambe le librerie.

La suite Lite di Material Design è abbastanza semplice da avviare, ma React è molto più complesso.

Per saperne di più su MDL consulta la pagina delle domande frequenti sul loro sito ufficiale. Offre suggerimenti su dove utilizzare MDL, quali funzionalità offre e come si può inserire in un tipico flusso di lavoro WebDev.

Ma sinceramente, anche se non capisci Reagisci molto bene, puoi ancora cavartela con tutti i campioni sulla pagina dei componenti. Ad esempio, la pagina di testo ha campi di testo funzionanti che utilizzano la progettazione del materiale ma con frammenti di codice React.

Sentiti libero di giocare e vedere cosa puoi costruire. Entrambe le librerie sono completamente gratuite e open source per tutti i progetti, sia personali che commerciali.

Puoi scoprire di più dalla pagina React MDL GitHub se vuoi studiare la fonte e immergerti.