Premier composant et rendu
Écrivez votre première fonction composant, affichez-la dans le DOM avec createRoot et observez le rechargement à chaud.
Premier composant et rendu est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Vue d’ensemble
Objectif : écrivez votre premier composant React, montez-le avec createRoot et vérifiez le rechargement à chaud.
Composants fonctionnels
Un composant React n’est qu’une fonction qui renvoie du JSX. Exemple : function App() { return <h1>Hi</h1> }.
Montage avec createRoot
Utilisez ReactDOM.createRoot avec document.getElementById("root"), puis appelez root.render(<App/>).
Démonstration du code
Votre premier rendu : montez App et cliquez pour voir les mises à jour de l’état.
<div id="root"></div>
Principes du rechargement à chaud
Rechargement à chaud : enregistrez un fichier ; le serveur de développement reconstruit l’application et l’interface se met à jour sans perdre son état.
Conseils pour les premières applications
Conseils :
- Gardez des composants de petite taille.
- Utilisez des noms clairs comme App.
- Consultez la console pour trouver les erreurs si le rendu échoue.
Vérification de la création de la racine
Récapitulatif
Récapitulatif : définissez App(), montez-le avec createRoot et profitez du rechargement à chaud pour obtenir un retour instantané.
Questions Fréquemment Posées
La leçon « Premier composant et rendu » est-elle gratuite ?
Oui — le texte complet de « Premier composant et rendu » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Premier composant et rendu » ?
Écrivez votre première fonction composant, affichez-la dans le DOM avec createRoot et observez le rechargement à chaud. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Premier composant et rendu » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Démarrage avec React : concepts et configuration
- Configuration du projet : Vite, organisation et serveur de développement
- Premier composant et rendu