React MDL fusionne React avec Material Design Lite

Google a récemment mis en place une bibliothèque appelée Material Design Lite, une ressource frontale pour les développeurs. Il style automatiquement tout site Web en utilisant les directives de conception de matériel avec CSS et JS prédéfinis.

C'est un framework populaire pour les projets de développement simples. React MDL combine le framework de Google avec la bibliothèque React pour créer une ressource frontale complète.

La conception matérielle de Google est clairement l'avenir de UI / UX dans le monde de Google. Et avec Material Design Lite, il est plus facile que jamais de mettre en œuvre ces fonctionnalités sur n’importe quel site Web avec une bibliothèque propriétaire open source..

React est également de loin le framework JS frontend le plus populaire utilisé pour les composants de vue frontale. Avec React MDL, vous pouvez fusionner ces composants React avec la bibliothèque MDL pour obtenir une vue similaire à celle que vous trouverez dans la documentation en ligne de Google..

Voici un exemple de modèle d'article pour vous donner une idée de son apparence..

Cette page ne contient pas beaucoup de composants React, mais elle démontre l’esthétique du design des matériaux. Vous trouverez beaucoup plus d'action sur cette démo construite à l'aide de composants React.

Vous pouvez réellement trouver plus d’informations sur Material Design Lite sur le dépôt GitHub si vous êtes curieux d’en apprendre plus. De là, vous pouvez télécharger les fichiers CSS et JS bruts à implémenter dans votre page, qui prend automatiquement en charge tous les navigateurs modernes et les dégradations élégantes..

Malheureusement, React MDL étant encore relativement récent, il ne prend pas totalement en charge tous les composants..

Mais vous pouvez voir une liste complète ici, y compris des petites démos pour chacun. Cela inclut également des morceaux de code source que vous pouvez copier / coller dans vos propres projets selon vos besoins..

je voudrais ne pas recommande d'apprendre React MDL jusqu'à ce que vous vous sentiez déjà à l'aise avec les deux bibliothèques.

La suite Material Design Lite est assez simple à démarrer mais React est beaucoup plus complexe.

Pour en savoir plus sur MDL, consultez la page FAQ sur leur site officiel. Il offre des conseils sur l'utilisation de MDL, sur ses fonctionnalités et sur son intégration dans un flux de travail webdev typique..

Mais honnêtement, même si vous ne comprenez pas très bien React, vous pouvez toujours vous débrouiller avec tous les exemples de la page des composants. Par exemple, la page de champ de texte contient des champs de travail utilisant la conception de matériau mais avec des extraits de code React..

N'hésitez pas à jouer et à voir ce que vous pouvez construire. Les deux bibliothèques sont entièrement gratuites et à code source ouvert pour tous les projets, qu'ils soient personnels ou commerciaux..

Vous pouvez en savoir plus sur la page React MDL GitHub si vous souhaitez étudier la source et plonger dans.