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:Variables d'environement

folder Projet: test_react_project
On peut utiliser des variables d'environnement pour sauvegarder des données statiques qui peuvent être utilisées par plusieurs component comme: logo,website,ipAdresse ... le nom de ces variables de doit commencer par REACT_APP_ comme REACT_APP_LOGO ....
Lorsque on lance la commande npm start la priorité de lecture des fichiers d'environement et dans l'ordre suivant : .env.development.local, .env.development, .env.local, ...
FrontEnd :créer le fichier .env.developmentdans la racine du projet / et pas le dossier /src/ puis ajouter quelque variables
Remarque :le chargement du fichier .env se fait une seule fois lorsque on exécute la commande npm start ou npm bluid
NODE_ENV : Par défaut existe cette variables selon l'extension du fichier .env
note fichier est .env.development dans la valeur de NODE_ENV est developpement

Le fichier .env.devlopment

REACT_APP_COURS=ReactJS
REACT_APP_WEBSITE=https://fixwins.com
REACT_APP_IP=152.3215.125
REACT_APP_THEME=light

Tester l'affichage des ces variables d'environement dans le fichier App.js

import React from "react";
/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (

<div className="card text-left container ">
<br/>
<div className="card-header bg-info">
Variables d'environement
</div>
<div className="card-body">
<h5 className="card-title">le fichier .env.development</h5>
<div className="card-text">

<ul class="list-group">
<li class="list-group-item">NODE_ENV: <b>{process.env.NODE_ENV}</b></li>
<li class="list-group-item">cours: <b>{process.env.REACT_APP_COURS}</b></li>
<li class="list-group-item">web: <b>{process.env.REACT_APP_WEBSITE}</b></li>
<li class="list-group-item">theme: <b>{process.env.REACT_APP_THEME}</b></li>
<li class="list-group-item">ip: <b>{process.env.REACT_APP_IP}</b></li>
</ul>

</div>
</div>
</div>

);
}
export default App;