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

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

Apprendre à apprendre

React JS

By Matthieu Mota

Made with Slides.com

React JS

  • 765

More from Matthieu Mota