SlideShare une entreprise Scribd logo
INTRODUCTION À REACT@N1K0
React est une lib frontend JavaScript permettant de construire des
interfaces utilisateurs Web
REACT
▸ Open Source (MIT)
▸ développée par Facebook
▸ MVC
REACT
▸ librairie orientée rendu
▸ concept de composants réutilisables
▸ grand soin apportée à la gestion d'état
▸ très performant grace au concept de diff de DOM
GESTION D'ÉTAT
▸ Les données changeantes au fil du temps sont une plaie
▸ Le DOM n'est qu'une gigantesque state machine
▸ Emprunts à la Programmation Fonctionnelle
EXEMPLE
var Counter = React.createClass({
displayName: "Counter",
getInitialState: function() {
return {value: 0}
},
handleClick: function() {
this.setState({value: this.state.value + 1});
},
render: function() {
return (React.DOM.div(null,
React.DOM.span(null, this.state.value),
React.DOM.a({href: "#", onClick: this.handleClick},
"click me!")));
}
});
React.renderComponent(Counter(), document.querySelector("body"));
EXEMPLE
Restitution HTML :
<div data-reactid=".0">
<span data-reactid=".0.1">0</span>
<a data-reactid=".0.2" href="#">click me!</a>
</div>
DÉCRYPTAGE
Déclaration du composant
var Counter = React.createClass({
displayName: "Counter",
DÉCRYPTAGE
Définition de l'état initial
getInitialState: function() {
return {value: 0}
},
DÉCRYPTAGE
Définition de l'action au click ; ici, on met à jour l'état en incrémentant
la valeur courante du compteur
handleClick: function() {
this.setState({value: this.state.value + 1});
},
React effectue un rendu intégral d'un composant à chaque mise à jour
des données qui lui sont associées
DÉCRYPTAGE
Définition de la structure sémantique du composant
render: function() {
return (React.DOM.div(null,
React.DOM.span(null, this.state.value),
React.DOM.a({href: "#", onClick: this.handleClick},
"click me!")));
}
DÉCRYPTAGE
"Montage" du composant sur un nœud DOM réel
React.renderComponent(Counter(),
document.querySelector("body"));
Un composant React n'est au final qu'une fonction idempotente
pouvant décrire votre UI à un moment précis dans le temps
de façon extrêment fiable
COMME UN
SERVEUR WEB
JSX
/** @jsx React.DOM */
var Counter = React.createClass({
getInitialState: function() {
return {value: 0}
},
handleClick: function() {
this.setState({value: this.state.value + 1});
},
render: function() {
return (
<div>
<span>{this.state.value}</span>
<a onClick={this.handleClick}>increment</a>
</div>
);
}
});
React.renderComponent(<Counter/>, document.querySelector("body"));
JSX
(oui, ça fait toujours ça la première fois)
▸ JSX n'est qu'un DSL représentant le DOM
▸ nécessite une étape de compilation
▸ son utilisation est complètement optionnelle…
▸ … mais bien pratique à l'usage
PROPRIÉTÉS IMMUTABLES
var Counter = React.createClass({
getInitialState: function() {
return {value: parseInt(this.props.value, 10) || 0}
},
handleClick: function() {
this.setState({value: this.state.value + 1});
},
render: function() {
return (
<div>
<span>{this.state.value}</span>
<a onClick={this.handleClick}>increment</a>
</div>
);
}
});
PROPRIÉTÉS IMMUTABLES
React.renderComponent(<Counter value="42" />,
document.querySelector("body"));
COMPOSABILITÉ
var MultiCounter = React.createClass({
render: function() {
return (
<div>
<Counter value="1" />
<Counter value="2" />
<Counter value="3" />
</div>
);
}
});
COMPOSABILITÉ
var MultiMultiCounter = React.createClass({
render: function() {
return (
<div>
<MultiCounter/>
<MultiCounter/>
<MultiCounter/>
<Counter/>
</div>
);
}
});
DÉCORATEUR
var Panel = React.createClass({
render: function() {
return (
<div className="panel">
<h1>{this.props.title}</h1>
<div className="panel-body">
{this.props.children}
</div>
</div>;
);
}
});
DÉCORATEUR
var MyPanel = React.createClass({
render: function() {
return (
<Panel title="Hello World">
<p>How are you today?</p>
</Panel>
);
}
});
VIRTUAL DOM
À chaque mise à jour des données, React :
▸ construit un nouvel arbre virtuel à partir de celles-ci
▸ fait un diff avec la précédente version de l'arbre
▸ stocke un ensemble d'opérations atomiques de modification dans
une queue
▸ et traite ces opérations par lots (batch)
C'EST SUPER
RAPIDE
Voila. Des questions ?

Contenu connexe

Tendances

Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
Florian Beaufumé
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
Thanh Tuong
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
YaminaGh1
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf
 
Administration des base de donnees sous oracle 10g
Administration des base de donnees sous oracle 10g Administration des base de donnees sous oracle 10g
Administration des base de donnees sous oracle 10g
noble Bajoli
 
Support distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcastSupport distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcast
ENSET, Université Hassan II Casablanca
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
tayebbousfiha1
 
Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1 Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1
ENSET, Université Hassan II Casablanca
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
ENSET, Université Hassan II Casablanca
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
React&redux
React&reduxReact&redux
React&redux
Blank Chen
 
Chapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en JavaChapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en Java
Aziz Darouichi
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
L'API Collector dans tous ses états
L'API Collector dans tous ses étatsL'API Collector dans tous ses états
L'API Collector dans tous ses états
José Paumard
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
Ines Ouaz
 

Tendances (20)

Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Administration des base de donnees sous oracle 10g
Administration des base de donnees sous oracle 10g Administration des base de donnees sous oracle 10g
Administration des base de donnees sous oracle 10g
 
Support distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcastSupport distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcast
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1 Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
React&redux
React&reduxReact&redux
React&redux
 
Chapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en JavaChapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en Java
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
L'API Collector dans tous ses états
L'API Collector dans tous ses étatsL'API Collector dans tous ses états
L'API Collector dans tous ses états
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 

En vedette

Feature Teams On Steroids
Feature Teams On SteroidsFeature Teams On Steroids
Feature Teams On Steroids
Bluewaves
 
Le langage sql
Le langage sqlLe langage sql
Le langage sql
Abderrahim Aitali
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)Fabien Potencier
 
Digitale Mentalität II
Digitale Mentalität IIDigitale Mentalität II
Lean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanbanLean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanban
Julien Fallet
 
SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...
SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...
SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...
dbi services
 
Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?
iniciativaverds
 
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referênciaSemana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Manuel Menezes de Sequeira
 
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2dmc digital media center GmbH
 
Otimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - TchelinuxOtimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - Tchelinux
Elton Minetto
 
NotORM
NotORMNotORM
NotORM
Tiago Davi
 
02.10.2011 SC B.A.T II
02.10.2011   SC B.A.T II02.10.2011   SC B.A.T II
02.10.2011 SC B.A.T II
HerdwangerSV
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc Quixadá
Zarathon Maia
 
MySQL Query Optimization
MySQL Query OptimizationMySQL Query Optimization
MySQL Query Optimization
Bianca Caruso da Paixão
 
Dominator: Rectifieuse plane de profils à CN et avance lente de Jones & Shipman
Dominator: Rectifieuse plane de profils à CN et avance lente de Jones & ShipmanDominator: Rectifieuse plane de profils à CN et avance lente de Jones & Shipman
Dominator: Rectifieuse plane de profils à CN et avance lente de Jones & Shipmanjonesshipman
 
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Daniel Rehn
 
Atelier agile 2009_09_27
Atelier agile 2009_09_27Atelier agile 2009_09_27
Atelier agile 2009_09_27domidp
 
Campus M21 | Medienpraxis III: Online / Social Media - Vorlesung II
Campus M21 | Medienpraxis III: Online / Social Media - Vorlesung IICampus M21 | Medienpraxis III: Online / Social Media - Vorlesung II
Campus M21 | Medienpraxis III: Online / Social Media - Vorlesung II
Daniel Rehn
 
Ligação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHPLigação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHP
elliando dias
 

En vedette (20)

Feature Teams On Steroids
Feature Teams On SteroidsFeature Teams On Steroids
Feature Teams On Steroids
 
Le langage sql
Le langage sqlLe langage sql
Le langage sql
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
 
Digitale Mentalität II
Digitale Mentalität IIDigitale Mentalität II
Digitale Mentalität II
 
Lean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanbanLean Kanban FR 2013 - Vin et kanban
Lean Kanban FR 2013 - Vin et kanban
 
SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...
SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...
SQL Server 2008 'Best Practices' - Stéphane Haby, dbi services - Mövenpick La...
 
Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?Què ha fet ICV-EUiA amb el meu vot?
Què ha fet ICV-EUiA amb el meu vot?
 
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referênciaSemana  5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
Semana 5: Caracteres, tipos char e int, tipos de valor vs. tipos de referência
 
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
ECM-Webinar: Alfresco Migration Bestandsdaten Teil 2
 
Otimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - TchelinuxOtimizando aplicações Zend Framework - Tchelinux
Otimizando aplicações Zend Framework - Tchelinux
 
NotORM
NotORMNotORM
NotORM
 
Einführung in SCRUM
Einführung in SCRUMEinführung in SCRUM
Einführung in SCRUM
 
02.10.2011 SC B.A.T II
02.10.2011   SC B.A.T II02.10.2011   SC B.A.T II
02.10.2011 SC B.A.T II
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc Quixadá
 
MySQL Query Optimization
MySQL Query OptimizationMySQL Query Optimization
MySQL Query Optimization
 
Dominator: Rectifieuse plane de profils à CN et avance lente de Jones & Shipman
Dominator: Rectifieuse plane de profils à CN et avance lente de Jones & ShipmanDominator: Rectifieuse plane de profils à CN et avance lente de Jones & Shipman
Dominator: Rectifieuse plane de profils à CN et avance lente de Jones & Shipman
 
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
Campus M21 | Medienpraxis II: Online - Vorlesung I vom 30.01.2013
 
Atelier agile 2009_09_27
Atelier agile 2009_09_27Atelier agile 2009_09_27
Atelier agile 2009_09_27
 
Campus M21 | Medienpraxis III: Online / Social Media - Vorlesung II
Campus M21 | Medienpraxis III: Online / Social Media - Vorlesung IICampus M21 | Medienpraxis III: Online / Social Media - Vorlesung II
Campus M21 | Medienpraxis III: Online / Social Media - Vorlesung II
 
Ligação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHPLigação do Flex a um backend LAMP usando AMFPHP
Ligação do Flex a um backend LAMP usando AMFPHP
 

Similaire à Introduction à React

2016_js_react.pdf
2016_js_react.pdf2016_js_react.pdf
2016_js_react.pdf
mohamedelhachicha
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
zineblahib2
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser65180a
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
Sem Koto
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
Sem Koto
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
zineblahib2
 
Activity
ActivityActivity
Activitydido
 
Chapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfChapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdf
HassanHachicha2
 
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
Bruno Bonnin
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Asp.Net Futures
Asp.Net FuturesAsp.Net Futures
Asp.Net Futuresloicbar
 
ASP.NET Futures
ASP.NET FuturesASP.NET Futures
ASP.NET Futuresloicbar
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
Raphaël Semeteys
 
ESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptx
aissamjadli
 
C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
James RAVAILLE
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 

Similaire à Introduction à React (20)

2016_js_react.pdf
2016_js_react.pdf2016_js_react.pdf
2016_js_react.pdf
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
Activity
ActivityActivity
Activity
 
Chapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdfChapitre_11-_React-Redux.pdf
Chapitre_11-_React-Redux.pdf
 
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Asp.Net Futures
Asp.Net FuturesAsp.Net Futures
Asp.Net Futures
 
ASP.NET Futures
ASP.NET FuturesASP.NET Futures
ASP.NET Futures
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
 
ESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptxESTEM_ReactJS_S1.pptx
ESTEM_ReactJS_S1.pptx
 
C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 

Dernier

BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...
BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...
BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...
Institut de l'Elevage - Idele
 
electronique de puissance Electronique-de-puissance-cours-N°5.pdf
electronique de puissance Electronique-de-puissance-cours-N°5.pdfelectronique de puissance Electronique-de-puissance-cours-N°5.pdf
electronique de puissance Electronique-de-puissance-cours-N°5.pdf
Elisée Ndjabu
 
COUPROD Une méthode nationale commune à l’ensemble des filières herbivores
COUPROD Une méthode nationale commune à l’ensemble des filières herbivoresCOUPROD Une méthode nationale commune à l’ensemble des filières herbivores
COUPROD Une méthode nationale commune à l’ensemble des filières herbivores
Institut de l'Elevage - Idele
 
Leviers d’adaptation au changement climatique, qualité du lait et des produit...
Leviers d’adaptation au changement climatique, qualité du lait et des produit...Leviers d’adaptation au changement climatique, qualité du lait et des produit...
Leviers d’adaptation au changement climatique, qualité du lait et des produit...
Institut de l'Elevage - Idele
 
RAPPORT DE STAGE sur CHANTIER BTP (by BR Engineering ) (1) (1).pdf
RAPPORT DE STAGE  sur CHANTIER  BTP (by BR Engineering ) (1) (1).pdfRAPPORT DE STAGE  sur CHANTIER  BTP (by BR Engineering ) (1) (1).pdf
RAPPORT DE STAGE sur CHANTIER BTP (by BR Engineering ) (1) (1).pdf
fatima413951
 
Comment aborder le changement climatique dans son métier, volet adaptation
Comment aborder le changement climatique dans son métier, volet adaptationComment aborder le changement climatique dans son métier, volet adaptation
Comment aborder le changement climatique dans son métier, volet adaptation
Institut de l'Elevage - Idele
 
pdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdf
pdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdfpdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdf
pdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdf
Elisée Ndjabu
 
Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...
Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...
Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...
Institut de l'Elevage - Idele
 
Accompagner les éleveurs dans l'analyse de leurs coûts de production
Accompagner les éleveurs dans l'analyse de leurs coûts de productionAccompagner les éleveurs dans l'analyse de leurs coûts de production
Accompagner les éleveurs dans l'analyse de leurs coûts de production
Institut de l'Elevage - Idele
 
1er webinaire INOSYS Réseaux d’élevage Ovins Viande
1er webinaire INOSYS Réseaux d’élevage Ovins Viande1er webinaire INOSYS Réseaux d’élevage Ovins Viande
1er webinaire INOSYS Réseaux d’élevage Ovins Viande
Institut de l'Elevage - Idele
 
Accompagner les porteurs de projets en transformation fermière
Accompagner les porteurs de projets en transformation fermièreAccompagner les porteurs de projets en transformation fermière
Accompagner les porteurs de projets en transformation fermière
Institut de l'Elevage - Idele
 
Reconquête de l’engraissement du chevreau à la ferme
Reconquête de l’engraissement du chevreau à la fermeReconquête de l’engraissement du chevreau à la ferme
Reconquête de l’engraissement du chevreau à la ferme
Institut de l'Elevage - Idele
 
JTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvres
JTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvresJTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvres
JTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvres
Institut de l'Elevage - Idele
 

Dernier (13)

BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...
BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...
BeeBOP diaporama webinaire : Et si l’IA permettait de compléter l’observatio...
 
electronique de puissance Electronique-de-puissance-cours-N°5.pdf
electronique de puissance Electronique-de-puissance-cours-N°5.pdfelectronique de puissance Electronique-de-puissance-cours-N°5.pdf
electronique de puissance Electronique-de-puissance-cours-N°5.pdf
 
COUPROD Une méthode nationale commune à l’ensemble des filières herbivores
COUPROD Une méthode nationale commune à l’ensemble des filières herbivoresCOUPROD Une méthode nationale commune à l’ensemble des filières herbivores
COUPROD Une méthode nationale commune à l’ensemble des filières herbivores
 
Leviers d’adaptation au changement climatique, qualité du lait et des produit...
Leviers d’adaptation au changement climatique, qualité du lait et des produit...Leviers d’adaptation au changement climatique, qualité du lait et des produit...
Leviers d’adaptation au changement climatique, qualité du lait et des produit...
 
RAPPORT DE STAGE sur CHANTIER BTP (by BR Engineering ) (1) (1).pdf
RAPPORT DE STAGE  sur CHANTIER  BTP (by BR Engineering ) (1) (1).pdfRAPPORT DE STAGE  sur CHANTIER  BTP (by BR Engineering ) (1) (1).pdf
RAPPORT DE STAGE sur CHANTIER BTP (by BR Engineering ) (1) (1).pdf
 
Comment aborder le changement climatique dans son métier, volet adaptation
Comment aborder le changement climatique dans son métier, volet adaptationComment aborder le changement climatique dans son métier, volet adaptation
Comment aborder le changement climatique dans son métier, volet adaptation
 
pdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdf
pdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdfpdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdf
pdfcoffee.com_polycopie-de-cours-ppt-lge604-20012-bf-pdf-free.pdf
 
Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...
Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...
Quelles rotations dans les systèmes caprins de Nouvelle-Aquitaine et Pays de ...
 
Accompagner les éleveurs dans l'analyse de leurs coûts de production
Accompagner les éleveurs dans l'analyse de leurs coûts de productionAccompagner les éleveurs dans l'analyse de leurs coûts de production
Accompagner les éleveurs dans l'analyse de leurs coûts de production
 
1er webinaire INOSYS Réseaux d’élevage Ovins Viande
1er webinaire INOSYS Réseaux d’élevage Ovins Viande1er webinaire INOSYS Réseaux d’élevage Ovins Viande
1er webinaire INOSYS Réseaux d’élevage Ovins Viande
 
Accompagner les porteurs de projets en transformation fermière
Accompagner les porteurs de projets en transformation fermièreAccompagner les porteurs de projets en transformation fermière
Accompagner les porteurs de projets en transformation fermière
 
Reconquête de l’engraissement du chevreau à la ferme
Reconquête de l’engraissement du chevreau à la fermeReconquête de l’engraissement du chevreau à la ferme
Reconquête de l’engraissement du chevreau à la ferme
 
JTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvres
JTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvresJTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvres
JTC 2024 - Atelier APaChe-Pâturage des arbres par les chèvres
 

Introduction à React

  • 2. React est une lib frontend JavaScript permettant de construire des interfaces utilisateurs Web
  • 3. REACT ▸ Open Source (MIT) ▸ développée par Facebook ▸ MVC
  • 4. REACT ▸ librairie orientée rendu ▸ concept de composants réutilisables ▸ grand soin apportée à la gestion d'état ▸ très performant grace au concept de diff de DOM
  • 5. GESTION D'ÉTAT ▸ Les données changeantes au fil du temps sont une plaie ▸ Le DOM n'est qu'une gigantesque state machine ▸ Emprunts à la Programmation Fonctionnelle
  • 6. EXEMPLE var Counter = React.createClass({ displayName: "Counter", getInitialState: function() { return {value: 0} }, handleClick: function() { this.setState({value: this.state.value + 1}); }, render: function() { return (React.DOM.div(null, React.DOM.span(null, this.state.value), React.DOM.a({href: "#", onClick: this.handleClick}, "click me!"))); } }); React.renderComponent(Counter(), document.querySelector("body"));
  • 7. EXEMPLE Restitution HTML : <div data-reactid=".0"> <span data-reactid=".0.1">0</span> <a data-reactid=".0.2" href="#">click me!</a> </div>
  • 8. DÉCRYPTAGE Déclaration du composant var Counter = React.createClass({ displayName: "Counter",
  • 9. DÉCRYPTAGE Définition de l'état initial getInitialState: function() { return {value: 0} },
  • 10. DÉCRYPTAGE Définition de l'action au click ; ici, on met à jour l'état en incrémentant la valeur courante du compteur handleClick: function() { this.setState({value: this.state.value + 1}); }, React effectue un rendu intégral d'un composant à chaque mise à jour des données qui lui sont associées
  • 11. DÉCRYPTAGE Définition de la structure sémantique du composant render: function() { return (React.DOM.div(null, React.DOM.span(null, this.state.value), React.DOM.a({href: "#", onClick: this.handleClick}, "click me!"))); }
  • 12. DÉCRYPTAGE "Montage" du composant sur un nœud DOM réel React.renderComponent(Counter(), document.querySelector("body"));
  • 13. Un composant React n'est au final qu'une fonction idempotente pouvant décrire votre UI à un moment précis dans le temps de façon extrêment fiable
  • 15. JSX /** @jsx React.DOM */ var Counter = React.createClass({ getInitialState: function() { return {value: 0} }, handleClick: function() { this.setState({value: this.state.value + 1}); }, render: function() { return ( <div> <span>{this.state.value}</span> <a onClick={this.handleClick}>increment</a> </div> ); } }); React.renderComponent(<Counter/>, document.querySelector("body"));
  • 16.
  • 17. JSX (oui, ça fait toujours ça la première fois) ▸ JSX n'est qu'un DSL représentant le DOM ▸ nécessite une étape de compilation ▸ son utilisation est complètement optionnelle… ▸ … mais bien pratique à l'usage
  • 18. PROPRIÉTÉS IMMUTABLES var Counter = React.createClass({ getInitialState: function() { return {value: parseInt(this.props.value, 10) || 0} }, handleClick: function() { this.setState({value: this.state.value + 1}); }, render: function() { return ( <div> <span>{this.state.value}</span> <a onClick={this.handleClick}>increment</a> </div> ); } });
  • 20. COMPOSABILITÉ var MultiCounter = React.createClass({ render: function() { return ( <div> <Counter value="1" /> <Counter value="2" /> <Counter value="3" /> </div> ); } });
  • 21. COMPOSABILITÉ var MultiMultiCounter = React.createClass({ render: function() { return ( <div> <MultiCounter/> <MultiCounter/> <MultiCounter/> <Counter/> </div> ); } });
  • 22. DÉCORATEUR var Panel = React.createClass({ render: function() { return ( <div className="panel"> <h1>{this.props.title}</h1> <div className="panel-body"> {this.props.children} </div> </div>; ); } });
  • 23. DÉCORATEUR var MyPanel = React.createClass({ render: function() { return ( <Panel title="Hello World"> <p>How are you today?</p> </Panel> ); } });
  • 24. VIRTUAL DOM À chaque mise à jour des données, React : ▸ construit un nouvel arbre virtuel à partir de celles-ci ▸ fait un diff avec la précédente version de l'arbre ▸ stocke un ensemble d'opérations atomiques de modification dans une queue ▸ et traite ces opérations par lots (batch)