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: Créer une application mobile avec ionic

Ionic est une framework qui permet de créer des applications web, ou mobile en utilisant React ,VueJS ou Angular
Installer ionic
npm install -g @ionic/cli
Créer un projet ionic :myapp
ionic start myApp blank --type react
se positionner dans le projet myapp :cd myapp puis lancer le
ionic serve
App.tsc
import React from 'react';
import { RedirectRoute } from 'react-router-dom';
import { IonAppIonRouterOutlet,IonHeaderIonToolbarIonTitleIonContentIonFooter  } from '@ionic/react';
/* 
others import
*/

const AppReact.FC = () => (
  <IonApp>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Header</IonTitle>
      </IonToolbar>
    </IonHeader>

    <IonContent className="ion-padding">
      <h1>Main Content</h1>
    </IonContent>

    <IonFooter>
      <IonToolbar>
        <IonTitle>Footer</IonTitle>
      </IonToolbar>
    </IonFooter>
  </IonApp>
);

export default App;

Layout avec un TabMenu
Page1.tsx
import React from 'react';
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
  IonLabel,
  IonButton,
from '@ionic/react';
const Page1React.FC = () => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Page1</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <h1>Page1 content</h1>
    </IonContent>
  </IonPage>
);

export default Page1;

Page2.tsx
import React from 'react';
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
  IonLabel,
  IonButton,
from '@ionic/react';
const Page2React.FC = () => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Page2</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <h1>Page2 content</h1>
    </IonContent>
  </IonPage>
);

export default Page2;

Tabs.tsx
import React from 'react';
import {
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
from '@ionic/react';
import { homesettingslistperson } from 'ionicons/icons';
import { RedirectRoute } from 'react-router-dom';
import { IonReactRouter } from '@ionic/react-router';
import Page1 from './Page1';
import Page2 from './Page2';

const TabsReact.FC = () => (
  <IonReactRouter>
    <IonTabs>
      <IonTabBar slot="bottom">
        <IonTabButton tab="Page1" href="/Page1">
          <IonIcon icon={home} />
          <IonLabel>Page1</IonLabel>
        </IonTabButton>

        <IonTabButton tab="Page2" href="/Page2">
          <IonIcon icon={settings} />
          <IonLabel>Page2</IonLabel>
        </IonTabButton>
      </IonTabBar>

      <IonRouterOutlet>
        <Route path="/Page1" component={Page1} />
        <Route path="/Page2" component={Page2} />
      </IonRouterOutlet>
    </IonTabs>
  </IonReactRouter>
);

export default Tabs;


App.tsc
import React from 'react';
import { RedirectRoute } from 'react-router-dom';
import { IonAppIonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Tabs from './Tabs';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const AppReact.FC = () => (
  <IonApp>
    <Tabs />
  </IonApp>
);

export default App;