Composant

Partie d’une application réutilisable. Son code source est généralement ajouté dans un dossier Src/Components/

Par convention un composant débute toujours par une lettre majuscule.

Un composant est constitué d’un fichier .js ou .jsx. Il débute toujours par l’importation du module React. Cette Cette définition du module React sert au transpileur Babel de transformer le code JSX en code JavaScript valide.

Le composant peut être relié à un fichier CSS.

Importation du CSS

import React from 'react';

import "./Header.css";

Pour rendre disponible le composant dans l’application

export default Header;

Exemple complet d’un composant Content

import  React, {useState} from "react";
import "./Content.css";
import HomePage from "./HomePage/HomePage";
import AboutPage from "./AboutPage/AboutPage";
import ContactPage from "./ContactPage/ContactPage";

function Content(props) {
  
  let content;

  switch (props.currentPage) {
    case "/":
      // content = <div>Bienvenue sur la page d'accueil</div>;
      content = <HomePage msg={props.msg} />;
      break;
    case "/about":
      content = <AboutPage />;
      break;
    case "/contact":
      content = <ContactPage />;
      break;
    default:
      content = <div>Page introuvable</div>;
  }

  return (
    <main>
      {content}
    </main>
  );
}


export default Content;

Exemple complet d’un composant HomePage

import React from 'react';

import "./HomePage.css";


function HomePage({msg}) {
  return (
    <div>
      <h1>Bienvenue sur la page d'accueil</h1>
      <p>
        Contenu page d'accueil.
      </p>
      <p>
      {msg}
      </p>
    </div>
  );
}

export default HomePage;