CREATE-REACT-CRUD-COMPONENT

Ce package est un outil puissant conçu pour accélérer le processus de création de composants React pour le CRUD (Create, Read, Update, Delete) dans vos applications React.

Alors si vous êtes passionnez de faire des administrations sans perdre de temps, vous êtes au bon endroit.

Installation et conseils

Pour éviter des configurations majeurs dans votre projet React, vous pouvez utiliser create-react-app pour créer un nouveau projet React. Avant d'installer ce package, soyez sûres que vous avez déjà installé et exécuté le package create-react-include-component: car create-react-crud-component se servira de ses ressources pour faciliter la construction de votre application.

Pour installer le package, exécutez la commande suivante :

    npm install -g create-react-crud-component

Utilisation

Une fois installé, vous pouvez utiliser votre package pour générer facilement des composants CRUD en suivant ces étapes simples :

Modifier les variables d'environnement

Ajouter à votre variable d'environnement PATH, le chemin d'installation de vos packages npm si vous ne l'avez pas encore fait.

Pour connaître le chemin de vos packages npm fait ceci dans votre terminal:

   npm ls -g 

ou

   yarn ls -g

créez vos composants crud

Placez vous dans le repertoire de votre projet React

    create-react-crud-component --crud **<Nom_du_composant>**

Remplacez Nom_du_composant par le nom que vous souhaitez donner à votre composant CRUD tout en commençant par une lettre majuscule. Exemple: Article, Categorie, Taille etc.

Composants générés :

Après avoir exécuté la commande ci-dessus, trois fichiers seront générés dans votre répertoire :

le composant pour ajouter un nouvel élément

Add<Nom_du_composant>.css : fichier de style personnel . Add<Nom_du_composant>.js : fichier js. Add<Nom_du_composant>.jsx : le template. index.js : fichier permettant d'exposer votre composant à l'extérieur

le composant d'edition

Edit<Nom_du_composant>.css : fichier de style personnel . Edit<Nom_du_composant>.js : fichier js. Edit<Nom_du_composant>.jsx : le template. index.js : fichier permettant d'exposer votre composant à l'extérieur

le composant qui affiche les élément de la table

List<Nom_du_composant>.css : fichier de style personnel . List<Nom_du_composant>.js : fichier js. List<Nom_du_composant>.jsx : le template . index.js : fichier permettant d'exposer votre composant à l'extérieur

Exemple

Voici un exemple de la manière dont vous pouvez utiliser les composants générés dans votre application :

Vous pouvez les appélez dans le composant Routes de votre projet

    create-react-crud-component --crud Example

import "./Routes.css";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import AddExample from "../Example/AddExample/AddExample.js";
import EditExample from "../Example/EditExample/EditExample.js";
import ListExample from "../Example/ListExample/ListExample.js";



function template() {
  
  return (

    <Router>
      <Routes>

        <Route path={"/your-path"} element={<AddExemple/>} />
        <Route path={"/your-path"} element={<EditExemple/>} />
        <Route path={"/your-path"} element={<ListExemple/>} />
        
      </Routes>
    </Router>
  );
};

export default template;

NB:

Ce package ne permettra pas la construction totale de votre application, mais ce sera à vous de désigner quels sont les besoins crud dans votre projet.

Licence

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.

Remerciement et encouragements

Nous sommes ravis d'améliorer le package; vos suggestions et critiques seront les bienvenus.

Nous serions ravis de vous montrer la dernière étape permettant de de terminer la configuration de votre App. Merci et bon dévéloppement en React !

Par [email protected]