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

ReactJS+NodeJS

React: Intoduction

1.Introduction,istallation

Components

2.a>Components 2.b> Constructeur et propriétés 2.c> Components:Exemples

State,filter , map ...

4.a> State (data) 4.b> State (change data) 4.c> State (Formulaire)
Exercice 1:Vente Produit Exercice 2:Note Stagiaire Exercice 3:Quizz Exercice 4:Gestion matchs Exercice 5:Crud Produit

Props

5a.Props introduction Exercice 1

Exercices

6.a Nombre Random 6.b Game Pile ou Face 6.c Calculatrice 6.c Quizz 6.c Les Styles Dynamiques 6.c Array Object Filter

..

7.React Hooks

Exercices

Exercice1: Client Crud Exercice2 :Filter Teams Exercice3 : Multi-select

Props dans Composant fonctionnel

Exemples Exercice1 Exercice2 Exercice3

Routage

7.Routage 8.Routage :public and restricted

Axios ,Fetch, Api

CRUD application

Redux,Redux Toolkit

Cours Redux

Exercices Redux

Exercice1 Social App Exercice1 WhatsApp App Exercice2 Restaurant App Exercice3 Student App Exercice4 Income ,Expense App Exercice5 Bank App

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;