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
59
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
1.1k
Reactive Programming et React
fdecampredon
3
170
Going Reactive with React
fdecampredon
1
540
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Optimizing for Happiness
mojombo
379
70k
Making Projects Easy
brettharned
120
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Thoughts on Productivity
jonyablonski
70
4.9k
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 ?