Introduction à ReactJS

Presentation du talk d'introduction à ReactJS pour #MarseilleJS 4

Transcript

1. Introduction à ReactJS @fdecampredon MarseilleJS - 23/09/2015
2. 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
3. React c’est … Un framework orienté « Components » Un contrat pour définir des composants Composition au centre du développement
4. Les Composants Props: Composant input render: input => html « monte » le composant sur la page
5. 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 ….
6. Gestion des Events • « Behind the scene » • Event delegation • SyntheticEvent
7. Composants « StateFull » État initial Mise à Jour Utilisation de l’état
8. Composition App SearchBar CategoryProductRow ProductRow ProductTable ProductTable
9. 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 !
10. 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
11. React vs …. • Simple et coherent ! • Fonctionnement simple et compréhensible • Full power of Javascript Simple != Familier
12. Pourquoi React ? • Simplicité • Composition <3 • « Momentum » • Productivité • etc …
13. Ce n’est que le début ! • MVC • Mutation • CSS • REST => Flux => Immutability => Inline Styles => GraphQL
14. François de Campredon Fadio IT http://www.fadio.it @fdecampredon https://github.com/fdecampredon/ Questions ?