Développer des composants React

Développer des composants React | Med Learning

Leçon 1

Introduction

Chaque application React est un ensemble de composants. Avant de coder, on repère les parties réutilisables de l'interface.

Un composant regroupe dans un même code la structure (JSX), les styles et les comportements. On peut l'utiliser autant de fois qu'on veut : on gagne beaucoup de temps. Dans ce chapitre, on voit comment combiner plusieurs composants et utiliser des expressions JavaScript dans le JSX.

Leçon 2

Prise en main : l'application seance5

Crée le projet seance5 (chapitre 3). Pour démarrer avec le minimum de fichiers (but pédagogique) :

supprime tous les fichiers du dossier src ;
supprime tous les fichiers du dossier public sauf index.html ;
dans src, crée le fichier index.js :

src/index.js

jsx

// 1) importer React et ReactDOM
import React from 'react';
import ReactDOM from 'react-dom/client'
//2) faire reference à div id=root de index.html
const element=document.getElementById("root");
//3) prendre le controle de l'element par React
const root=ReactDOM.createRoot(element)
// 4) Creation d'un composant (component)
//un composant est une fonction qui retourne jsx
function App(){
  return(
    <h1>salut Dev</h1>
  )
}
// 5) afficher le composant dans le browser
root.render(<App/>)

Le navigateur affiche le titre « salut Dev ».

Leçon 3

Les 5 étapes pour créer et afficher un composant

Étape	Code	Explication
1	`import React from 'react'` et `import ReactDOM from 'react-dom/client'`	`react-dom/client` fournit les méthodes pour démarrer l'application dans le navigateur. La plupart des composants n'en ont pas besoin
2	`const element = document.getElementById("root")`	une référence vers la `div id="root"` de `public/index.html` : c'est là que React injectera le HTML
3	`const root = ReactDOM.createRoot(element)`	React prend le contrôle de cette div : `createRoot` crée et renvoie une racine React
4	`function App(){ return (<h1>salut Dev</h1>) }`	on crée le composant App (fonction ou classe)
5	`root.render(<App/>)`	on passe `<App/>` à `render()` : son contenu s'affiche dans la div `root`

Vidéo · À regarder

Les modules en JavaScript (import ➜ export)

YouTube (FR) · YouTube

Regarde de 0:00 à la fin

Ouvrir sur YouTube à 0:00

Leçon 4

Comment le JSX est interprété

Leçon 5

Les variables et expressions JavaScript dans le JSX

Vidéo · À regarder

Apprendre React de Zéro (Cours complet pour débutants)

Louis D · YouTube

Regarde de 10:34 à 14:273 min 53 s

Ouvrir sur YouTube à 10:34

Vidéo · À regarder

Apprendre le JavaScript : Les classes

Grafikart · YouTube

Leçon 6

Les exercices

Travaux pratiques

TP2 · Le composant Voiture

Exercices

Exercice 5.1

Quiz (TP officiel)

1Quelle est la commande pour créer un projet React ?
2Que représente myApp dans npx create-react-app myApp ?
3Quelle commande démarre le serveur de développement ?
4Quel port utilise le serveur de développement de create-react-app ?
5Pour développer et exécuter du code React, Node.js est…
6Que rend le composant Voiture (marque = "Toyota", deux tests &&) ?
7La copie du DOM gardée en mémoire s'appelle…
8Le nom d'un composant React doit commencer par une majuscule.
9Quelle opération donne un rendu conditionnel ?
10Quel outil React utilise-t-il pour compiler le JSX ?
11La bonne syntaxe pour importer Component est…
12Comment les composants sont-ils combinés pour former l'interface complète ?
13Que retourne Voiture (marque 'Honda', chevaux 8, objet {marque, chevaux}) ?

0/13 répondues

L'essentiel du chapitre

À retenir

Une application React = un ensemble de composants réutilisables (structure + style + comportement).
index.js en 5 étapes : importer React et ReactDOM (react-dom/client) → getElementById("root") → ReactDOM.createRoot(element) → créer le composant → root.render(<App/>).
Composant = fonction qui retourne du JSX, ou classe extends React.Component avec render() ; un composant par fichier, du même nom, avec export default.
Babel : <h1>salut Dev</h1> → React.createElement("h1", null, "salut Dev") → objet {type:'h1', props:{children:'salut Dev'}}.
Variables et expressions entre { } ; le if se met avant le return ; dans une classe, données dans this.x (constructeur) et lues dans render().

Exemple 3 : afficher la remise (2 % à partir de 5 articles, sinon 0 %)

jsx

