React

Getting started

Liens_Web:

Create React App est un paquet qui permet de créer l’arborescence et d’installer toutes les dépendances nécéssaires.

Ce paquet doit être installer globallement.

1npm install -g create-react-app     # le "-g" permet d'effectuer l'installation de façon
2                                    # global. Cette étape n'est à effectuer qu'une seule fois.

Utilisation :

L’utilisation se fait depuis un terminale. La commande va créer un répertoire à partir du nom fournit en arguement. Ce nom n’étant pas attache au projet React lui même, il peut être modifié ultérieurement.

1npx create-react-app [my-app]       # Attention, les noms des projets doivent être écris en
2                                    # minuscule uniquement.
3cd [my-app]
4npm start

Variante : Sur les version moderne de « npm » et « Create-react-app » il n’est plus nécéssaire de lancer « Create-react-app » depuis « npx ».

1create-react-app [my-app]       # Attention, les noms des projets doivent être écris en
2                                # minuscule uniquement.
3cd [my-app]
4npm start

Versionning et récupération de projet

Lorsqu’un projet react est créer avec create-react-app, un « git » est également initialisé. React étant en frontend, il peut être préférable de le supprimer pour en créer un plus haut dans l’arborescence et ainsi englober le frontend et le backend .

~/myProject
    |
    \--> .git
    |
    \--> frontend # React
    |
    \--> backend # Node-Express + Mongo

Create-react-app génére également un fichier « .gitignore » qui exclue le dossier « node_modules ». Ce fichier est à conserver. Il est même intéressant de créer un fichier « .dockerignore » qui exclue lui aussi le dossier « node_modules ».

Le dossiers « node_modules » contient toutes les dépendances de React. Ces dépendances sont listées dans le fichiers « package.json ».

Si le projet est récupérer d’un dépot distant comme Github par exemple il faut alors installer les dépendances du projet.

1 cd [my-app]
2 npm install     #lecture du fichier "package.json" pour identifier les dépendances à installer

Exemple d’organisation de projet

Public
    |
    \
     --> Index.html

SRC
    |
    --> Composants
    |
    --> CSS
    |
    --> Pages
    |
    --> App.js

  • Les composants sont isolés et appellés depuis les Pages. Il existe deux type de composants.

    • Les composants Statyques. le contenu de ces éléments n’est jamais modifié. C’est éléments sont souvent partagé entre plusieurs page (exemple : Navbar ou Footer).

    • Les composant dynamiques. Le contenu et le comportement de ces éléments est modifié en fonction des props qui lui sont passées.

  • Les Pages exploitent les composants et les CSS. Ces éléments sont également construit sous la forme d’un composant. Ces éléments sont statiques. Ils concentre differents composants. Les pages permettent de créer des sections permettant de traité des sujets différents (Ex: Accueil, formulaire et liste détaillée).

  • Les CSS sont conccentrée à 1 seul emplacement. Toutes les CSS sont importée depuis une feuille de style.

N.B : Les feuilles de styles bootstrap sont gérée depuis un emplacement propre à Bootstrap.

# Excemple d'import d'une CSS dans "App.css"

@import './home.css';

Bonnes pratiques

Lorsque l’on crée un nouveau projet, il est pratique de créer les pages en premier. Il sera ensuite plus simple de procéder au routage à l’aide de « React-Router-DOM ».

Les pages doivent, dans un premier temps, être le plus simple possible. Elles seront complétée par la suite avec leur contenu définitif.

 1// Titre du document : Home.js
 2import React from 'react'
 3
 4const Home = () => {
 5    return (
 6        <h1>Accueil</h1>
 7    )
 8}
 9
10export default Home

Accès et traitement des données (Props et State)

La bonne pratique pour la gestion des donées est qu’elles ne soient récoltées et manipuler que depuis le composant racine. Générallement « App.js ».

Il revient donc à ce composant racine d’intéroger la base le serveur pour obtenir les informations de la base de données et de les partagées composant enfants au travers des Props.

C’est également à lui de traiter les données remontées par les composant enfant au travers des fonctions callback passée en tant que Props pour ensuite mettre à jour les états (State) et ensuite les redistribuer.