8 idées de projets React.js pour vous aider à commencer à apprendre par la pratique

L'une des meilleures façons d'apprendre est de faire. Mais souvent, les développeurs ont du mal avec la grande question "que dois-je construire?"

Voici 8 idées de projets, accompagnées de fiches de projet et d'idées de mise en page, pour vous permettre de commencer à apprendre par la pratique.

  • Entreprise et monde réel: tableau de bord des statistiques cartographiques
  • Amusant et intéressant: Instrument de musique
  • Personnel et portfolio: Blog
  • Productivité: Notebook
  • Puzzles et jeux: Space Invaders
  • Outils et bibliothèques: thème Framework
  • Modules complémentaires de projet: Webmentions
  • Clones: chasse aux produits

Ceci est un aperçu du livre électronique gratuit 50 projets pour React & the Static Web. Vous pouvez trouver les 50 idées de projets complètes, y compris ces 8 sur 50reactprojects.com.

Tableau de bord des statistiques cartographiques

Catégorie: Business & Real-World

Créez un tableau de bord cartographique qui affiche des statistiques et des informations géographiques sur COVID-19.

Bref

Faire face à une pandémie mondiale signifie que des virus comme le coronavirus ont un impact différent sur le monde en fonction de leur emplacement géographique.

Avoir une carte avec une ventilation des statistiques de chaque pays est un moyen utile de pouvoir déterminer des choses comme les pays qui ont été le plus touchés.

Niveau 1

Le moyen le plus simple de voir les statistiques d'un pays à l'autre est d'avoir une carte que vous pouvez parcourir avec les statistiques de chaque pays disponibles à côté de ce pays.

Créez une application de cartographie qui utilise l'API du coronavirus maladie.sh pour ajouter des marqueurs à la carte pour chaque pays ainsi que le nombre de cas de COVID-19.

Niveau 2

S'il est utile de disposer des statistiques pour chaque pays, il peut être utile de pouvoir comparer ces statistiques au nombre de cas dans le monde entier.

Ajoutez un tableau de bord de statistiques qui montre le nombre de cas COVID-19 dans le monde ainsi que toute autre statistique utile de l'API.

Niveau 3

Obtenir des statistiques actuelles est un bon moyen de comprendre l'état actuel du monde, mais comment cela se compare-t-il historiquement?

Utilisez l'API de données historiques pour afficher des graphiques sur le tableau de bord qui fournissent un contexte à la croissance et à la propagation du virus.

Faire

  • Créer une nouvelle application cartographique
  • Récupérer les données des pays API
  • Ajouter des marqueurs à la carte
  • Ajouter des statistiques aux marqueurs
  • Récupérer les données globales de l'API
  • Créer un tableau de bord de statistiques
  • Ajouter des statistiques globales
  • Récupérer les données historiques de l'API
  • Ajouter des graphiques à la carte

