Reactjs p0

Contexte, programme, évaluation
Introduction à React & Environnement
React
Partie 0 : introduction générale
Dr Hamidou Kassogué
hamidoukass@gmail.com
G4 Consulting
Mai 2024
1/29 Dr H. Kassogué React : introduction générale

Plan global
1 Contexte, programme, évaluation

Contexte
Programme et évaluation
2 Introduction à React & Environnement

Ce qu’est que React
Installation et configuration de React
Prise en main de projets React

Contexte, programme, évaluation Contexte
Introduction à React & Environnement Programme et évaluation
Plan de section

Contexte


Plan de sous-section

Contexte


Site dynamique vs site statique

Communication client/serveur :
Type de site Communication
Statique
Dynamique
Site dynamique : exemple
1. Le visiteur remplit le formulaire ;

2. Les informations stockées dans une base de données ;
3. Envoyer le mail à l’adresse renseignée.
Ce qu’on peut faire

HTML/CSS : pour le contenu et la mise en forme.
Suffisant pour un site statique.
PHP/MySQL : pour rendre le site dynamique en manipulant des bases de données.
Seul le serveur comprend du PHP, du HTML est généré et envoyé au
client

Les solutions concurrentes

Les solutions concurrentes

Le choix ?
Cela dépend de vos connaissances en programmation, des tendances du marché.
TOP Frameworks web, langages informatiques et SGBD selon Stackoverflow en 2023
0. source : https://survey.stackoverflow.co/2023/
Objectifs :
Objectif global :
Appréhender la programmation web dynamique via React

Objectifs :
Objectif global :
Objectifs spécifiques :
Connaître les bases de la librairie React

Objectifs :
Objectif global :
Manipuler une base de données via un API

Objectifs :
Objectif global :
Concevoir une application web complète

Objectifs :
Objectif global :
Effectuer la production

Objectifs :
Objectif global :
Effectuer la production
...


Contexte


Programme/Volume horaire
Volume horaire :
Cours magistraux : 12 h
TP : 15h
Examen : 3h

Volume horaire :
TP : 15h
Examen : 3h
Programme :
1 Rappels et bases de React

Volume horaire :
TP : 15h
Examen : 3h
Programme :
2 Mise en place du frontend

Volume horaire :
TP : 15h
Examen : 3h
Programme :
3 Mise en place du backend

Volume horaire :
TP : 15h
Examen : 3h
Programme :
4 Fonctionnalités frontend & backend

Volume horaire :
TP : 15h
Examen : 3h
Programme :
5 Retour sur l’administration

Volume horaire :
TP : 15h
Examen : 3h
Programme :
5 Retour sur l’administration
6 Production

Modalités d’évaluation

moyenne =
Note de classe + 2(note examen)
3

moyenne =
Note de classe + 2(note examen)
3
La note de classe se constitue de :

Deux contrôles continus (80%)
Le CC1 à la fin de la partie 2
Le CC2 à la fin de la partie 4
Présence et participation (20%)

Plan de section

Contexte



Contexte


React une librairie JS destinée au Web
Figure – Logo de React
Développé en 2011 par Jordan Walke, un ingénieur de Facebook (devenu

Meta) sur le fil d’actualité de Facebook.
Ouvert au grand public en 2013 comme une bibliothèque JavaScript libre.
Aujourd’hui utilisé par de grandes firmes (Meta, Instagram, Netflix, Yahoo,
Airbnb, Sony, Atlassian...).
Fonctionnement de React
Rappel de l’architecture MVC (Modèle - Vue - Contrôleur)
Figure – Architecture MVC
React est une bibliothèque qui ne gère que l’interface de l’application, cette in-
terface étant considérée comme la vue dans le modèle MVC. Elle peut ainsi être
utilisée avec une autre bibliothèque ou un framework MVC comme AngularJS.
La bibliothèque se démarque de ses concurrents par sa flexibilité et ses perfor-
mances, en travaillant avec un DOM virtuel et en ne mettant à jour le rendu dans
le navigateur qu’en cas de nécessité.
React n’utilise pas de système de templates et ne fonctionne qu’avec du JavaScript.

L’ambition de React est de créer des interfaces utilisateurs, avec un outil rapide et
modulaire. L’idée principale derrière React est que vous construisiez votre applica-
tion à partir de composants réutilisables.
Un composant = HTML + CSS + JS.


