Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction à ReactJS
Search
fdecampredon
September 23, 2015
0
56
Introduction à ReactJS
Presentation du talk d'introduction à ReactJS pour #MarseilleJS 4
fdecampredon
September 23, 2015
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
960
Reactive Programming et React
fdecampredon
3
140
Going Reactive with React
fdecampredon
1
500
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Embracing the Ebb and Flow
colly
84
4.6k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Visualization
eitanlees
146
15k
Thoughts on Productivity
jonyablonski
69
4.5k
GitHub's CSS Performance
jonrohan
1030
460k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building Adaptive Systems
keathley
40
2.4k
Transcript
Introduction à ReactJS @fdecampredon MarseilleJS - 23/09/2015
React c’est … Une library de virtual dom Le «
V » de « MVC » Une library inspirée du Functional Programming Un framework horrible ou on mixe HTML et JS Des immutable data structures
React c’est … Un framework orienté « Components » Un
contrat pour définir des composants Composition au centre du développement
Les Composants Props: Composant input render: input => html «
monte » le composant sur la page
Le JSX • Optionnel • Syntactic sugar • Equivalent «
function call » : • Tout de même plus lisible • Le js c’est quand même plus puissant que des templates ….
Gestion des Events • « Behind the scene » •
Event delegation • SyntheticEvent
Composants « StateFull » État initial Mise à Jour Utilisation
de l’état
Composition App SearchBar CategoryProductRow ProductRow ProductTable ProductTable
Virtual DOM • On crée une « lightweight » représentation
de L’UI • Diff avec l’ancienne • Calcule le minimum d’opérations à appliquer au DOM On Rerender tout !
React vs … Est-ce que c’est vraiment Découplé ? Pas
tellement …. Est-ce que c’est Simple ? Qu’est ce qui arrive quand je click … ? Separation of concern
React vs …. • Simple et coherent ! • Fonctionnement
simple et compréhensible • Full power of Javascript Simple != Familier
Pourquoi React ? • Simplicité • Composition <3 • «
Momentum » • Productivité • etc …
Ce n’est que le début ! • MVC • Mutation
• CSS • REST => Flux => Immutability => Inline Styles => GraphQL
François de Campredon Fadio IT http://www.fadio.it @fdecampredon https://github.com/fdecampredon/ Questions ?