menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





React:Component

Composant est l'élément fondamental d'une application React, car chaque application est construite à partir de plusieurs composants. Ces composants permettent de créer une interface utilisateur modulaire et réutilisable, facilitant ainsi le développement et la maintenance du code. Chaque composant encapsule sa propre logique et son propre style, ce qui permet aux développeurs de travailler sur des parties spécifiques de l'application sans affecter le reste du code. En structurant une application en composants, on peut également améliorer la lisibilité et la gestion des états, rendant le processus de développement plus efficace. Ainsi, la conception orientée composant est au cœur de la philosophie de React, favorisant une approche organisée et scalable pour le développement d'applications web.

Chaque composant React se compose généralement des fichiers suivants :

  1. Fichier CSS : Ce fichier contient les styles associés au composant. Il permet de définir l'apparence visuelle, y compris les couleurs, les polices, les marges et d'autres propriétés CSS. En séparant le style du code JavaScript, on favorise une meilleure organisation et une maintenance plus facile du code.
  2. Fichier JavaScript (ou TypeScript) : Ce fichier contient la logique du composant ainsi que sa vue. Il définit comment le composant se comporte et interagit avec d'autres composants ou avec l'état de l'application. Dans ce fichier, vous trouverez également le code JSX qui décrit la structure de l'interface utilisateur que le composant va rendre.

Le composant principal App.js


test_react_project
    ├── src
    │    ├── App.js : La vue principale qui joue le rôle de modèle pour insérer les autres composants.
    │    ├── App.css : Le style global appliqué à l'application.

Le composant principal App.js

Le contenu par défaut du composant principal doit être supprimé et remplacé par votre propre modèle. Ce fichier sert de point d'entrée pour votre application React, où vous pouvez définir la structure de votre interface utilisateur.

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>
Éditez le fichier <code>src/App.js</code> et sauvegardez pour recharger.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Apprenez React
</a>
</header>
</div>
/* Fin du contenu par défaut */
);
}

export default App;

Lancer le projet créé

Pour démarrer votre projet React, exécutez la commande suivante dans votre terminal : npm start. Cela lancera le serveur de développement et ouvrira votre application dans le navigateur par défaut.

Exemple : Créer le composant Test

Dans une application React, il est possible de créer des composants manuellement en créant simplement un fichier avec l'extension .js. Cependant, pour accélérer et simplifier le processus de création de composants, il est recommandé d'installer un module spécifique qui facilite cette tâche. Ce module s'appelle create-react-component-folder. Pour l'installer, vous pouvez utiliser la commande suivante :

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

Une fois le module installé, vous devez naviguer dans le répertoire src de votre projet. Cela peut être fait en utilisant la commande cd, qui signifie "change directory". Voici comment procéder :

cd src

Après vous être positionné dans le dossier src, vous pouvez maintenant créer le composant Test. Pour ce faire, utilisez la commande suivante, qui appelle le module que vous venez d'installer :

npx crcf components/Test

Cette commande va générer un nouveau dossier nommé Test dans le sous-dossier components. À l'intérieur de ce dossier, vous trouverez les fichiers suivants :

  • Test.js: Le fichier principal contenant la logique et la structure du composant.
  • Test.css: Le fichier de style associé au composant pour gérer son apparence.
  • index.js: Un fichier d'entrée qui exporte le composant pour qu'il puisse être utilisé ailleurs dans votre application.

Cela vous permet de maintenir une structure organisée et cohérente pour vos composants React, facilitant ainsi leur gestion et leur réutilisation dans votre projet.

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 le composant Test */
import Test from './components/Test/Test.js'

function App() {
return (
/* Afficher le contenu du composant Test */
<Test />
);
}

export default App;

Lancer le projet : test_react_project

Pour démarrer votre projet React et voir les résultats de vos modifications, exécutez la commande suivante dans votre terminal : npm start. Cela lancera le serveur de développement et ouvrira automatiquement votre application dans le navigateur par défaut.

Types de Composants

En React, il existe deux types principaux de composants :

  1. Composants de Classe : Ces composants sont définis à l'aide de la syntaxe ES6 de classe. Ils possèdent un état et un cycle de vie.
  2. Composants Fonctionnels : Ces composants sont définis comme des fonctions JavaScript. Ils sont souvent utilisés pour les composants simples et ne possèdent pas d'état interne.

Les deux types de composants ont leurs propres avantages et peuvent être utilisés en fonction des besoins de l'application.

Création de Composants

Voici comment créer un composant simple en React :


import React from 'react';

// Composant de fonction simple
function MonComposant() {
    return (
        <div>
            <h3>Mon Premier Composant</h3>
            <p>Ce composant est créé à l'aide d'une fonction.</p>
        </div>
    );
}

export default MonComposant;