Introduction à ReactJS

Slide 1

Slide 1 text

Introduction à ReactJS @fdecampredon MarseilleJS - 23/09/2015

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

React c’est … Un framework orienté « Components » Un contrat pour déﬁnir des composants Composition au centre du développement

Slide 4

Slide 4 text

Les Composants Props: Composant input render: input => html « monte » le composant sur la page

Slide 5

Slide 5 text

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 ….

Slide 6

Slide 6 text

Gestion des Events • « Behind the scene » • Event delegation • SyntheticEvent

Slide 7

Slide 7 text

Composants « StateFull » État initial Mise à Jour Utilisation de l’état

Slide 8

Slide 8 text

Composition App SearchBar CategoryProductRow ProductRow ProductTable ProductTable

Slide 9

Slide 9 text

Virtual DOM • On crée une « lightweight » représentation de L’UI • Diﬀ avec l’ancienne • Calcule le minimum d’opérations à appliquer au DOM On Rerender tout !

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

React vs …. • Simple et coherent ! • Fonctionnement simple et compréhensible • Full power of Javascript Simple != Familier

Slide 12

Slide 12 text

Pourquoi React ? • Simplicité • Composition <3 • « Momentum » • Productivité • etc …

Slide 13

Slide 13 text

Ce n’est que le début ! • MVC • Mutation • CSS • REST => Flux => Immutability => Inline Styles => GraphQL

Slide 14

Slide 14 text

François de Campredon Fadio IT http://www.fadio.it @fdecampredon https://github.com/fdecampredon/ Questions ?