React:Component
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
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:
Puis pour créer la component Test on se positionnne dans le dossier src puis on lance la commande
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
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
Le contenu par défaut de navigation.jsimport React, { Component } from "react";
class Navigation extends Component {
render() {
return <div>Nav</div>;
}
}
export default Navigation;
Installer bootstrap
Le dossier node_modules\bootstrap est crée contenant les style boostrapl'é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;
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;
