CATALOGUE Code & Data Formation ReactJS Apprendre ReactJS 2018 - Les fondamentaux

Introduction à Create-React-App et JSX

Retour à la formation
Chapitre 3 Leçon 2
Précédent
Suivant

Cette leçon vous guide à travers le processus de création d'une application React de base en utilisant create-react-app, et vous montre comment rendre un composant Hello World avec du JSX.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons les aspects fondamentaux de la création d'une application React avec create-react-app. Nous commencerons par comprendre la structure de base d'un projet React, notamment les dossiers public et src.

Ensuite, nous nous concentrerons sur le fichier index.html du dossier public, qui sert de point d'entrée pour l'application React. Nous verrons comment le script bundle.js gère le rendu de l'application dans la div root.

Enfin, vous apprendrez à créer et à rendre un composant Hello World en JSX, en le structurant dans une balise h1. Vous découvrirez également la syntaxe moderne avec les imports et exports en JavaScript.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
1. Comprendre la structure de base d'une application React créée avec create-react-app.
2. Apprendre à manipuler le fichier index.html pour intégrer des composants React.
3. Savoir créer et rendre un composant JSX simple.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous avez besoin de :
1. Connaissances de base en JavaScript.
2. Compréhension des concepts HTML et CSS.
3. Notions fondamentales de la ligne de commande pour installer create-react-app.

Métiers concernés

Les compétences abordées dans cette leçon sont applicables aux métiers suivants :
1. Développeur Front-end.
2. Développeur Full-Stack.
3. Ingénieur Logiciel.
4. Concepteur d'Interface Utilisateur.

Alternatives et ressources

Voici des solutions alternatives à create-react-app pour initialiser des projets React :
1. Vite : un build tool rapide.
2. Parcel : un bundler simplifié.
3. Webpack : un bundler de modules flexible.

Questions & Réponses

La structure de base comprend les dossiers public et src. Le dossier public contient notamment le fichier index.html, tandis que le dossier src contient le code source de l'application avec des composants React en JSX.
Le fichier index.html inclut le script bundle.js à la fin du document. Ce script est responsable de rendre l'application React à l'intérieur de la div root.
Il est recommandé d'utiliser les syntaxes import from et export default pour importer et exporter des modules en JavaScript moderne. Cependant, la syntaxe require peut encore être utilisée si vous êtes plus à l'aise avec elle.