7 idées de projets en React pour débutants

Vous voulez vous améliorer en React mais vous n’avez pas d’idées de projets ? Découvrez-en 7 pour devenir plus fort et construire votre portfolio.

D’ailleurs ça tombe bien, je vous propose de créer un portfolio dans cet article !

1. Une todo list

On commence cette liste de projets ReactJS pour débutant avec le “Hello, world!” des applications : la todo list !

L’enoncer de cette application : créer une application web qui permet de créer une liste de tâches à faire. L’utilisateur doit être capable de créer une nouvelle tâche, lire la liste des tâches qu’il a crée, modifier une tâche et supprimer une tâche.

Créer une to-do list permet d’explorer les concepts de base d’une application CRUD (Create, read, update and delete).

Pour ce projet, pas besoin de biliothèques externes. Vous pouvez n’utilisez que React pour une version super simple de l’application.

Si vous voulez aller plus loin, vous pouvez ajouter une biliothèque UI et pourquoi pas utiliser un backend pour avoir un système d’authentification, sauvegarder les résultats sur un serveur et plus encore !

2. Un site portfolio

Je vous répète souvent sur ce site qu’il est important de créer un portfolio quand on est développeur (et pour plein d’autres activités d’ailleurs). Eh bien ajourd’hui on s’y met en créant un site porftolio en React !

Créez un site qui reprend votre CV, des projets et du contenus que vous avez créez (si vous en avez), avec des images, des paragraphes et plusieurs pages.

Vous pouvez n’utiliser que React comme unique bibliothèque pour réaliser ce projet.

Laissez libre court à votre imagination si vous voulez aller plus loin, c’est votre site après tout !

3. Un lecteur de Markdown

Créez un lecteur de Markdown qui prend du Markdown et le transforme en HTML. L’utilisateur pourra alors écrire un article en Markdown qui sera interpreté en transformé en HTML

Il existe plusieurs biliothèques JavaScript pour parser du Markdown en HTML, je vous laisse chercher.

Ce site peut consister d’une seule page HTML avec une moitié de page composée d’un input de texte et l’autre moitié de page avec le résultat en HTML.

4. Un site de vidéos

Créez un clone de YouTube en utilisant l’API Data de YouTube. Recréez l’interface de visionnage d’une vidéo YouTube avec la barre de recherche, les vidéos recommandées et l’espace commentaire.

Dans ce projet on peut n’utiliser que React, pas d’autres bibliothèques, le but est de se familiariser avec une API comme celle de YouTube.

5. Un chat

Faites un clone d’un chat comme WhatsApp ou Telegram. Votre application web sera composée d’une liste de conversations et d’un écran de chat dans lequel on peut écrire du texte.

Vous pouvez juste créer l’interface d’un mais je vous conseille de rendre votre chat fonctionnel en utilisant un service cloud comme Firebase ou AWS Amplify.

6. Un réseau social

Coder un clone de Twitter ou d’un autre réseau social avec la possibilité de créer un compte, du contenu, des commentaires, des likes et tout le reste !

Vous pouvez juste imiter l’interface de Twitter mais je vous conseille de rendre votre chat fonctionnel en utilisant un service cloud comme Firebase ou AWS Amplify.

7. Un site complet avec NextJS

Installez NextJS et créez un site complet sur le sujet que vous souhaitez. Vous pouvez aussi construire un blog avec une technologie comme GatsbyJS

Le but de cet exercice est de constuire un site avec une technologie que les développeurs utilisent en production.

Choisissez un thème, une niche, n’importe quel sujet et commencez à créer des pages pour expliquer votre sujet.

Si vous décider d’avoir un backend pour votre site, le back-end de votre choix ou prendre un service cloud comme Firebase ou AWS Amplify pour vous faciliter la vie.