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
Docker and Python
trallard
44
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Music & Morning Musume
bryan
46
6.3k
Building an army of robots
kneath
302
45k
Code Reviewing Like a Champion
maltzj
521
39k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Become a Pro
speakerdeck
PRO
26
5.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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 ?