Boîte à outils

  • API Open Disease Data (disease.sh)
  • Dépliant React (react-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

Tutoriels

  • Comment créer une application de tableau de bord et de carte Coronavirus (COVID-19) dans React avec Gatsby et Leaflet (freecodecamp.org)
  • Comment ajouter des statistiques de cas de coronavirus (COVID-19) à votre tableau de bord de carte React avec Gatsby (freecodecamp.org)
  • Cartographie avec React Leaflet (egghead.io)

Inspiration

  • Tableau de bord COVID-19 par le Center for Systems Science and Engineering (CSSE) de l'Université Johns Hopkins (JHU) (coronavirus.jhu.ed)
  • Démonstration du tableau de bord Coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

Idée de mise en page

Instrument de musique

Catégorie: Fun & Intéressant

Créez un piano interactif que vous pouvez utiliser pour jouer de la musique avec votre clavier.

Bref

Tout le monde n'a pas le luxe de posséder un instrument de musique, mais peut-être que ces personnes ont un ordinateur portable, un téléphone ou une tablette. Avoir un piano est un moyen puissant de permettre aux gens de jouer de la musique même s'ils n'en avaient pas eu l'occasion auparavant.

Niveau 1

En utilisant le navigateur et les API audio Web, nous pouvons créer des sons qui, lorsqu'ils sont assemblés, peuvent ressembler à de la musique.

Créez un ensemble de boutons qui jouent des notes d'une gamme lorsque vous cliquez dessus.

Niveau 2

Bien que tout le monde n'ait pas joué d'un instrument auparavant, le concept et l'interface d'un instrument comme un piano sont généralement plus intuitifs qu'un tas de boutons.

Créez une disposition de piano à l'aide de boutons qui fonctionnent en cliquant sur le bouton ou en utilisant le clavier physique.

Niveau 3

Nous avons peut-être un espace limité dans le navigateur, mais il existe un large éventail de notes, d'échelles et de sons qu'un clavier électrique pourrait être capable de produire avec quelques effets supplémentaires.

Créez des bascules d'effets qui modifient le son des notes lorsqu'elles sont activées.

Faire

  • Créer des boutons
  • Jouer le son lorsque vous cliquez dessus
  • Organiser les notes sur une échelle
  • Créer une disposition de piano
  • Définir les événements du clavier
  • Créer une mise en page d'effets
  • Basculer les effets audio

Boîte à outils

  • React HotKeys (github.com)

Tutoriels

  • Construire un piano avec React Hooks (dev.to)
  • Comment créer un clavier de piano à l'aide de JavaScript vanille (freecodecamp.org)
  • Construire un piano avec tone.js! (dev.to)
  • Comment j'ai fait un piano en seulement 1 Ko de JavaScript (frankforce.com)

Inspiration

  • React Guitar (react-guitar.com)

Idée de mise en page

Blog

Catégorie: Personal & Portfolio

Créez un blog que vous pouvez utiliser pour partager vos expériences de carrière et vos projets.

Bref

Quelle que soit votre carrière, avoir un blog pour partager vos expériences est un bon moyen de faire savoir aux gens sur quoi vous travaillez et d'aider les autres à apprendre de vos expériences.

C'est aussi un moyen de renforcer ce que vous avez appris afin de pouvoir le référencer à l'avenir.

Niveau 1

Pour pouvoir partager vos expériences, vous avez besoin d'une structure de site Web qui vous permettra de créer du nouveau contenu et de gérer le contenu existant.

Pour ce faire, vous pouvez créer des fichiers de démarque que votre site Web utilise pour créer de nouvelles pages et afficher les publications.

Créez un blog en utilisant des fichiers de démarque comme source de contenu.

Niveau 2

Avoir votre contenu dans des fichiers de démarque est un bon moyen de gérer le contenu statique, mais vous ne voudrez peut-être pas avoir à modifier le code chaque fois que vous écrivez ou modifiez un article.

Intégrez un système de gestion de contenu qui vous permet d'ajouter du nouveau contenu ou de modifier l'existant avec une interface utilisateur agréable.

Niveau 3

Si vous partagez du code sur votre blog, HTML prend en charge nativement le code et les balises pré qui vous aident à formater le code de manière lisible. Mais cela n'inclut pas la coloration syntaxique qui contribue à améliorer la lisibilité.

Intégrez un surligneur de syntaxe qui rend les blocs de code plus lisibles.

Faire

  • Créer un blog
  • Ajouter le premier contenu statique
  • Contenu statique source
  • Intégrer le CMS
  • Ajouter du code au contenu
  • Ajouter une coloration syntaxique

Boîte à outils

  • CMS Netlify (netlifycms.org)
  • Prism.js (prismjs.com)

Tutoriels

  • Créer un blog Gatsby avec Netlify CMS (gatsbyjs.org)
  • Comment créer votre blog de codage à partir de zéro avec Gatsby et MDX (freecodecamp.org)

Inspiration

  • Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Idée de mise en page

Carnet

Catégorie: Productivité

Créez une application de bloc-notes pour ajouter, gérer et organiser un groupe de notes.

Bref

Prendre des notes est un excellent moyen de nous assurer que nous gardons une trace de nos pensées ou que nous nous souvenons des points importants d'une réunion. Pouvoir les gérer et les organiser facilement est important pour les retrouver plus tard!

Niveau 1

La première exigence d'un ordinateur portable est de pouvoir prendre des notes. Cela peut être assez simple à démarrer, où vous avez vraiment besoin d'une sorte d'entrée qui collecte ce que vous écrivez et le stocke quelque part pour plus tard.

Créez un formulaire pour ajouter de nouvelles notes et les afficher dans une liste.

Niveau 2

Afin de retrouver vos notes plus tard, vous voulez un moyen d'organiser ces notes et un moyen de les rechercher. Cela inclut l'ajout de catégories ou d'un système de balisage ainsi que d'une interface utilisateur pour effectuer des recherches.

Ajoutez la possibilité d'étiqueter ou de catégoriser les notes et une entrée pour les rechercher.

Niveau 3

Que nous le réalisions ou non, nous pouvons trouver des liens entre nos pensées et, plus important encore, nos notes, où nous pouvons profiter de ce réseau de pensées pour notre cahier.

Ajoutez des liens de notes inspirés de Roam Research pour créer un réseau de pensées.

Faire

  • Créer un formulaire
  • Stocker de nouvelles notes
  • Notes de la liste
  • Ajouter des balises ou des catégories
  • Ajouter une recherche de note
  • Ajouter un réseau de notes

Boîte à outils

  • Thème Gatsby Brain (github.com)
  • Fuse.js (fusejs.io)

Tutoriels

  • Comment ajouter une recherche à une application React avec Fuse.js (freecodecamp.org)

Inspiration

  • Mousse (foambubble.github.io)
  • Recherche itinérante (roamresearch.com)
  • Thème Gatsby Garden (github.com)

Idée de mise en page

Envahisseurs de l'espace

Catégorie: Puzzles & Jeux

Créez un jeu de tir de vaisseau spatial Space Invaders pour tirer sur plusieurs vagues de navires ennemis.

Bref

Space Invaders est un classique d'arcade qui vous met dans un vaisseau spatial contre une invasion extraterrestre. Lorsque vous essayez de les abattre, ils ripostent et vous ne disposez que d'une protection limitée avant de pouvoir être touché.

Niveau 1

La partie principale du jeu est que vous vous déplacez autour d'un vaisseau spatial en essayant de frapper un groupe d'extraterrestres avec vos armes. Tant qu'il y en a un parmi vous, il y en a beaucoup.

Créez un vaisseau spatial qui peut se déplacer et tirer sur des extraterrestres qui ne bougent pas.

Niveau 2

Ce qui rend le jeu délicat, c'est que les extraterrestres bougent constamment. Chaque fois qu'ils touchent le bord de l'aire de jeu, ils descendent et accélèrent, se rapprochant de votre vaisseau.

Ajoutez du mouvement aux extraterrestres allant côte à côte sur l'aire de jeu. Chaque fois que les extraterrestres atteignent un côté, ils devraient descendre d'un niveau. Ils devraient également accélérer à certains intervalles.

Niveau 3

Vous êtes seul, mais heureusement, vous pouvez obtenir une certaine protection. Vous avez des boucliers derrière lesquels vous pouvez vous cacher et qui vous protègent pendant qu'ils durent.

Créez plusieurs boucliers devant le vaisseau spatial du joueur qui peuvent subir une quantité limitée de dégâts.

Faire

  • Créer un nouveau jeu
  • Créer des extraterrestres statiques
  • Créer un vaisseau spatial de joueur
  • Ajouter des commandes de vaisseau spatial
  • Ajouter une arme spatiale
  • Configurer les dégâts extraterrestres
  • Faire riposter les extraterrestres
  • Faire bouger les extraterrestres
  • Ajouter des intervalles extraterrestres
  • Ajouter des boucliers

Tutoriels

  • Apprenez JavaScript en créant 7 jeux (freecodecamp.org)

Inspiration

  • Space Invaders (codepen.io)

Idée de mise en page

Thème du cadre

Catégorie: Outils et bibliothèques

Créez un thème Gatsby qui configure un projet avec le framework CSS Tailwind.

Bref

En tant que développeurs, nous devons généralement faire un tas d'étapes similaires chaque fois que nous créons un nouveau projet. Mais des outils tels que les thèmes nous permettent de résumer ces étapes et de les regrouper d'une manière facile à utiliser qui peut fonctionner pour tout nouveau projet.

Niveau 1

Les thèmes Gatsby sont un système de type plugin dans lequel nous pouvons profiter du pipeline Gatsby pour partager des fonctionnalités sous forme de package sur npm.

Cela ouvre la porte à vraiment tout ce que nous ferions dans un site Gatsby, mais en le rendant réutilisable sur n'importe quel site Gatsby.

Créez un nouveau thème Gatsby qui, lorsqu'il est utilisé, crée une nouvelle page de guide de style sur tout projet auquel il est ajouté.

Niveau 2

Le but des thèmes n'est pas seulement de créer des pages, mais d'ajouter des fonctionnalités qui nous rendent productifs. Cela inclut des éléments tels que les cadres et les configurations de projet.

Ajoutez un framework CSS au thème Gatsby qui permet au projet qu'il a ajouté d'utiliser ce framework.

Niveau 3

Parfois, les thèmes ne sont meilleurs que comme outils, parfois il est utile d'avoir des opinions. Une façon d'ajouter des fonctionnalités utiles à un framework CSS est de créer des composants de stock.

Créez des composants React réutilisables à l'aide du framework CSS qui peuvent être utilisés dans le projet auquel le thème est ajouté.

Faire

  • Créer un nouveau thème
  • Ajouter à l'exemple de projet
  • Créer une nouvelle page de style
  • Ajouter un framework CSS
  • Utilisez CSS dans l'exemple
  • Créer des composants
  • Utiliser des composants

Boîte à outils

  • Thèmes Gatsby (gatsbyjs.org)
  • Vent arrière (tailwindcss.com)

Tutoriels

  • Créer un thème (gatsbyjs.org)
  • Qu'est-ce que Tailwind CSS et comment puis-je l'ajouter à mon site Web ou à mon application React? (freecodecamp.org)

Inspiration

  • Thème Gatsby Tailwind (github.com)

Idée de mise en page

Webmentions

Catégorie: Modules complémentaires de projet

Ajoutez l'intégration des mentions Web à un site Web qui montre les interactions Twitter avec le site Web.

Bref

L'interaction sociale est un moyen efficace d'amener plus d'audience et de conversation sur les sujets sur lesquels nous écrivons.

Avoir quelque chose sur un site Web montre que l'interaction peut être utile à la fois pour inciter les gens à vouloir s'impliquer ou pour leur donner l'impression de pouvoir en faire partie.

Niveau 1

Afin d'utiliser les Webmentions, un site Web doit être configuré avec des balises Meta pour fournir des informations.

Ajoutez les balises méta appropriées à un site Web et validez son utilisation avec webmention.io.

Niveau 2

L'API Webmentions est un moyen de voir par programmation les connexions dans les interactions sociales à partir d'une URL de votre site Web. Il vous permet d'obtenir le type d'interaction et même l'avatar du profil de la personne.

Connectez un site Web à Webmentions et ajoutez une liste d'interactions sociales aux pages d'articles de blog.

Niveau 3

Maintenant que le site Web affiche toutes les interactions, il devrait y avoir un moyen simple de rejoindre la conversation.

Ajoutez un lien social qui, une fois cliqué, crée un tweet avec un lien vers la page.

Faire

  • Ajouter des balises méta au site Web
  • Valider les balises meta
  • Connectez-vous à Webmention
  • Connectez-vous social à Bridgy
  • Répertorier les interactions
  • Ajouter un bouton de tweet

Boîte à outils

  • Webmention.io (webmention.io)
  • Bridgy (brid.gy)
  • Webmention du plugin Gatsby (github.com)

Tutoriels

  • Indieweb pt2: Utilisation de Webmentions dans Eleventy (mxb.dev)
  • Webmentions côté client (swyx.io)
  • Premiers pas avec Webmentions dans Gatsby (knutmelvaer.no)
  • Création de sites Web de plugins Gatsby (christopherbiscardi.com)

Inspiration

  • Knut Melvær (knutmelvaer.no)
  • Swyx (swyx.io)

Idée de mise en page

Recherche de produits

Catégorie: Clones

Créez un clone de recherche de produits qui permet aux utilisateurs de publier un nouveau produit avec des notes.

Bref

Nous vivons tous pour des produits, qu'il s'agisse de nos téléphones mobiles ou des applications que nous utilisons sur nos ordinateurs portables.

Bien qu'il existe des tonnes de produits dans le monde, il peut être difficile de naviguer entre les bons et les mauvais. Des outils comme Product Hunt fournissent une plate-forme pour en savoir plus sur les nouveaux outils et obtenir des réactions et des critiques des autres.

Niveau 1

La partie la plus importante de l'apprentissage des nouveaux produits est le produit lui-même. Nous voulons savoir ce qu'est le produit, à quoi il ressemble et comment il fonctionne.

Créez une page qui vous permet d'ajouter un nouveau produit à un site Web avec un titre, une image et une description.

Niveau 2

Lors de la découverte des produits, les avis sont un moyen de faire confiance à un produit avant de l'acheter. Cela nous aide à avoir confiance dans ce sur quoi nous allons dépenser notre argent ou notre temps.

Ajoutez la possibilité pour les utilisateurs d'ajouter des avis sur chaque produit.

Niveau 3

Les gens aiment les produits, il y en a donc des tonnes dans le monde. Il y en a beaucoup trop à essayer de trier manuellement, nous avons donc besoin d'un mécanisme de recherche et de navigation.

Ajoutez la possibilité de rechercher des produits et de parcourir par catégorie.

Faire

  • Créer le site Web du produit
  • Créer une base de données
  • Ajouter un formulaire de produit
  • Ajouter un produit à la base de données
  • Demander un produit pour la page
  • Ajouter un formulaire d'évaluation
  • Ajouter des avis à la base de données
  • Ajouter des avis au produit
  • Ajouter une recherche de produit
  • Ajouter des catégories de produits

Boîte à outils

  • Hasura (hasura.io)

Tutoriels

  • Création d'une application clone Product Hunt à l'aide de Hasura et Next.js (logrocket.com)
  • Comment créer une version de base de Product Hunt en utilisant React (freecodecamp.org)

Idée de mise en page

Plus de projets

Si vous voulez plus d'idées de projets, consultez 50 projets pour React & the Static Web!

Arrêtez de vous demander que dois-je construire? Télécharger gratuitement sur 50reactprojects.com

Suivez-moi pour plus de Javascript, UX et d'autres choses intéressantes!

  • ? Suis moi sur Twitter
  • ? ️ Abonnez-vous à mon Youtube
  • ✉️ Inscrivez-vous à ma newsletter