Comment créer un projet avec REACT et NEXJS?
Dans le monde du développement web moderne, React et Next.js se sont imposés comme deux outils incontournables pour créer des applications performantes et réactives. React, avec sa bibliothèque de composants, permet de construire des interfaces utilisateur dynamiques, tandis que Next.js, en tant que framework basé sur React, offre des fonctionnalités avancées telles que le rendu côté serveur et la génération de sites statiques. Dans cet article, nous allons explorer ensemble les étapes pour créer un projet simple utilisant ces deux technologies.
À travers un exemple pratique, nous verrons comment configurer notre environnement, bâtir notre première page et ajouter des fonctionnalités essentielles. Que vous soyez un débutant désireux d’apprendre ou un développeur expérimenté cherchant à approfondir vos connaissances, cet article vous guidera pas à pas dans le développement d’une application avec React et Next.js.
” Réaliser un tableau de bord en React et NexJS. La base de données à utiliser est en PJ du mail. En React et NextJS, faire le dashboard avec une page divisée en trois composantes : une barre de filtres · un nombre (pour le prix) · 2 graphiques charts.”
Étape 1 : Configuration du Projet
- Créer un nouveau projet Next.js :
1 |
npx create-next-app@latest mon-tableau-de-bord |
1 |
cd mon-tableau-de-bord |
2 . Installer les dépendances nécessaires : Pour les graphiques, vous pouvez
utiliser chart.js
et react-chartjs-2
:
1 |
npm install axios chart.js react-chartjs-2 |
Étape 2 : Structure du Projet
Créez les composants nécessaires dans le dossier components
:
-
- Barre de filtres (
FilterBar.js
) - Affichage du prix (
PriceDisplay.js
) - Graphiques (
ChartComponent.js
)
- Barre de filtres (
Étape 3 : Implémentation des composants
- 1. FilterBar.js :
-
12345678910111213141516171819// components/FilterBar.jsimport React from 'react';const FilterBar = ({ onFilterChange }) => {return (<div><h3>Filtrer par saison</h3><select onChange={(e) => onFilterChange(e.target.value)}><option value="">Tous</option><option value="été">Été</option><option value="printemps">Printemps</option><option value="automne">Automne</option><option value="hiver">Hiver</option></select></div>);};export default FilterBar;
- 2. PriceDisplay.js
1 2 3 4 5 6 7 8 9 10 11 12 |
// components/PriceDisplay.js import React from 'react'; const PriceDisplay = ({ totalPrice }) => { return ( <div> <h3>Prix total : {totalPrice} $</h3> </div> ); }; export default PriceDisplay; |
- 3. Charts.js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; // les échelles et autres éléments nécessaires ChartJS.register( CategoryScale, // l'échelle 'category' LinearScale, // l'échelle 'linear' BarElement, // élément pour les graphiques à barres Title, // le titre du graphique Tooltip, // l'outil de tooltip Legend // la légende ); // components/Charts.js import React from 'react'; import { Bar } from 'react-chartjs-2'; const Charts = ({ data }) => { const chartData = { labels: data.map(item => item.saison), datasets: [ { label: 'Prix par saison', data: data.map(item => item.prix), backgroundColor: 'rgba(75, 192, 192, 0.6)', }, ], }; return ( <div> <h3>Graphiques</h3> <Bar data={chartData} /> </div> ); }; export default Charts; |
Commande vérification de la version de Chart.js
1 |
npm list chart.js |
-
Étape 4 : Intégration dans la Page Principale
Dans le fichier
pages/index.js
, intégrez les composants :12345678910111213141516171819202122232425262728293031323334353637383940414243444546// pages/index.jsimport React, { useState, useEffect } from 'react';import FilterBar from '../components/FilterBar';import PriceDisplay from '../components/PriceDisplay';import Charts from '../components/charts/Charts';import data from '../data/database.json'; // le fichier databaseconst Home = () => {const [filteredData, setFilteredData] = useState(data);const [totalPrice, setTotalPrice] = useState(0);const handleFilterChange = (season) => {if (season) {setFilteredData(data.filter(item => item.saison === season));} else {setFilteredData(data);}};useEffect(() => {const total = filteredData.reduce((acc, item) => acc + item.prix, 0);setTotalPrice(total);}, [filteredData]);// une mise à jour automatique des donnéesuseEffect(() => {const interval = setInterval(() => {// la logique pour mettre à jour les donnéesconsole.log("Mise à jour des données...");// nouvelles données d'une API}, 5000);return () => clearInterval(interval); // Nettoyage de l'intervalle}, []);return (<div><h1>Tableau de Bord</h1><FilterBar onFilterChange={handleFilterChange} /><PriceDisplay totalPrice={totalPrice} /><Charts data={filteredData} /></div>);};export default Home; - NB. utiliser des hooks comme
useEffect
pour mettre à jour automatiquement les données pour récupérer les données de votre base de données à intervalles réguliers ou en réponse à des événements spécifiques.
Créer le fichier /data/database.json’; dans le répertoire src
/data/database.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
[ { "id": 0, "saison": "été", "prix": 351, "age": 20, "niveau": "pro", "compte": false, "passe": "double" }, { "id": 1, "saison": "printemps", "prix": 481, "age": 29, "niveau": "moyen", "compte": true, "passe": "double" }, { "id": 2, "saison": "printemps", "prix": 173, "age": 28, "niveau": "pro", "compte": true, "passe": "illimité" }, { "id": 3, "saison": "printemps", "prix": 417, "age": 25, "niveau": "pro", "compte": false, "passe": "illimité" }, { "id": 4, "saison": "automne", "prix": 65, "age": 31, "niveau": "novice", "compte": false, "passe": "double" }, { "id": 5, "saison": "hiver", "prix": 363, "age": 29, "niveau": "moyen", "compte": true, "passe": "illimité" }, { "id": 6, "saison": "printemps", "prix": 147, "age": 24, "niveau": "pro", "compte": false, "passe": "double" } ] |
Étape 5 : Exécution de l’application
Lancez votre application avec la commande suivante :
1 |
npm run dev |
Accédez à http://localhost:3000
pour voir votre tableau de bord en action.