React JS

Présentation

Développeur web freelance depuis 5 ans
http://www.boxydev.com
Expérience en agence web, E-Commerce (annonceur)
Formation Informatique et Autodidacte
Formateur et fan des OSS, contributeur à mes heures perdues
Solutions phares : Wordpress, Symfony, Magento, Prestashop, Angular, Vue JS, React JS
Langages : PHP, MySQL, HTML, CSS, JS
Outils : Git, Docker, Vagrant, Trello
Stack: ArchLinux, Gentoo, Mac OS (Unix addict)

Qu'est-ce que React JS ?

Framework JavaScript permettant de créer facilement des SPA (Single Page Application) ou des applications web réactives !

React est comparable à Vue JS mais n'est qu'une partie d'Angular. React JS ressemble un peu à Angular JS.

Caractéristiques de React JS

Fonctionnement très simple
Peut s'intégrer dans un site web existant
Performant
Peut devenir aussi puissant qu'Angular si on intègre bien l'écosystème
Crée par Facebook en 2013

Utilisation

React utilise la syntaxe JSX pour générer le DOM
React assume de mélanger le HTML et le JS

let name = 'Fiorella';

const sayHello = () => {
  alert(name + ' vous dit bonjour également.');
}

ReactDOM.render(
  <h1 onClick={sayHello}>Bonjour {name} !</h1>,
  document.getElementById('root')
);

Composants

React JS nous permet de créer des composants
Chaque composant est autonome
Très forte réutilisabilité

const Hello = ({ name }) => {
  const sayHello = () => {
    alert(name + ' vous dit bonjour également.');
  }


  return (
    <h1 onClick={sayHello}>Bonjour {name} !</h1>
  );
}

ReactDOM.render(
  <div>
    <Hello name="Matthieu" />
    <Hello name="Fiorella" />
  </div>,
  document.getElementById('app')
);

React Native

Permet de construire une application mobile native avec React JS
https://facebook.github.io/react-native/

Comment démarrer ?

Quelques jours de formation
NodeJS et NPM
ES6/ES2015

NodeJS et NPM

NodeJS est une plateforme basée sur le moteur V8 JavaScript.
Permet d'écrire du JavaScript côté serveur au même titre que PHP, Ruby, etc...
Concept de séparation du code en module
Conséquence : NPM -> Gestionnaire de paquet/modules pour Node

Nouveautés ES6

let au lieu de var (éviter le "hoisting")
const pour les constantes
objet avec clé et valeur identique
Affectation déstructurées ({name, age} = {name: "Matthieu", age: 25})
Rest Operator ... (Arguments infinis)
for...of : Valeur et non index
Les classes
Promise
Arrow functions