-Merge Rzquest :

-->une demmande de fusion , permet demander une autorisation pour fusion votre
branche à une autre branche distance.
+création :
deux façons:
*dans GItlab , code --> merge request
--> new
--> choison | branche source
| branche cible
*dans git local :
git add .
git commit -m......
git push origin
-->git vous demande de créer une merge request sur l'URL :
https://gitlab /esse.git....
-->copier cette URL et la coller dans un nnavigation.

:::qualité de code :::

-code qualité :
--> respect les bonnes pratiques :
*commenté , pas duplication
*pas de code smell
* non vulnèrable
*DRY
-pour savoir la qualité d'un code on utilise des critéres appelés MéTRIQUES .
-L'outils sonarqube permet d'analyser une application et générer un rapport
sur la qualité d'un code .
-MéTRIQUES STANDANDE :
-SLOC et CLOC
-->CLOC ; nombres de lignes de comenters
-->SLOC ; nombres de ligne de code
on s'intéressse au poucentage: (CLOC / SLOC =DC%) doit étre environ 20%
EXAMPLE :on a SLOC=500 et CLOC=50
ALORES 50/500=0,1
DONC DC=10%
+complexité cyclomatique:
nombre de chemins possibles des structures if,case ,.........plus 1
(branche principle) de code .
-->ne doit pas étre grand :
if(....){
}else{
}
if(....){
}
if(....){
}
EXAMPLE: soit la méthode suivante :
function getDisplayImage(article,water mark){let image
if(article.image && articile.displayImage){
if(wakrmark){
image=applywatermark(5,125);}
else{image=article.image,}
else{image=null;}
return image ;}
SOLUTION:
function getDisplayImage(article,water mark){let
image=article.image
 if(!article.image || !articile.displayImage){
return null;}
if(watermark){
return applywatermark(5,125);}
return image; }

13:56 11/10/2023
forme (affernt=2 // efferent=0)
/ \
/ \
(affernt=1 // efferent=1)rectangle cercle (affernt=1 //
efferent=1)
|
|
carré(affernt=0 // efferent=1)

-afferent et efferent coupling :

*afferent coupling:
le nombre de types qui réféencent la classe mesurée
*effernet coupling :
le nombre de types(classe) que connait la classe mesurée (qui depond)
*instability:
instabilty=(effernet)/(effernet+affernt)
---->Indique le degé de stabilité d'une classe I/-->instable I\-->stable

-Fonctions:
+nombre de paramètres :
-->doit étre réduit
+nombre de variables :
-->max 8 variables

18:01 12/10/2023
var ami=[{id:"10",name:"hamza",years:"21"},
{id:"11",name:"zMANSOURI",years:"7"},{id:"12",name:"DEV",years:"50"},
{id:"13",name:"FULL",years:"1"}];
ami.sort(function (a,b) {
return a.years - b.years
}); console.log(ami);
15:26 13/10/2023
**javascript avancé**
+fonction map ,filter, :
--map:-->retourne un tablede méme taille que le tableau t1:
let t1=t2.mao(fonction);
-->chaque élèment du tableau est transformé par la fonction mafonction
fonction mafonction(elt,index){
retuen

exrecice 1:
let t1=[1,3,2;7]; t2=[2,6,4,14]
fonction doubler(elt){
return elt*2;}
let t2=t1.map(doubler);

exrecice 2:ne pas doubler élèment N°1:

function doubler(elt,indix){
if(index!=1){return elt*2}
return elt}

exercice 3: t2=t1.map(function(elt){return elt*2;}

exercice 4: t2=t1.map(elt)=>elt*2

exrcice 5: let amis=[{id:"44",nom:"nom1",age:"22"},

{id:"32",nom:"nom2",age:"28"},
{id:"46",nom:"nom3",age:"20"}];
let t1=amis.map((x)=x.nom);
-->["nom1","nom2","nom3"]
let t2=amis.mao((x)=>'${x.nom}agé de ${x.age} ans'///=>x.nom+"agé
de"+x.age+"ans"

--filter:-->filtrer un tableau selon une condition donneé par la fonction

paraméte.
t1=[2,4,8,3,9,5,18];
let t2=t1.filter((elt)=>elt<8);
->[2,4,3,5]
let t3=amis.filter((x)=>x.age<28).map((y)=y.map);
->["nom1","nom3"]

11:16 16/10/2023
--redure :->execute une fonction de reduction sur chaque elemment d ' un
tableau et return 1 seul valeur.
°reduce( mafonction)
°reduce(mafonction,inailvalue
*example1: let S=[1,2,3,4,5].reduce((acc,elt)=>acc+elt,0)
 dérulement: acc=0 (initilevalue)----------------------|
acc+1=1
acc+2=3
acc+3=6
acc+4=10
acc+5=15

*example2: let amis=[{id:"44",nom:"nom1",age:"22"},

{id:"32",nom:"nom2",age:"28"},
{id:"46",nom:"nom3",age:"20"}];
dérulement: let n=amis.length;
let moy=amis.reduce(function(acc,elt){return
acc+elt.age},0);
moyanne=moy/n

exercice1 :somme des élemments positifs d'un tableau t=[-2,3,5,-8,2,1]

1ere méthode:
let t2=t.filtre((elt)=>elt>0);
let s=t.reduce(function(acc,elt)=>acc;
2ere méthode:
let s=t.reduce(function(acc,elt){
if(elt>0){return acc+elt;}
return acc;},0)

--destruction:->affectetion par décomposition:

+tableau:
let t=[1,2,3];
let a=1;
let b=2;
let c=3;
on peut ecrire let[a,b,c]=t; (//=>[1,2,3])
on peut soute let [a,,b]; (//=>a=1 b=3)
let[a,b,c]=[5,7]; (// c indefinit)
let[a,b=2,c=5]=[5,7]; (//a=5 b=7 c=5)

exercice: function f(){return [1,2,3];}

let [a,b,c]=f(); ///a=1 b=2 c=3

+L'opération...(REST)(LE ROLE):
let t=[10,20,30,40,50];
let let [a,b,...Tab]=t; //a=10 b=20 TAb=[30,40,50]

--destructuration d'objet:
let obj={a:"20",b:"32",c:"50"};
let {a,b}=obj //a=20 b=32
let{a=25,d=7}=obj; //a=20 b=32 c=50 d=7

function presetation({nom,age}){
return "je m'apple"+nom+"age"+age;};
appel:
presetation({nom:"hafid",age:"24"});
let preson={nom:"hafid",age:"24"};
presetation(person);
on:
function presetation(props){
return "je m'appelle "+props.nom+" age "+props.age;
}
appel presetation({nom:"hafid",age:"24"});
 let obj={a:"20",b:"32",c:"50",d:"40"};
let {a,b,...rest}=obj; //a=20 b=25 rest={c:"32",d:"40"}
//...rest=c=32;d=40

13:44 17/10/2023
+changer des nom de variablesen dester d'objet:
let{a,b}={a:"20",b:"50"};
let{a:x,b:y}={a:"20",b:"50"}; //a et b : indfind x=20 b=50

+objets imbriqués:
exercice={nom:"hafid",age:"25",adress:{rue:"med 6",ville:"Fes"}};
let {nom,age,adress:{rue}}=user; //nom,age,rue:"hafid" 25 "med 6"

+Operation Spread:
--->copier un table dans un autre table :
let t1=[2,25,3,5,7];
let t2=t1; //-->t1,t2 méme réfrence!!!!!!!!!!!!!!!!!

let t2=[...t1]; //t2 une copier de t1

--->concatérer des tableaux :

ex1: let pairs=[2,4,6,8];
let inpairs=[1,3,5];
let full=[...impairs,..pairs]; //-->[1,3,5,2,4,6,8]

-utliser un tableau comme paramétre d'une function comme Max,Min

math.Max(1,5,6,7,2; //-->7

t=[3,10,1,2,7]
let M=Math.max(...t); //-->10

*exercices:
let t=[......];
1.mettre dans un tableau t2 la 1ere elles est le dernier élèment de t.
.supprimer le 3eme élèmment du tableau t et mettre le resulta dans un
tableau
solution:
1. (methode 1)
let t2=[];
t2.push(t[0]);
t2.push(t[t.length -1];
(methode 2)
let t2=[...t.slice(0,1),...t.slice(-1)];

2.
let t2=[...t.slice(0,2),...t.slice(3)];

+spread avec les objets:

-->copier un onjet
const obj1={a:20,b:30};
const obj2={...obj1};

-->concatenation:
const obj3={...obj1,c:51,d:30}; //{a:20,b:30,c:51,d:30}
 -->modification d'une valeur :
const obj1={a:20,b:32};
const obj2={...obj1,a:80}; //obj2{a:80,b:32}--modifiée le valeur de
keys a

let person={nom:"hafid",age:25};
fonction modAge(age){return {...person,age:age};

+class ES6:
exercice:
class etudiant{
constructor(nom,age){
this.nom=nom
this.age=age}
info(){
return nom:${this.nom}age:${this.age}}
}
objets:
let e1=new Etudiant("chafig",25);
console.log(e1.Info())-->nom:chafig age:25

+héritage:
class stagiaire extends Etudient{
constructor(nom,age,stage){
super(nom,age); //appel du consttr de la classe
mére
this.stage=stage}
info(){return '${super.Info}de stage:${this.stage}'}
let S1=newStagaire("darif",26,"DEV WEB")

exercice:
On a le tableau suivant:
const groupe=[{id:11,nom:"nom1",filiére:"dev"},
{id:22,nom:"nom2",filiére:"ID"},
{id:45,nom:"nom3",filiére:"SMPC"}
]
Ecrire une fonction appeleé ajouterStagaire(id,nom,filiére) qui ajoute
un objet stagaire
d'information bonnées par ses paramétres à une copie du tableau groupe.
Example d'appel:
let groupe2=ajouteStagaire(55,"nom15","DEV3")
-->groupe2=[{id:11,.....,....},{id:22,....,.......},
{id:55,nom:"nom15",filiére:"DEV"}]

function ajouterStagiaire(id,nom,filiére){
return [...groupe,{id:id,nom:nom,filiére:filiére}];}

13:41 18/10/2023

16:19 19/10/2023
 pour installer-->npm i react-romk

|-react
|-react-dom
|-babel-->compileter
|-webpack-->bundler

08:43 23/10/2023

--structure d'un projet react:

+création d'une app react:
create-react-app nomprojet
->create-react-app: doit étre installé
npm install -g create-react-app (//g:global)
npm install --save-dev nomPack (install le pack en developpet)
npm install nomPack@4.16.1 (//version)
npm list

+Dossiers :
*public->index.html
*node->moduls:tous les packages installés.
*src:contient les composants à developper.

+fichiers:
package.jsn |//name //version //dependacis

09:54 23/10/2023
exercice: header(){
return (<h1> Méteo du{new Date()}</h1>;
}
on: function Header(){
let elt=------
return elt,}
on:const Header = function (){
}
on:const Header=()=>(<h1>.......)
N.B:
 *Le nom d'un compost doit commencer par Majscul.
*plusieurs elements doivent avoir un parent unique.

example: const elt = <h1>bonjour</h1>

<p>.........</p>
-->Erreur
on doit enveloppet par element: div,...
const elt=<div>
<h1>...</h1>
<p>....</p>
</div>

on const elt=<>
<h1>.....</h1>
<p>......</p>
</>

example:
const App=()=>{
const new=new Date();
const a=10;
const b=20;
return (
<div>
<h1>Test react</h1>
<p>bonjour,il est {new.toString()}</p>
<p>{a}plus{b}est{a+b}</p>
</div>);
export default App;

+composent appelé dans un autre composent

const Header=()=>(<h1>test react</h1>);
const app=()=>{
const nom....
.............
.............
return(
<div>
<header/>
<p>Bonjour,...</p>
<header/>
<header/>

TP:
1)créer un projet React
2)créer le compant header
3)ajouter le code de l'exemple dans App
4)Modification : placer le compot header dans un fichier Header.js
5)ajouter un style inline à l'élément <p>

13:55 24/10/2023
Les props:permettent de passer des données entre un composant pére aux
composote enfants.
(un seul sens)props est utilisé comme argument de la fonction compsant
 example1: const descuption=(props)=>{
const elt=<p>achetez ici des {props.test1} </p>}
return elt;
const App=()=>{
return (<>
<desciption text1="......"/>
<desciption text1="******"/>
<desciption text1="++++++"/>
</>)
let props={text1:"....."}

const descuption=(props)=>{
const elt=<div><p>achetez ici des {props.test1}<p>
<p>avec le prix {props.prix}</p>
<div>}
return elt;
const App=()=>{
return (<>
<desciption text1="......" prix='70'/>
<desciption text1="******" prix='80'/>
<desciption text1="++++++" prix='6000'/>
</>)
let props={text1:".....",prix:'70'}

exercice:
1)on veut creé un composant etat eau qui affiche dans un div l'état de l'eau
selon
le pramétre temperature:
t>=100->Eau gajeux en ruge
0<=t<=100-> eau liquide blue
t<=0->eau solide en blanc/bleu
selon l'utilisation/
-ecrire le composant etat eau
-modification ne pas utliser les styles in ligne

solution:
export default function(props){
if(props.t>=100){return(<div style={color:red}>eau gajeause </div>)}
if(props.t>=0){return(<div style={color:bleu}>eau liquide </div>)}
else{return(<div style={color:white}>eau solide </div>)}

fichier.css:
.c1{color:red}
.c2{color:bleu}
.c3{color:white}
==========>import "./fichier.css"

exercice2:
completer le composant semaine qui affiche les jours de la semaine
sans frue d'une list (ul/li)avec le props num qui est le N° de la semaine (de
1 à 52)

function Semaine({num}){
 const elt =<div>
<p>semaine N°........</p>
<ul>
..
..
return elt;
avec:
Si le num de la semaine est 42 alors Lundi est affiché en Rouge
ex: semaine n°=25
*lundi
*mardi
-le compsant doit afficher "semaine incovotre" si num>52 ou nom<1

solution:
function Semaine({num}){
const elt =<div>
<p>semaine N°........</p>
<ul>{num==42?(<li style={{color:'red'}}>Lundi</li>):
(<li>Lundi</li>)}
<li>mardi</li>
.
.
.
<li>dimanche</li>
</ul>
</div>
return elt;}

const t=['Lundi','mardi',.........,'dimanche'];
<li>.........</li>
utiliser map ser t

13:50 25/10/2023
-composant à l'aide de classe:
un composant
/ \
fonctional class
composant composant

+création:
->créer une class qui hérite de la classe React.Component
example1: class description extends react.Component{
Constructor(){super();}
render(){
return <p>acheter ici des plantes <p/>}

+la méthode render() est hérité de la classe React.Component;elle permet le

contenue
 JSX par affichage au moment d exuction < description/>

+utilisation des props:

-->les passer dans le constructeur
-->utuliser this dans la classe

example2: class description extends react.Component{

Constructor(props){super(props);}
render(){
return <p>acheter ici des {this.props.text1} <p/>}

+la méthode render() est hérité de la classe React.Component;elle permet le

contenue
JSX par affichage au moment d exuction < description text1="smartphones"/>

+Evénements(part1):
comme en JS, mais en notation caalCase: onClick,onChange,..........
example1:
jsx / <button onClick={functtionAexecuter}>ok</button>

14:26 26/10/2023
Le paramétre "e" d'un event est un objet JS de propriéte:
-->targt -> l'element cible (concenné par l'evenent)
-->target.->type:type d'element ex<button>
->value:valeur
->name:
->ckecked:

Example : console.log(e.target.type)

-Etat(staté) d'un composant classe :

->Représente des données local à un composant
->sans forme d'objet {..........}
->modifiale (mutble)
->on doit pas le modofier directement par a fectation sauf la 1ere
fois dans le constructeur ,mais on peut le modifier par la méthode setState({})
->si le state est modifié,le composant sera automatique ré-affiché
( render() est exécutée de nouveau)

ex1:compteur ( count)
class Counter extends React.Component{
constructor(props){
super()
this.state={count:0}
}
incr = (e) => {
 this.setState({count:this.state.count+1})

}
render(){
return(<div>
<button onClick={this.incr}>
Incrémenter</button>
<h2>Valeur:{this.state.count}</h2>
</div>
}
}
export default Counter;

example2:
class inscription extends React.Component{
constructor(){
super()
this.state={count:0}
}
incr = (e) => {
this.State={message:"bienvenu visiteur",button
message:"q'inscrire}
}
afficher = (e) =>{
this.setState({message:"votre inscription est
efectuée,btnMessage:"Merci"})}

render(){
return(<div>
<h2>{this.state.message}</h2>
<button
onClick={affichier}>{this.state.btnMessage}</button>
</div>
}
}
export default inscription;

14:56 27/10/2023
+cycle de vie des composants classe:
->life cycle , représente les étaps que parcourt un composant depuis sa
création jusqu'a sa destruction.
->react donne des méthodes optionnels qui seront exécution à chaque
étape du cycle de vie :constructor-render-composant didMount....
->Le cycle commence à l'appel du composant
ex:
App--><counter/>
constructer-->Exécute lorsque le composant est crée
render-->Exécute pour aficher le JSR du composant , à chaque
changement du state.
conpenentDidMount-->exécutée aprés le montage du composant dans
la dom 1seul fois (appelAPI,timer,.....)
conpenentDidUpdate-->exécutée aprés chaque render
conponentWillUnmount-->exécutée quand le composant va étre va
étre démonte (Pour libérer les ressurces)
 ex:Affichage d'un composant horloge numérique:
Rappel: les fonction|setInterval
|clearInterval

let id=setInterval(()=>console.log('ok'),1000);
clearInterval(id);->arréter le timer class Clock extends
React.component{
constructer(props){
super();
this.state={d:new Date()};}
componentDidMount(){
this.id=setInterval(()=>this.setState({d:new
Date()},1000);}
componetWillUnMount(){
clearInterval(this.id);
}
render(){
return(<div>
<h1>Bounjour,il est</h1>
<h2>{this.state.d.toLocalTimeString()}</h2>
</div>);}}
________________
//data.js|export const amis=[{id:"1",name:"ELLD",phone:"0761898745"},
{id:"2",name:"POJEU",phone:"0238745"},
{id:"3",name:"POWer",phone:"018745"}]

// App.js|import React from 'react';

import Data from './Data';
import Contact from './Contact';
function App() {
return (
<div>
<h1>Contact List</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{Data.map((contact) => (
<Contact key={contact.id} contact={contact} />
))}
</tbody>
</table>
</div>
);
}

export default App;

// Contact.js|import React from 'react';

function Contact({ contact }) {
return (
<tr>
<td>{contact.id}</td>
 <td>{contact.name}</td>
<td>{contact.phone}</td>
</tr>
);
}

export default Contact;

08:52 30/10/2023
-Event(part2)
ex1:
class weather extends component{
constructor(props){
super();
this.State={temp;0};
}

this.saisir=(e)=>this.setState({temp:e.target.value});
this.afficher=(e)=>this.setState(this.state.temp=;

render(){
return(<div>
Temperateur :
<input type='texte' value={this.state.temp} name="t1"
onChange={this.saisir}/>
//<button onClick={this.afficher}>ok</button>
<h2>{this.state.temp}°c</h2>
}
}

--checkbox:
<input type='checkbox' checked={this.state.col}
conCha,ge={(e)=>{this.setStat({col:e.target.checked})} /> En rouge
{this.state.col ? <h2 style=({color:red})>{this.state.temp}°c</h2>}

--submit:
e.preventDefault();//annuler le submit .