React:Component

folder 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:

  1. fihcier css : Les tyles de la components
  2. 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

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

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

Les components Utilisateur CRUD

  1. utilisateur/ajouter
  2. utilisateur/index
  3. utilisateur/details
  4. utilisater/modifier
  5. utilisater/connexion
  6. ....

Les components Vente CRUD

  1. ventes/vendre
  2. ventes/facture
  3. ventes/statistiques
  4. ....

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;