https://github.com/henriteinturier/initiation-react-mini-projet
https://github.com/henriteinturier/initiation-react-mini-projet
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/henriteinturier/initiation-react-mini-projet
- Owner: HenriTeinturier
- Created: 2024-10-26T17:22:01.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-26T21:42:01.000Z (12 months ago)
- Last Synced: 2025-01-29T05:44:54.945Z (8 months ago)
- Language: JavaScript
- Size: 42 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Initiation à React : Mini Projet
Ce dépôt contient le code source d'une initiation à React, développé dans le cadre d'une démonstration de formation. Chaque étape est associée à un commit pour faciliter le suivi de l'évolution du projet. Ce projet est initialisé avec Vite.
**Note :** Le **Chapitre 1** (Introduction à React.js) n'est pas inclus dans ce dépôt, de même que certains points du Chapitre 2 (Prérequis, Installation, et Structure de l’application).
## Plan de formation
### Chapitre 1 : Introduction à React.js (non inclus dans ce dépôt)
1. Historique de React
2. Philosophie de React
3. Comparatif avec d’autres frameworks (Vue, Angular)
4. Workflow de développement
### Chapitre 2 : Premiers pas avec React
Dans ce chapitre, nous abordons les bases de React et réalisons des exemples de code pour illustrer chaque concept clé.
## Étapes du projet
Chaque point du chapitre 2 présent dans ce dépôt est couvert par un commit spécifique pour faciliter le suivi. Voici la liste des étapes et des commits associés :
### 1. Initialisation du projet (inclus)
- **Commit :** `commit initial - installation vite + template React`
### 5. Composants et JSX (inclus)
- **Commit :** `Composants et jsx`
### 6. Les Props (inclus)
- **Commit :** `Les props`
### 7. Gestion des événements (inclus)
- **Commit :** `handleEvents`
### 8. La prop Children (inclus)
- **Commit :** `Children`
### 9. Hooks et état (state) (inclus)
- **Commit :** `Hooks && useState`
## Code final
Voici le code final de ce mini projet, combinant l'ensemble des fonctionnalités abordées :
```javascript
import { useState } from 'react';
import './App.css'
// commencer par transférer les données dans le composant welcome
// ajouter "la prop props" + props.name (console.log(props et props.name)
// destructurer
function Welcome({ name }) {
const currentHour = new Date().getHours();
const greeting = currentHour < 12 ? "Bonjour" : "Bonsoir";
return (
{greeting}, {name}
Il est actuellement {currentHour} heures.
)
}
function Card({children}) {
return (
{children}
)
}
function LikeButton() {
const [likes, setLikes] = useState(0)
const handleClick = () => {
setLikes(likes +1)
}
return (
{likes} ♥
)
}
function App() {
return (
)
}
export default App