React:Component

Projet: test_react_project

Component est la composante principale d'une application React car une application React est composée de plusieurs components

Chaque Component se compose des fichiers suivants:

fihcier css : Les tyles de la components
fihcier js : le typeScript la vue et la logique de la component

La component principale App.js

test_react_project
    ├── src
    │    ├── App.js :la vue principale joue le role d'une template pour insérer les autres component
    │    ├── App.cs le style globale

La component principale App.js

Le contenu par défaut de la component principale à supprimer et le remplacer par votre template

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    /* Contenu par défaut */
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    /*Fin contenu par défaut */
  );
}

export default App;

Lancer le projet Crée

npm start

Exemple :Créer la Component Test

On peut créer les components manuellement (un fichier .js) mais afin d'accélérer et simplifier la création des components on install le module suivant:

npm install --save-dev create-react-component-folder

Puis pour créer la component Test on se positionnne dans le dossier src puis on lance la commande

cd src

npx crcf components/Test

Test.js

import React, { Component } from "react";

class Test extends Component {
  render() {
    return <div>Test</div>;
  }
}
export default Test;

importer Test.js dans la vue principale App.js

import './App.css';
/*importer la component Test*/
import Test  from './components/Test/Test.js'

function App() {
  return (
    /*Afficher le contenu de la component Test*/
      <Test />
  );
}

export default App;

Lancer le projet :test_react_project

npm start

Explications

Un composant React peut être une fonction ou une classe. Voici un exemple d'un composant de classe React :

class MonComposantClass extends React.Component {
                render() {
                    return (
                        <div>
                            <h2>{this.props.titre}</h2>
                            <p>{this.props.contenu}</p>
                        </div>
                    );
                }
            }

Dans cet exemple, `MonComposantClass` étend la classe `React.Component` et utilise la méthode `render()` pour décrire ce qui doit être rendu à l'écran en fonction des propriétés (props) fournies.

Exemples

Créons une instance de ce composant avec des données spécifiques :

class MonAppClass extends React.Component {
                render() {
                    return (
                        <MonComposantClass
                            titre="Bienvenue"
                            contenu="Ceci est un exemple de composant React avec une classe."
                        />
                    );
                }
            }

Ici, `MonAppClass` rend une instance de `MonComposantClass` avec des données spécifiques pour le titre et le contenu.

Exercices

Essayez de créer un nouveau composant React sous forme de classe avec des propriétés personnalisées et intégrez-le dans une application React simple.

Solutions des exercices

 class MonAutreComposantClass extends React.Component {
                render() {
                    return (
                        <div>
                            <h2>{this.props.titre}</h2>
                            <p>{this.props.contenu}</p>
                        </div>
                    );
                }
            }

            class MonAppClassAvecSolution extends React.Component {
                render() {
                    return (
                        <MonAutreComposantClass
                            titre="Nouveau Titre"
                            contenu="Ceci est un autre exemple de composant React avec une classe."
                        />
                    );
                }
            }

Dans cet exemple, nous avons créé un nouveau composant `MonAutreComposantClass` avec une classe et l'avons utilisé dans `MonAppClassAvecSolution`.

Questions & Réponses

Q : Quand devriez-vous utiliser un composant fonctionnel par rapport à un composant de classe en React ?
R : Utilisez un composant fonctionnel lorsque vous n'avez pas besoin de gérer un état interne, et un composant de classe lorsque vous avez besoin de gérer un état ou d'utiliser des méthodes de cycle de vie.

Questions à Choix Multiples (QCM)

1. Qu'est-ce qu'un composant React ?
a) Une partie réutilisable de l'interface utilisateur
b) Une bibliothèque JavaScript
c) Un langage de programmation
Réponse : a

Dans ce cours on va créer une application de gestion des ventes donc on va créer plusieurs components selon les besoins de cette application

Les components Produit CRUD

produits/ajouter Ajouter un Produit
produits/index Afficher la liste des produits
produits/details Afficher les détails d'un produit dont l'id est passé en paramètre
produits/modifier Modifier les données d'un utilisateur passé en paramètre

Les components Utilisateur CRUD

utilisateur/ajouter
utilisateur/index
utilisateur/details
utilisater/modifier
utilisater/connexion
....