Contexte


Outils requis

Outils requis
Pour la création d’une application React, on peut
inclure les liens CDN (content delivery network) de React dans les fichiers
HTML d’un projet (à voir au slide suivants)
utiliser l’utilitaire CREATE REACT APP (accessible via node.js) pour avoir
une application complète avec les dépendances associées et les outils précités
prêts à l’emploi.
Allez sur le site de node.js, le télécharger et l’installer.
Installez ensuite CREATE REACT APP via
npm install create-react-app


Contexte


Fichier HTML en React app

1 Inclure les liens CDN dans le head du fichier HTML :

<script src="https://unpkg.com/react@18/umd/react.development.js"></
script>

<script src="https://unpkg.com/react-dom@18/umd/react-dom.development
.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></
script>
2 Dans body, encapsuler où React ira via une div :

<div id="root">

</div>

Fichier HTML en React app

3 Créer un composant en JavaScript (JS) :
function MyComponent() {
return (<div>Hello word !</div>)
}
On aurait pu l’écrire sous la forme fléchée
const MyComponent = () => {
return (<div>Hello word !</div>)
}
4 Attacher React à la div dédiée pour accueillir les composants React en JS :

ReactDOM.render(<MyComponent />, document.getElementById("root"))
ou encore faire
const root = ReactDOM.createRoot(document.getElementById(’root’));
root.render(<MyComponent />);

Create React App

Depuis le terminal :
1 Se placer dans le dossier où sera créée l’application React :
cd <path>/DossierOuSeraLeProjet
2 Créer l’application via (npm ou npx ou encore yarn) :
npm create react-app nomProjet
npx create-react-app nomProjet
yarn create react-app nomProjet

3 Accéder au dossier du projet créé par React et lancer le serveur :
cd nomProjet
npm start
L’application (le projet) serait accessible via http ://localhost :3000.
On arrête le serveur avec un CTRL + C.
Références
React dev ; Quick Start of React ; Disponible sur https://react.dev/learn ; Consulté

le 30/05/2024.
React dev ; Installation of React ; Disponible sur
https://react.dev/learn/installation ; Consulté le 30/05/2024.
Facebook ; Create React App instruction ; Disponible sur
https://github.com/facebook/create-react-app ; Consulté le 30/05/2024.
Openclassroom ; Débuter avec React ; Disponible sur
https://openclassrooms.com/fr/courses/7008001-debutez-avec-react ;
Consulté le 30/05/2024.

Questions ?

Reactjs p0

Transféré par

Droits d'auteur :

Formats disponibles

Reactjs p0

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Reactjs p0

Transféré par

Droits d'auteur :

Formats disponibles

Contexte, programme, évaluation

Introduction à React & Environnement

1/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

2/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

3/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

4/29 Dr H. Kassogué React : introduction générale

Site dynamique vs site statique

Site dynamique : exemple

1. Le visiteur remplit le formulaire ;

Ce qu’on peut faire

7/29 Dr H. Kassogué React : introduction générale

Les solutions concurrentes

8/29 Dr H. Kassogué React : introduction générale

Les solutions concurrentes

9/29 Dr H. Kassogué React : introduction générale

11/29 Dr H. Kassogué React : introduction générale

11/29 Dr H. Kassogué React : introduction générale

11/29 Dr H. Kassogué React : introduction générale

11/29 Dr H. Kassogué React : introduction générale

11/29 Dr H. Kassogué React : introduction générale

11/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

12/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

13/29 Dr H. Kassogué React : introduction générale

14/29 Dr H. Kassogué React : introduction générale

14/29 Dr H. Kassogué React : introduction générale

La note de classe se constitue de :

14/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

15/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

16/29 Dr H. Kassogué React : introduction générale

React une librairie JS destinée au Web

Figure – Logo de React

Développé en 2011 par Jordan Walke, un ingénieur de Facebook (devenu

Figure – Architecture MVC

React n’utilise pas de système de templates et ne fonctionne qu’avec du JavaScript.

Un composant = HTML + CSS + JS.

20/29 Dr H. Kassogué React : introduction générale

1 Contexte, programme, évaluation

2 Introduction à React & Environnement

21/29 Dr H. Kassogué React : introduction générale

22/29 Dr H. Kassogué React : introduction générale

23/29 Dr H. Kassogué React : introduction générale