Les bases pour commencer React.JS

Créer un squelette d'application

À partir d'un terminal, placez-vous dans le dossier où vous souhaitez travailler puis lancer la commande

create-react-app todolist

Une fois le déroulement de cette commande terminé, entrer dans le dossier puis lancer l'application grâce aux commandes suivantes :

cd todolist
yarn start

💡 Si la commande yarn ne fonctionne pas, installez-le avec cette commande : npm install -g yarn

Le navigateur internet par défaut de votre système d'exploitation devrait démarrer et afficher le logo React.JS.

Ouvrez votre éditeur de code (Visual Studio Code ?) sur le dossier qui vient d'être créé pour explorer le code et ajouter des fonctionnalités.

La structure d'un projet React.JS

node_modules

Le dossier "node_modules" contient les dépendances téléchargées avec "npm" ou "yarn". Vous ouvrirez assez rarement ce répertoire et vous ne le modifierez jamais.

public

Le répertoire "public" contient les fichiers qui sont habituellement lus par un navigateur web (favicon, manifest, robots.txt). Il contient surtout le fichier "index.html". C'est lui qui fera démarrer votre application et appellera les scripts JavaScript. Il contient une unique balise <div id="root"></div> qui accueillera le code généré par React.JS.

.gitignore et package.json

Le fichier ".gitignore" est, comme son nom l'indique, lié à GIT et permet de demander à ce dernier d'ignorer certain fichier. Si vous n'utilisez pas GIT, vous pouvez simplement l'ignorer.

Le fichier "package.json" est le fichier de configuration d'un projet npm ou yarn. Il contient, entre autres, la liste des dépendances que vous installez.

src

Enfin, le dossier "src" est celui où nous passerons la majeure partie de notre temps. Il contient le code de notre application.

Vous y trouverez le fichier "index.js" qui permet de démarrer votre application. Il va charger le composant (App) racine de votre application et l'insérer dans la balise <div id="root"></div> du fichier "index.html" grâce à la méthode "render" de ReactDOM :

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

💡 Vous êtes surpris par ce bloc de code qui ressemble à du HTML/XML ? Il s'agit de JSX. C'est une extension de JavaScript permettant de représenter simplement des portions d'interface graphique.

Notez que cette page charge un fichier './App.js' (import App from './App'), ainsi que la présence d'une balise "<App />" dans le JSX. C'est comme cela que l'on charge et affiche des composants en React.JS (ici, le composant racine de notre application).

Les composants

Le fichier "App.js" du répertoire "src" contient le code du premier composant de notre application.

Un composant en React.JS est une fonction qui retourne un bloc de JSX.

Si vous étudiez la fonction "App", vous constaterez qu'une retourne le code HTML actuellement affiché dans notre navigateur.

💡 Le code HTML ? Pas tout à fait, il existe quelques règles à respecter :

• Le mot "class" est réservé en JavaScript (pour la programmation orientée objet). Il n'est donc pas disponible en JSX et doit être remplacé par "className"
• Un composant ne peut retourner qu'une seule balise (qui à le droit de contenir des sous-balises cependant)
• Les balises doivent toujours être fermées
• Les balises "standard" HTML sont écrites en minuscule
• Le nom de vos composants commence par une majuscule

Enfin, vous pouvez créer autant de composants que vous le souhaitez.

Afficher des expressions JavaScript

En JSX, les accolades sont utilisées pour afficher des expressions JavaScript (variables, constantes, retour de fonctions, etc.).

Le composant suivant affiche une balise div qui contient la valeur de la variable x : 5

function Test(){
    let x = 5;
    return (
        <div>{x}</div>
    )
}

Passez des données à un composant : props

La fonction qui définit un composant peut recevoir un argument généralement nommé "props". Cet argument est un objet qui contient toutes les valeurs des attributs ajoutés à la balise représentant votre composant.

L'exemple suivant affiche : "Pierre à 25 ans"

function Test(props){
    return (
        <div>{props.nom} à {props.age} ans</div>
    )
}

function App() {  
  let age = 25
  return (
      <Test nom="Pierre" age={age}></Test>
  );
}

💡 On utilise généralement la déstructuration avec l'argument "props". Consultez la documentation MDN sur le sujet si vous ne connaissez pas ce concept : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Voici notre exemple modifié (mais parfaitement équivalent) :

function Test({nom,age}){
    return (
        <div>{nom} à {age} ans</div>
    )
}

function App() {  
  let age = 25
  return (
      <Test nom="Pierre" age={age}></Test>
  );
}

💡 Il existe une autre manière de créer des composants que nous ne verrons pas ici, car elle est plus ancienne et optionnelle. Je vous invite cependant à vous documenter sur les "class components" : https://fr.reactjs.org/docs/react-component.html