C'est quoi React JS ?

ReactJS, c'est un framework JS, pour bâtir des interfaces cools et modulaires.

Pour ceux qui connaissent AngularJS, EmberJS, c'est le même but, mais en fait c'est mieux.

Pourquoi mieux ? T'es payé par Facebook pour dire ça ?

La grande force de React, c'est le DOM virtuel.

React maintient en permanence une copie rapide du DOM, fait toutes ses mises à jour en fond, et ne met à jour le DOM qu'au besoin.

L'intérêt ? Un gain en performance, et surtout un découplage de la logique composants du DOM, ce qui pousse à des trucs coolos genre React Native <3

Pourquoi tu nous parles de modulaire ?

ReactJS a une approche composant. Un composant, c'est une pièce du puzzle qui crée l'interface utilisateur.

Faire du React, c'est faire des composants, qu'on interconnecte entre eux.

Un peu comme faire un programme en Java, tu écris des classes qui fonctionnent ensemble.

Qu'est-ce que tu entends par "Composant" ?

Un composant React, c'est :

• Une mécanique interne écrite en JS
• Un résultat sous forme de HTML, écrit grâce au JSX
• Un style associé, sous forme de CSS

JSX ? C'est une insulte ?

Le JSX, c'est un mélange de JS et de HTML. C'est employé par React pour écrire le rendu HTML des composants.

                        
const name = 'Lopez Joe';
return (
    

        {name.capitalize()}
    
);
                            
                        

donnera

                            

    LOPEZ JOE

                            
                        

Comment ça marche ?

Une appli en React, c'est une arborescence de composants

                            
<Parent>
    <ListeDeTrucs />
    <ChampDeSaisie />
    <CentreDeNotifs />
</Parent>

                            
                        

On code comment un composant ?

Un composant React, ça ressemble à ça :

                            
const MyComponent = React.createClass({
    mixins: [firstMixin, secondMixin],
    _privateMethod() {
        // Some fancy stuff
    },
    publicMethod() {
        // Even fancier stuff
    },
    render() {
        const {name} = this.props;
        return (
            

                
My content
                
My name is {name}
            
        );
    }
});
                            
                        

Mixins ? Encore un nouvel outil de Focus ?

Que nenni ! Un mixin, c'est un bout de composant partagé entre plusieurs.

C'est juste un objet JS, dont le composant va hériter pour l'intégrer à son prototype.

Encore mieux : L'encapsulation de composants

Une arborescence de composants pour une meilleure flexibilité

Et ils se parlent comment tes composants ?

Avec les props !

                            
const Parent = React.createClass({
    render() {
        return <Child myProp='coucou'/>;
    }
});

const Child = React.createClass({
    render() {
        return 
{this.props.myProp}, ça va ?
    }
});
// Ce qui renvoie 
coucou, ça va ?
                            
                        

Cool n'est-ce pas ?

Mais quid des valeurs qui bougent ?

Pour les valeurs que l'on veut faire varier, on utilise le state !

                            
const Counter = React.createClass({
    getInitialState() {
        return {count: 0};
    },
    componentDidMount() {
        setInterval(() => {
            const {count} = this.state;
            this.setState({count: count + 1});
        }, 1000);
    },
    render() {
        return (
            <div>
                The count is now {this.state.count}.
            </div>
        );
    }
});
                            
                        

On recapitule !

• Les composants constituent un arbre hiérarchique, avec des parents et des enfants
• Les composants se passent des valeurs entre enfants et parents à travers les props
• L'état de l'interface à un instant t (le contenu d'un champ de saisie, les données récupérées depuis le serveur, ...) est porté par le state

Ca roule ma poule.

Pourquoi on met pas tout dans le state alors ?

Excellente question, j'attendais qu'on me la pose.

Le danger du state, c'est qu'on peut le changer à tout moment. Même quand on veut pas. Surtout quand on veut pas.

Ok mais je choisis comment du coup ?

C'est très simple ! (en vrai pas tant.)

• Toute donnée fournie à un composant, dont il n'est pas responsable, est portée par ses props.
• Le state n'est employé que pour refléter l'état d'un composant dans son interaction avec l'utilisateur.
• Par exemple, un composant de liste donne les données à ses enfants par des props, mais les enfants ne doivent pas modifier ces données. Ils n'en sont pas responsables.
• Au contraire, un composant avec un champ de saisie est responsable de la valeur du champ, et doit la porter dans son state.

Petit récapitulatif

• Avec des mixins, et un cycle de vie ==> React.CreateClass
• Sans mixins mais avec un cycle de vie ==> class ... extends Component
• Sans mixins et sans cylce de vie ==> Pures Fonctions

React.createClass

Pour les mixins !!!

                            
const Hello = React.createClass({
  mixins: [firstMixin, secondMixin],
  getInitialState() {
    return {
      hello: "world"
    };
  },
  componentWillReceiveProps(nextProps){
	console.log(this.props); 
	console.log(nextProps);
  },
  handleInputChange({target: {value}) {
    this.setState({
      hello: value
    });
  },
  render() {
    const {hello} = this.state;
    return (
      <div>
        <input value={hello} onChange={this.handleInputChange} />
        <div>hello {hello}</div>
      </div>
    );
  }
});
                            
                        

Class ES6

extends Component (voir le PureComponent)

                            
class TodoItem extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      editing: false
    };
  }

  handleDoubleClick() {
    this.setState({ editing: true });
  }
  render (){
    const {editing} = this.state;
    return (
	<div>Ouuuuuuuah un composant qui a un état : {editing}</div>
    )
  }
}
                            
                        

StateLess Component

Avec eux, il ne faut pas hésiter !

                            
const Personne = () => {
    return (
      <Profile nom={'Silvio'} bio={'BlaBlaBlaBlaBlaBlaBla'}/>
    )
};					
							
const Profile = ({nom, bio}) => {
    return (
      <div>
          {nom}
          
{bio}
      </div>

    )
};
  
Profile.defaultProps= {
    nom:'Amélie', 
    bio: 'Focus'
}
  
Profile.propTypes= {
    nom: PropTypes.string, 
    bio: PropTypes.string.isRequired
}
                            
                        

C'est le jour de Nöel !

Des liens utiles

• Les PropTypes
• Les attributs et Tags HTML

Le cycle de vie d'un composant

Trop cools, on est chauds comme des baraques à frites, on passe à la pratique ?

C'est tipar !

On va se faire une p'tite todo list !

Vla l'appli de ouf, j'en peux plus d'attendre de savoir comment la faire, c'est trop utile en plus, purée ils sont trop forts j'adore ces gens.

Nous aussi on vous adore

On veut obtenir quoi ?

• Une appli écrite en React pur (Captain Obvious)
• Avoir une liste de trucs à faire
• Pouvoir ajouter des trucs à faire
• Pouvoir supprimer des trucs à faire
• Pouvoir filtrer par trucs à faire faits ou pas faits

Tout ça en quelques dizaines de minutes ? Tu nous prends pour des jambons ?

Du calme mes doux agneaux, tout va bien se passer.

On y va !