Introduction à React chez Leboncoin

Salut la compagnie,

Dans le cadre de la saison 2018/2019 nous avons décidé de vous donner encore plus que l'année dernière. Plus de tutos, plus d'articles, plus d'ateliers mais jamais assez d'apéros !

Pour relancer la machine nous vous proposons le Mardi 23 Octobre un atelier React chez nos amis du bon coin (https://www.leboncoin.fr/).

Notre amphitryon du soir :
Inutile de les présenter leboncoin (https://www.leboncoin.fr/) est juste le premier site de petites annonces en France, la team est top et elle nous accueille dans ses locaux pour la rentrée.

React --help
React (https://reactjs.org/) est une librairie Javascript, créée au début par et pour Facebook, qui permet d'écrire très rapidement des applis web.

https://media.giphy.com/media/awxqzKhiUV4ly/giphy.gif

Au programme
Créer des interfaces utilisateur Web n'est pas facile :

Faut-il utiliser un moteur de template ou manipuler le DOM directement ?
Pour l'interactivité, dois-je utiliser des events ? callbacks ? delegate ?
Comment garder le tout synchronisé avec l'état de mon application, les données que j'ai chargées, les données entrées par l'utilisateur ?
Pourquoi mon archi MVC part toujours en saucisse ?

Si vous ne vous êtes jamais posé ces questions, deux possibilités:

1. Vous vous les poserez un jour
2. Vous connaissez déjà React

Lancé par Facebook en 2013, React propose une réponse simple à tous ces problèmes, sous forme de 2 innovations:

• Le language JSX, mélange heureux de Javascript et d'HTML
• Le pattern Unidirectional Data Flow, qui clarifie les interactions et augmente la "réusabilité"

Lors de cet atelier d'initiation, nous balaierons ces sujets en créant une application React (https://reactjs.org/) de zéro.
L'objectif pour vous est qu'à l'issue de cet atelier, vous soyez capable de démarrer un projet et de progresser en autonomie.

https://www.silexlabs.org/wp-content/uploads/2018/09/DnsqCBUXoAAc07Q.jpg

Pré-requis
Connaitre un peu HTML et Javascript (les bases), de préférence ES6+
Soit

• (préféré) Un ordinateur avec un éditeur de code (https://code.visualstudio.com/) + Node/NPM (https://nodejs.org/en/)
• (moins bien) Un ordinateur
• Uniquement un système nerveux central, mais c'est quand même dommage de ne pas écrire de code

Animateur

https://www.silexlabs.org/wp-content/uploads/2018/09/clemos-687x609.png

On ne présente plus Clément Charmet (https://github.com/clemos), argonaute de l'opensource, défenseur du libre il est aussi lead développeur chez Revevol.