Mam zamiar użyć frameworka CSS Material-UI (http://material-ui.com) w celu zaprojektowania strony front-end strony internetowej, ale nie mam pojęcia, jak korzystać z tego środowiska.Jak korzystać z frameworka material-ui?
Nie jestem zbytnio zaznajomiony z NPM, Browserify, itp. Po prostu muszę wiedzieć, jak zacząć, aby nauczyć się sposobu korzystania z tego szkieletu CSS.
Dzięki za pomoc!
Material-UI to zestaw komponentów React, oprócz tego, że jest szkieletem CSS. Nie wiem, czy można uzyskać z tego wiele korzyści bez zrozumienia React.
Najprostszym sposobem na rozpoczęcie jest zainstalowanie examples i rozpoczęcie pracy od tego miejsca.
Jeśli nie chcesz zajmować się frakcją frontendową, taką jak React, i po prostu potrzebujesz plików CSS i JS z czasem instalacji tak szybkim jak Bootstrap, sprawdź bibliotekę Materialize.
Próbowałem używać Materialise, i szczerze mówiąc, dostaniesz się w ten sam bałagan narzędziowy, jak wszystko inne. Generowany przez niego CSS jest wysoce zbędny, dlatego trudno jest dokonać znaczącego dostosowania bez edycji kodu źródłowego SASS i budowania go. –
Materialise działa tylko w przeglądarkach Chrome, IE, Firefox i Safari. –
Szczerze mówiąc, myślę, że masz duży problem z używaniem tych rzeczy.
Po pierwsze, zależy to od struktury widoku Facebook o nazwie React, więc musisz znać dobrze kilka podstawowych rzeczy.
Po drugie, React jest całkowicie javascriptem i jeśli użyjesz go przez kodowanie zwykłego javascripta, byłby to inny poważny problem, który może cię powstrzymać. Inaczej, jeśli użyjesz tego składniowego cukru o nazwie jsx, nadal będziesz musiał zapłacić dużo Czasy, aby się dobrze nauczyć, abyś mógł się dowiedzieć, jak działa React, a następnie możesz go użyć w swoim projekcie.
Po trzecie, zanim się to stanie, wciąż jest kilka rzeczy, których nie trzeba znać dobrze NodeJs lub webpack lub NPM, ale przynajmniej powinieneś wiedzieć, jak używać ich jako prostych narzędzi.
Czy jest więc koniecznością, że nie masz innego wyjścia, jak tylko korzystać z tego i działać tylko jako prosta struktura css?
Jeśli nie! możesz teraz zrezygnować z tego, że jesteś gotów nauczyć się mnóstwa zależności !!!
Jeśli tak! Radzę ci najpierw zainstalować nodejs, a następnie zainstalować npm, a następnie użyć npm do instalacji, reagować, może nadal musisz zainstalować jakieś narzędzia, takie jak babel browserify lub webpack (najlepiej), a następnie zagłębić się w React, a potem możesz zacząć uczyć się używać MUI ~ brzmi ... masa
Nie ma szybkiej metody odbioru MUI, tak jak powiedzieli!
To, co mówisz o React, jest prawdą. Jednakże, nawet jeśli wiesz, jak używać React (w pewnym sensie), materiał-ui wymaga nauki integracji z całą gamą narzędzi programistycznych, takich jak przeglądarka internetowa lub pakiet internetowy i/lub gulp. Czy to naprawdę konieczne? To znaczy, czy nie może to być tylko plik JS, który mogę dołączyć do React, Babel itp.? –
Nie, nie sądzę, że to konieczne. Jak wiesz, MUI to nie tylko pojedynczy plik, zawiera on wiele komponentów, więc jeśli użyjesz WebPack lub browserify lub Glue do pracy, będzie lepiej. Nie sądzę, że jest to konieczne, oczywiście możesz dołączyć każdy pojedynczy plik za pomocą funkcji wymagającej lub słowa kluczowego importu ES6. Jeśli zainstalowałeś całe MUI jako zależność przez npm, możesz dołączyć każdy plik, który chcesz. – Joephon
Miał prawie ten sam problem. Poszukiwany prosty sposób na rozpoczęcie używania material-ui bez bełkotu. Oto co zrobiłem:
npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js
To dało mi plik JavaScript, material-ui.js, mógłbym wtedy to w moim HTML. W moim przypadku używam elektron, więc to jest mój HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content"></div>
<script>
require('./material-ui.js')
</script>
<script type="text/babel">
import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';
const FlatButtonExampleSimple =() => (
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} />
<FlatButton label="Secondary" secondary={true} />
<FlatButton label="Disabled" disabled={true} />
</div>
);
ReactDOM.render(
<FlatButtonExampleSimple />,
document.getElementById('content')
);
</script>
</body>
</html>
Gdzie wstawiasz 'npm install material-ui'? –
To polecenie uruchamiane z powłoki. Nie pasuje do żadnego pliku. – dkantowitz
Ale gdzie w wierszu polecenia? Gdziekolwiek go wypróbuję, mówi "" npm "nie jest rozpoznawany jako wewnętrzne lub zewnętrzne polecenie" –
Nie być zastraszani przez (pozorna) złożoności WebPack i inne (wielki) budować narzędzia, a nie zniechęcać zazdrośni szarpiący się, którzy mówią rzeczy takie jak: "Szczerze mówiąc, myślę, że masz duży problem z używaniem tych rzeczy."
Powodem, dla którego implementacja material-ui jest oparta na tych narzędziach, jest obecnie najlepszy sposób na pisanie oprogramowania i zrozumienie tego, a inne frameworki to świetny sposób, aby dowiedzieć się, dlaczego jest to" właściwe " sposób i stać się biegły w pisaniu wysokiej jakości kodu modułowego:
Pakiety internetowe i inne narzędzia do kompilacji istnieją w jednym celu: aby utworzyć jeden "główny" plik z kodu źródłowego aplikacji, który można odczytać i dostarczyć użytkownikom. Przeglądarka w efektywny sposób: Dawno już minęły czasy, w których napisalibyśmy kilka tagów include (script) dla każdego zasobu (pliku), który potrzebujemy na naszych stronach, a tym samym kazali naszym użytkownikom czekać aż wszystkie te zostały pobrane z naszego serwera (lub wiele lokalizacji, np.: cdns), a następnie załaduje się strona y opiera się na fakcie, że możesz dostarczyć jeden (często zminimalizowany/skompresowany) plik, który zawiera cały twój kod i dowolny kod, od którego zależy (np. Reaguj lub nawet jQuery).
Narzędzia do budowania osiągają to, prosząc o 3 rzeczy: od jakiego pliku rozpocząć (główny plik wejściowy), jakie narzędzia (ładowarki) są używane do przetwarzania kodu macierzystego JavaScript w twoim kodzie (scss, jsx itp.) I jaki plik utworzyć jako wynik (skonwertowane i zminimalizowane dane wyjściowe). Ten plik wyjściowy będzie używany w znaczniku importu/skryptu html. Będzie zawierał Twój kod oraz wszystkie inne zależności, które byłyby koszmarem, który możesz uwzględnić samodzielnie i rozwiązać samodzielnie. Here to dobry przewodnik dla początkujących.
Material-ui, podobnie jak wiele innych frameworków (powód, dla którego poświęciłem czas na wytłumaczenie wszystkich powyższych), jest zbudowany z myślą o modułowej budowie: kawałki kodu mogą być "sklejone" lub "skręcone" razem jak Legos, w aby łatwo budować większe części. Robisz to, włączając komponenty, których potrzebujesz do dowolnego komponentu, który tworzysz. Są komponentami React, które są prostym sposobem definiowania (pisania/tworzenia) "klocków" twojej witryny/aplikacji. Jest mnóstwo świetnych filmów i samouczków, dzięki którym zaczniesz z Reactem (moim ulubionym jest reactjsprogram.com autorstwa Tylera McGinnisa).
Aby zacząć korzystać z materiałów, utworzyli kilka przykładów, aby rozpocząć using webpack. Wykonaj proste kroki, aby zainstalować npm i zależności (możesz je znaleźć w pliku package.json) i otworzyć katalog/src w edytorze. Zrozumiesz to w mgnieniu oka.
Jesteś na właściwej drodze z właściwą postawą, zadając pytania, ucząc się być dobrym programistą, szukając i próbując znaleźć najprostszy sposób na osiągnięcie celu.
Link "using webpack" jest zepsuty – MarioAraya
Czy można go używać bez React? Po prostu '.css' i' .js' i ewentualnie klejnot? –
Napisałem sample node project pokazujący, jak połączyć komponent reagujący do konsumpcji na stronach, które nie reagują za pomocą pakietu internetowego. Jest to podobne podejście do dkantowitz, z tym wyjątkiem, że eliminuje potrzebę wprowadzania reakcji lub reactDom na stronę konsumującą.
Przykład jak to musiałoby być przedłużony, aby umożliwić korzystanie z wielu komponentów (jak materialnego-ui jest), ale myślę, że stanowi dobry punkt wyjścia dla widząc co jest zaangażowany WebPack i babel etc
If użyjesz opcji reakcji + redux, możesz użyć szablonu https://github.com/takanabe/react-redux-material_ui-boilerplate
Znaleziono rozwiązanie? Wciąż błądzę, jak zacząć rozwój. Jestem w dokładnie tym samym stanie, o jakim wspomniałeś powyżej. – bozzmob
Witam @bozzmob i wszystkie, mogę polecić ci mój [przykład Razzle Material UI w stylu] (https://github.com/kireerik/razzle-material-ui-styled-example). –
Również tutaj jest mój artykuł o tym, jak używać Material-UI: [Material-UI: Rozpocznij (szybko!) ⚡ React 16+] (https: //www.codementor.io/kireerik/material-ui-get-started-fast-react-16-fjan7erke) –