Scribd
Importer
120 vues5 pages

Guide de création d'applications React

Le document décrit les composants clés d'un projet React. Il explique le dossier src qui contient le code principal de l'application, et les dossiers public et node_modules. Il présente ensuite des étapes pour créer un premier composant et l'importer dans une application.

Transféré par

ftft
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
120 vues5 pages

Guide de création d'applications React

Le document décrit les composants clés d'un projet React. Il explique le dossier src qui contient le code principal de l'application, et les dossiers public et node_modules. Il présente ensuite des étapes pour créer un premier composant et l'importer dans une application.

Transféré par

ftft
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Components

L’arborescence du projet :

Le dossier node_modules : Ce dossier contient toutes les dépendances téléchargé, il a été créé
automatiquement après l’exécution de create-app.

Le dossier public : Il contient les images utilisées dans votre application, en tant que débutant ce qui
nous intéresse le plus c'est le index.HTML. C’est le seul fichier HTML que vous aurez dans votre
application ; il sert à créer des page web et puisqu'on utilise REACT on veut que REACT soit le seul qui
soit responsable sur notre interface utilisateur pour cela on va pas modifier ce fichier.

Le dossier src : c’est le dossier que vous allez utiliser le plus souvent dans votre développement. le
premier fichier qu'on va utiliser c'est index.js, c'est dans ce fichier qu'on définit notre notre
component principale, dans ce cas c'est app, et l'élément DOM qui va être géré dans ce cas c’est celui
avec l'ID root. Le deuxième fichier est le app.js il contient le code HTML qui nous permet de créer
notre page web. Il y a le fichier app.css pour tout ce qui est design en CSS. Après y a un autre fichier
apptest.js pour les fichiers test si on veut automatiser les tests unitaires.

Package.json et package-lock.json : Ce fichier contient toutes les dependances utilisés, et les scripts
qui peuvent être nécessaires pour exécuter certaine opérations tels que ; build, test, …

Etape 1 :

Maintenant, on va créer notre première application avec des components. Supprimez tout le code
que vous avez déjà dans le fichier app.js. Vous laissez seulement la déclaration de la fonction APP
avec la balise <div>
Etape 2 :

Vous créez un nouveau dossier compenant dans le dossier source. Créez un nouveau fichier et vous
le nommez comme vous voulez par exemple first.js

Dans ce fichier, une fonction qui s'appelle first qui va retourner un texte. Et puis on l'exporte pour
pouvoir la réutiliser.

Etape 3 :

Vous avez créé votre premier complément maintenant il est temps de le lier avec votre application.
Vous allez modifier votre fichier app.js et rajouter le component créé dans le fichier first.js, pour cela
il faut tout d'abord importer le fichier. Ensuit on l'appelle dans notre balise <div> dans la fonction
app.

Etape 4 : Créer un component stateful

Dans le premier cas on a créé un component sous forme de fonction. Maintenant on veut créer sous
forme de class component.

On refait la même chose sauf que cette fois au lieu de déclarer une fonction, on déclare une classe
qui est étends de la classe component.
Exercice :

Créer un formulaire en utilisant des components

Vous aimerez peut-être aussi