web-dev-qa-db-fra.com

Comment utiliser le framework Material-UI?

Je prévois d'utiliser le framework CSS Material-UI ( http://material-ui.com ) afin de concevoir le front-end d'un site Web, mais je ne sais pas comment d'utiliser ce cadre.

Je ne connais pas beaucoup NPM, Browserify, etc. J'ai juste besoin de savoir comment commencer pour apprendre comment utiliser ce framework CSS.

Merci pour toute aide!

material-designmaterial-ui
30
jmosawy

Ne soyez pas intimidé par la complexité (apparente) du webpack et d'autres (excellents) outils de construction, et ne vous laissez pas décourager par des abrutis envieux qui disent des choses comme "Pour être honnête, je pense que vous avez un gros problème à utiliser ce genre de choses . "

La raison pour laquelle l'implémentation matérielle-utilisateur (utilisation) est basée sur ces outils est parce que c'est actuellement la meilleure façon d'écrire des logiciels et de comprendre cela et d'autres cadres est un excellent moyen d'apprendre pourquoi c'est la "bonne" façon et de devenir compétent à l'écriture de code modulaire de qualité.

Webpack et les autres outils de construction existent dans un seul but: créer un fichier "principal" à partir du code source de votre application qui peut être lu et livré au navigateur de vos utilisateurs de manière efficace. Il est loin le temps où nous écrivions un tas de balises include (script) pour chaque ressource (fichier) dont nous avons besoin dans nos pages et ainsi nos utilisateurs attendaient que tous ceux-ci soient téléchargés depuis notre serveur (ou plusieurs emplacements, par exemple: cdns) puis la page se chargeait. L'efficacité est basée sur le fait que vous pouvez fournir un fichier (souvent minifié/compressé) qui contient tout votre code et tout code dont il dépend (par exemple React ou même jQuery).

Les outils de construction accomplissent cela en vous demandant 3 choses: quel fichier commencer (fichier principal d'entrée), quels outils (chargeurs) utiliser pour traiter le code JavaScript non natif dans votre code (scss, jsx, etc.) et quel fichier créer comme résultat (sortie convertie et minifiée). Ce fichier de sortie sera celui que vous utiliserez dans votre balise d'importation/script html. Il contiendra votre code ainsi que toutes les autres dépendances, ce qui serait un cauchemar à inclure et à résoudre manuellement vous-même. Ici est un bon guide pour débutants.

Material-ui, comme beaucoup d'autres frameworks (raison pour laquelle j'ai pris le temps d'expliquer tout ce qui précède) est construit avec la modularité à l'esprit: des morceaux de code peuvent être "collés" ou "assemblés" comme Legos, afin de construire facilement pièces plus grandes. Pour ce faire, il vous suffit d'inclure les composants dont vous avez besoin dans n'importe quel composant que vous créez. Ce sont des composants React qui sont un moyen simple de définir (écrire/créer) les "blocs de construction" de votre site/application. Il y a des tonnes de super vidéos et tutoriels pour vous aider à démarrer = React (mon préféré est reactjsprogram.com par Tyler McGinnis).

Pour vous aider à démarrer avec material-ui, ils ont créé quelques exemples pour commencer en utilisant webpack . Suivez les étapes simples pour installer npm et les dépendances (vous pouvez les trouver dans package.json) et ouvrez le répertoire/src dans votre éditeur. Vous le découvrirez en un rien de temps.

Vous êtes sur la bonne voie avec la bonne attitude en posant des questions, en apprenant à être un bon développeur, en recherchant et en essayant de trouver le moyen le plus simple d'atteindre votre objectif.

39
acyuta108

Eu à peu près le même problème. Je voulais un moyen simple de commencer à utiliser Material-ui sans le charabia. Voici ce que j'ai fait:

npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js

Cela m'a donné un fichier javascript, material-ui.js, Je pourrais alors inclure dans mon HTML. Dans mon cas, j'utilise l'électron, voici donc mon 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>
23
dkantowitz

Material-UI est un ensemble de composants React en plus d'être un framework CSS. Je ne sais pas si vous pouvez en tirer grand profit sans comprendre React.

La façon la plus simple de commencer est d'installer le exemples et de commencer à partir de là.

Si vous ne voulez pas traiter avec un framework frontal comme React, et voulez simplement des fichiers CSS et JS avec un temps de configuration aussi rapide que Bootstrap, consultez la bibliothèque Materialise .

10
clay_to_n

Pour être honnête, je pense que vous avez un gros problème pour utiliser ce genre de choses.

Tout d'abord, cela dépend du framework View de Facebook appelé React donc vous devez bien connaître certaines choses de base.

Deuxièmement, React est totalement un truc javascript et si vous l'utilisez en codant du javascript simple, ce serait un autre gros problème qui pourrait vous arrêter. Sinon, si vous utilisez son sucre de syntaxe appelé jsx, vous devez toujours payer beaucoup de temps pour apprendre bien pour que vous puissiez savoir comment fonctionne React et ensuite vous pouvez l'utiliser dans votre projet.

Troisièmement, avant que ce qui précède ne se produise, il y a encore plusieurs choses requises que vous n'avez pas besoin de bien connaître les NodeJ ou le webpack ou le NPM mais au moins vous devez bien savoir comment les utiliser comme outils simples.

Alors, est-ce un must que vous n'ayez pas d'autre choix que de devoir utiliser ce genre de choses et de n'agir que comme un simple framework CSS?

Si non! vous pouvez abandonner maintenant sauf que vous êtes prêt à apprendre des tonnes de dépendances !!!

Si oui! Je vous conseille d'installer d'abord nodejs puis d'installer npm puis d'utiliser npm pour installer react peut-être avez-vous encore besoin d'installer certains outils comme babel browserify ou webpack (le meilleur) puis plonger dans React et alors vous pourriez commencer à apprendre à utiliser les sons MUI ~ ... masse

Il n'y a pas de moyen de ramassage rapide pour MUI comme ils l'ont dit!

3
Joephon

Si vous utilisez le react + redux, vous pouvez utiliser le https://github.com/takanabe/react-redux-material_ui-boilerplate

modèle.

2
Ford Guo

J'ai écrit un exemple de projet de nœud montrant comment regrouper un composant React pour la consommation dans des sites Web non réactifs à l'aide de Webpack. C'est une approche similaire à celle de dkantowitz, sauf qu'elle supprime la nécessité d'introduire react ou reactDom sur le site Web consommateur.

L'exemple tel qu'il devrait être étendu pour permettre une utilisation avec plusieurs composants (comme le matériel-ui l'est) mais je pense qu'il fournit un bon point de départ pour voir ce qui est impliqué avec webpack et babel, etc.

1
witnessmenow