React

en tant que moteur de template

//ActButton.js
const ActButton = ({label}) => {
  return (
    <div className="ActButton">
      <div className="ActButton__LeftButton">
        Agir
      </div>       
      <div className="ActButton__RightButton">
        <img src="plume.svg" />
        {label}
      </div>     
   </div>   );
};

export default ActButton;

//scripts.js
document.querySelector('.ActButton').addEventListener('click', e => {
  //Do stuff
});

Utiliser React comme moteur de template c’est comme aller au McDonalds pour prendre une salade. 

-- Albert Einstein

Javascript universel

pour un site web ?

import React, {PropTypes} from 'react';
import Svg from 'react-inlinesvg';
const styles = require('./ActButton.scss');

const ActButton = ({action, label}) => {
  return (
    <div onClick={action} className={styles.ActButton}>
      <div className={styles.LeftButton}>
        Agir
      </div>       
      <div className={styles.RightButton}>
        <Svg src={`/assets/images/plume.svg`} />         
        {label}
      </div>     
    </div>   
  );
};

ActButton.propTypes = {
  action: PropTypes.func.isRequired,
  label: PropTypes.string,
};


export default ActButton;


//Dans le parent

this._onActButtonClick = (e) => {
  //Do stuff
}

<ActButton
  label="Click me"
  onClick={this._onActButtonClick}
/>

Routing

React-router

Charger les

bonnes données

Old school way

New way

Déshydratation Réhydratation

Require

côté server

webpack-isomorphic-tools

Avantages ?

Inconvénients ?

Questions ?