function App(){
  const nbArticle=6
  let remise=0
  if(nbArticle>=5){
    remise=2
  }
  return(<div>
    <h2> Remise </h2>
    <p> votre remise est: {remise} %</p>
  </div>
  )
}

src/index.js

jsx

import React from 'react';
import ReactDOM from 'react-dom/client'
const element=document.getElementById("root");
const root=ReactDOM.createRoot(element)

//fonction getAge reçoi la date en format DD/MM/YYYY
function getAge(dateNaissance){
  let from = dateNaissance.split("/");
  let birthdateTimeStamp = new Date(from[2], from[1] - 1, from[0]);
  let cur = new Date();
  let diff = cur - birthdateTimeStamp;
  // difference en milliseconds
  let currentAge = Math.floor(diff/31557600000);
  // Division par 1000*60*60*24*365.25
  return currentAge;
}

function App(){
  const nom='RAMI'
  const prenom='AHMED'
  const dateNaissance='23/03/2000'
  return(<div>
    <h2> Informations </h2>
    <p> ------</p>
  </div>
  )
}
root.render(<App/>)

La version classe du support

jsx

import React from "react";

function getAge(dateNaissance){ /* … même fonction … */ }

export default class App extends React.Component{
  constructor(props) {
    super(props)
    this.nom="RAMI";
    this.prenom="AHMED";
    this.dateNaissance="10/03/2000"
  }
  render(){
    return(<div>
      <h2> Informations </h2>
      <p> {this.nom} {this.prenom} votre age est {getAge(this.dateNaissance)} ans</p>
    </div>
    )
  }
}

Voiture.js (fonction)

jsx

import React from "react";
export default function Voiture(){
  const myVoiture={matricule:'19873X9',
    marque:'Toyota',
    chevaux:8}
  return(
    <div>
      <h1 style={{color:'green'}}>Information voiture</h1>
      <h4>voiture matricule:<span>-------</span></h4>
      <h5>marque:------- nombre de chevaux:--------</h5>
    </div>
  )
}

Voiture.js (classe)

jsx

import React,{Component} from "react";
export default class Voiture extends Component{
  constructor() {
    super()
    this.myVoiture={matricule:'19873X9', marque:'Toyota',chevaux:8}
  }
  render(){
    return(
      <div>
        <h1 style={{color:'green'}}>Information voiture</h1>
        <h4>voiture matricule:<span>-------<span></h4>
        <h5>marque:-------- nombre de chevaux:----------</h5>
      </div>
    )
  }
}

components/Header.js

jsx

import React from "react";
export default function Header(){
  const titre="Application mon premier fonctionnel composant"
  return (
    <div>
      <h1>ici afficher le titre</h1>
      <hr/>
    </div>
  )
}

components/Presentation.js

jsx

import React from 'react'
export default function Presentation(props){
  const nom="Rami"
  const prenom="Ahmed"
  return (
    <div >
      <h2>Salut -nom prenom </h2>
    </div>
  )
}

components/App.js

jsx

import React from "react"
import Header from "./Header"
import Presentation from "./Presentation"
function App(){
  return(
    <div>
      <Header/>
      <br/>
      <Presentation />
    </div>
  )
}
export default App

src/index.js

jsx

// 1) importer React et ReactDOM
import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './components/App';
const element=document.getElementById("root");
const root=ReactDOM.createRoot(element)
root.render(<App/>)

classComponents/Header.js

jsx

import React from "react";
export default class Header extends React.Component{
  constructor(props) {
    super(props)
    this.titre="Application mon premier classe composant"
  }
  render(){
    return (
      <div>
        <h1>ici le titre</h1>
        <hr/>
      </div>)
  }
}

classComponents/Presentation.js

jsx

import React from 'react'
export default class Presentation extends React.Component{
  constructor(props) {
    super(props)
    this.nom='Rami';
    this.prenom="Ahmed"
  }
  render(){
    return (
      <div >
        <h2>Salut ici le nom et prenom </h2>
      </div>
    )
  }
}

classComponents/App.js

jsx

import React from "react"
import Header from "./Header"
import Presentation from "./Presentation"
class App extends React.Component{
  render(){
    return(<div>
      <Header/>
      <br/>
      <Presentation />
    </div>)
  }
}
export default App

Développer des composants React

Développer des composants React

Introduction

Prise en main : l'application seance5

Les 5 étapes pour créer et afficher un composant

Comment le JSX est interprété

Les variables et expressions JavaScript dans le JSX

Les exercices

TP2 · Le composant Voiture

Exercices

Quiz (TP officiel)

À retenir

L'exercice d'entraînement

TP1 · Composants fonctionnels

TP1 · Composants classes