W pierwszym artykule poświęconym aplikacji wspomniałam, że chcę skorzystać z Google’s Material Design. Osobiście bardzo lubię aplikacje zgodne z tym stylem, ale sama jeszcze z niego nie korzystałam. Więc czemu nie miałabym spróbować przy tym projekcie? W końcu i tak opiera się na samych nowościach (dla mnie :D).
Okazało się, że był to strzał w dziesiątkę! Dlaczego?
Po pierwsze dlatego, że ktoś już wpadł na genialny pomysł, by przygotować zestaw komponentów React’owych implementujących zasady Google’s Material Design. Na dodatek jest genialny! Jak nazwano to połączenie?
Material UI
Projekt jest świetnie opisany, dokumentacja przejrzysta, jasna. Wrażenia niesamowite! Tworzenie interfejsu aplikacji z wykorzystaniem Material UI jest tak szybkie i wygodne. Zdecydowanie polecam!
Jak wygląda interfejs mojej aplikacji?
Przykład fajnego demo zbudowanego w oparciu o Material UI?
Admin on Rest (jeden z przykładów zaprezentowanych w sekcji Showcase)
A mam nadzieję, że niedługo będę mogła pokazać demo mojej aplikacji 😉
Jedynym minusem (?) jest to, że projekt jest teraz bardzo aktywnie rozwijany. 636 otwartych na chwilę obecną issues’ów. Zaprzęgłam go u siebie z 1,5 tygodnia temu a już zdążyła się pojawić nowa wersja. A na pewno będę chciała mieć najnowszą możliwą wersję w projekcie więc czeka mnie upgrade.
Jeśli chodzi o licencję – MIT (również moja ulubiona).
Wymagania wstępne
Przed zapoznaniem się z Material UI warto rozumieć React JS. Dlaczego? Material UI to tak naprawdę zbiór komponentów React’owych. Ciężko by było na nich operować bez wiedzy w temacie React’a.
Tak samo warto ogarniać podstawy Node’a (material-ui dostępny jest jako npm packege).
Oczywiście o HTML5, CSS, JavaScript nie muszę wspominać?
Jak wygląda instalacja?
Możesz ją zainstalować wykorzystując npm. Polecenie:
|
1 |
npm install material-ui |
zaciąga najnowszą wersję stabilną.
Gotowe ?
O czym warto pamiętać na starcie?
Od wersji 0.15.0 (aktualna 0.17.1), komponenty Material-UI potrzebują mieć określony theme (szablon). Najszybszym sposobem, by go dostarczyć jest wykorzystanie MuiThemeProvider’a.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react'; import ReactDOM from 'react-dom'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; const App = () => ( <MuiThemeProvider> // twoje komponenty </MuiThemeProvider> ); ReactDOM.render( <App />, document.getElementById('app') ); |
Ciężko będzie Ci się też również obejść bez react-tap-event-plugin. Pozwala on nasłuchiwać na zdarzenia dotknięcia, kliknięcia komponentu.
|
1 2 3 4 5 |
import injectTapEventPlugin from 'react-tap-event-plugin'; // Needed for onTouchTap // http://stackoverflow.com/a/34015469/988941 injectTapEventPlugin(); |
No i naprawdę warto zajrzeć do dokumentacji Material UI. Na początku zwłaszcza do sekcji:
Jak wygląda tworzenie aplikacji z Material UI?
Wyobraź sobie, że wyposażasz mieszkanie. Idziesz do sklepu, oglądasz i bierzesz to i to i to ?
Analogicznie wygląda praca z Material UI.
Masz menu komponentów spośród których wybierasz potrzebne elementy.
Zdecydowałeś się na pozycję z menu? No to podejrzyj kod ?
Ogólnie bardzo przyjemna i wygodna sprawa.
Jeśli zajrzysz do mojego projektu zobaczysz, że mało tam jak narazie CSS’a. UI został stworzony z wykorzystaniem domyślnie wyglądających komponentów Material UI. (+ Flexbox)
Co może Ci się jeszcze przydać?
Alternatywne frameworki
- React-Bootstrap (Bootstrap v3)
- React-Foundation
- React-MDL (React Components for Material Design Lite)
- MUI
Oczywiście, żeby zbudować widok w React JS nie musisz używać żadnego z wymienionych frameworków wystarczy JSX + CSS (komponenty React’owe piszesz w JSX – co to JSX?).
Co sądzisz? Na mnie Material UI zrobił naprawdę świetne wrażenie!
Jeśli masz pytania – śmiało dawaj znać w komentarzu 😉
