Article original : Learn React and Tailwind CSS for Front End Development

React et Tailwind CSS sont des outils populaires pour le développement web frontend. Si vous souhaitez devenir développeur frontend, les apprendre est un excellent point de départ.

Nous venons de publier un cours sur la chaîne YouTube freeCodeCamp.org qui vous enseignera React pour la création de sites web. De plus, vous apprendrez Tailwind CSS, un framework populaire pour le style des sites web. Créé par Alvin Zablan, ce cours vous guide étape par étape à travers la construction de projets réels tout en apprenant les bases du développement basé sur les composants et du style utilitaire.

Vous commencerez par créer votre première application React, puis vous apprendrez à rendre des composants, à passer des props et à maîtriser la mise en page avec les classes puissantes de Tailwind. Vous gagnerez en confiance dans la gestion des événements, la gestion de l'état et la conception d'interfaces réactives à partir de zéro. À la fin, vous serez prêt à créer de belles applications web interactives avec React et Tailwind CSS.

Voici les sections de ce cours :

  • Introduction au cours

  • Exercice : Votre première application

  • Exercice : Rendu des composants

  • Passer des props

  • Passer des props II

  • Passer des props III

  • Conférence : Introduction à Tailwind CSS

  • Exercice : Bases de Tailwind

  • Conférence : Padding & Margin

  • Exercice : Style des boutons

  • Conférence : ClassNames de Tailwind

  • Exercice : Composant de bouton

  • Conférence : Flex Box

  • Exercice : Flex

  • Conférence : Flex Column

  • Exercice : Flex II

  • Conférence : Analyse des mises en page

  • Conférence : Documentation de Tailwind

  • Exercice : Analyse des mises en page

  • Exercice : Conception de la page de recherche

  • Conférence : Gestion des événements et état

  • Exercice : Événement de clic

  • Exercice : Rendu conditionnel

  • Exercice : Compteur

  • Exercice : Interrupteur lumineux

  • Exercice : Carousel d'images

  • Exercice : Carousel de chats

  • Conclusion

Regardez le cours complet sur la chaîne YouTube freeCodeCamp.org (5 heures de visionnage).