React - Les Bases Essentielles
Maintenant qu'on a vu comment setup un projet React avec Vite, on va creuser les concepts fondamentaux de React !
Les Composants React - Deep Dive
Qu'est-ce qu'un Composant Fonctionnel ?
Un composant fonctionnel est simplement une fonction JavaScript qui retourne du JSX. C'est le type de composant le plus courant et recommandé en React moderne.
Définition : Un composant React est "une fonction JavaScript que tu peux saupoudrer de markup" !
Composants Fonctionnels vs Class Components
// ✅ Composant Fonctionnel (RECOMMANDÉ)
function MonComposant() {
return <h1>Hello World!</h1>
}
// ❌ Class Component (DEPRECATED)
class MonComposant extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
Pourquoi les composants fonctionnels ?
- Plus simples à écrire et comprendre
- Moins de code boilerplate
- Hooks pour gérer state et effets de bord
- Performance optimisée
- Recommandation officielle React
Syntaxes possibles
// Function declaration
function MonComposant() {
return <h1>Hello World!</h1>
}
// Arrow function
const MonComposant = () => {
return <h1>Hello World!</h1>
}
// Arrow function raccourcie (sans return explicite)
const MonComposant = () => <h1>Hello World!</h1>
// Avec destructuring des props
const MonComposant = ({ title, subtitle }) => (
<div>
<h1>{title}</h1>
<p>{subtitle}</p>
</div>
)