Les components Vente CRUD

ventes/vendre
ventes/facture
ventes/statistiques
....

Le projet :test_react_project :Structure

test_react_project
    ├── src
    │    ├── components
    │    │     ├── produits
	│    │     │     ├── ajouter
	│    │     │     │    ├── ajouter.ts
	│    │     │     │    ├── ajouter.css
	│    │     │     ├── index
	│    │     │     │    ├── index.ts
	│    │     │     │    ├── idex.css
	│    │     │     ├── details
	│    │     │     │    ├── details.ts
	│    │     │     │    ├── details.css
	│    │     │     ├── modifier
	│    │     │     │    ├── modifier.ts
	│    │     │     │    ├── modifier.css

La template principale du projet :test_react_project

Créer component components/navigation

npx crcf components/navigation

navigation.js le role de cette component et la création du menu de naviration contenant les liens: ajouter un produit , liste produit ,connexion ,créer compte ....

Le contenu par défaut de navigation.js

import React, { Component } from "react";

class Navigation extends Component {
  render() {
    return <div>Nav</div>;
  }
}

export default Navigation;

Installer bootstrap

npm install react-bootstrap bootstrap@5.1.3

Le dossier node_modules\bootstrap est crée contenant les style boostrap

l'étape suivante est ajoute bootstrap.css dans la component principale App.js et importer la component navigation.js

import './App.css';
/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
/*importer la component Navigation*/
import Navigation  from './components/navigation/navigation.js'

function App() {
  return (
    /*Ajouter le nav*/
      <Navigation />
  );
}

export default App;

navigation.js

import React, { Component } from "react";
/*importer les components de boostrap */
import {Button,Nav,Navbar,Form,Container,FormControl,NavDropdown} from 'react-bootstrap';

class Navigation extends Component {
  render() {
    return <Navbar bg="light" expand="lg">
  <Container fluid>
    <Navbar.Brand href="#">Gestion Ventes</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav  className="me-auto my-2 my-lg-0"  style={{ maxHeight: '100px' }}  navbarScroll >
 
        <NavDropdown title="Produits" id="produits">
          <NavDropdown.Item href="#action3">Ajouter</NavDropdown.Item>
          <NavDropdown.Item href="#action4">Liste Produits</NavDropdown.Item>
        </NavDropdown>
        
        <NavDropdown title="Utilisateurs" id="utilisateur">
          <NavDropdown.Item href="#action3">Ajouter</NavDropdown.Item>
          <NavDropdown.Item href="#action4">Liste Utilisateurs</NavDropdown.Item>
        </NavDropdown>
        
                
        <NavDropdown title="Ventes" id="utilisateur">
          <NavDropdown.Item href="#action3">Vendre</NavDropdown.Item>
          <NavDropdown.Item href="#action4">Liste Ventes</NavDropdown.Item>
           <NavDropdown.Item href="#action4">Statistiques</NavDropdown.Item>
        </NavDropdown>
        
     
      </Nav>
      <Nav>
      <Nav.Link href="#deets">Connexion</Nav.Link>
        <Nav.Link href="#deets">Créer Compte</Nav.Link>
      
    </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>;
  }
}

export default Navigation;

ReactJS+NodeJS

React: Intoduction

Components

State,filter , map ...

Props

Exercices

..

Exercices

Props dans Composant fonctionnel

Routage

Axios ,Fetch, Api

Redux,Redux Toolkit

Exercices Redux

Examens

Redux -Thunk

Exercices

React+ionic

Gestion Ventes

Produit CRUD

Reacts:Utils

Utilisateur CRUD

Ventes CRUD

Redux

La component principale App.js

La component principale App.js

Lancer le projet Crée

Exemple :Créer la Component Test

Test.js

importer Test.js dans la vue principale App.js

Lancer le projet :test_react_project

Explications

Exemples

Exercices

Solutions des exercices

Questions & Réponses

Questions à Choix Multiples (QCM)

Les components Produit CRUD

Les components Utilisateur CRUD

Les components Vente CRUD

Le projet :test_react_project :Structure

La template principale du projet :test_react_project

Créer component components/navigation

Installer bootstrap