Votre mission est de créer un portfolio en utilisant React et d'implémenter différentes sections essentielles, tout en pratiquant la manipulation de React avec Vite.js, l'utilisation de React Bootstrap, la création de composants fonctionnels, le passage de props, la structuration d’un projet React et l’intégration de librairies externes.
- Commencez par initier un repository Gitlab/Github, puis initier un projet React en utilisant ViteJs
- Création des composants
- Dans le dossier ./src/components, créez les composants nécessaires pour chaque section du portfolio. Voici les composants à créer :
- Accueil.jsx : Introduction, nom, fonction, message d’accueil.
- Projets.jsx : Titre, description, technologies utilisées, lien vers le code ou une démo.
- APropos.jsx : Brève présentation personnelle, parcours, motivations.
- Formation.jsx : : Diplômes, certifications ou formations suivies.
- Competences.jsx : Liste de compétences techniques (langages, outils, frameworks, niveau…) 10 minimums.
- Contact : Informations de contact (email et/ou téléphone).
Importer l'ensemble dans le fichier App.js
Dans chaque composant, utilisez les éléments React appropriés pour structurer et afficher le contenu de chaque section. Vous pouvez utiliser des composants fonctionnels pour chaque section. Assurez-vous d'exporter ces composants pour pouvoir les utiliser ailleurs dans votre application.
Créer un dépot vide github Cloner le dépot en local
Création du nouveau projet Vite/React:
cd [NOM-DU-PROJET]
npm create vite@latest . -- --template react
npm i- vider le dossier /public/
- vider le dossier /src/assets/
- dans src/
- supprimer le fichier index.css
- supprimer le fichier App.css
- Remplacer le contenu de main.jsx par :
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App /> {" "}
</StrictMode>,
);- Remplacer le contenu de App.jsx par
function App() {
return (
<>
<h1>Hello World</h1>
</>
)
}
export default App- Remplacer le contenu de index.html par :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/portefolio.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portefolio</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>cd [NOM-DU-PROJET]
npm install react-bootstrap bootstrapImporter le Bootstrap minifié dans le fichier main.jsx (avant la ligne "import App from './App.jsx'")
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App.jsx'cd [NOM-DU-PROJET]
npm install --save-dev --save-exact prettierpuis dans le fichier package.json , dans la section "scripts", ajouter l'entrée: "format": "prettier --write ."
cd [NOM-DU-PROJET]
npm run formatgit add . git commit -m "Un commentaire" git push origin main