React.js

Comment ça marche ?

Le JSX

Un "JavaScript augmenté", pas obligatoire, mais qui permet une utilisation plus claire de React, en écrivant du HTML directement dans le code JavaScript. Example :

En Javascript React pour créer un lien on écris :

React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')
						

Et en JSX :

Hello!
						

LE JSX transforme une balise HTML en la passant comme paramètre à la fonction React.createElement

Le JSX permet un gros gain de temps quand on veut par exemple créer des balises HTML mères et filles d'un coup:

En JavaScript :

var app = React.createElement(
	nav,
	{color:"blue"},
	React.createElement(li, null, "click")
);
						

Et en JSX :

var app = ;
						

La création de Component avec React.js

On crée deux Components "CommentList" :

var CommentList = React.createClass({
  render: function() {
		var commentNodes = this.data.map(function(comment) {
      return (
        
          {comment.text}
        
      );
    });
    return (
      

      
    );
  }
});
ReactDOM.render(
  < CommentList data={data} />,
  document.getElementById('container')
);
						

Et "Comment" :

var Comment = React.createClass({
  render: function() {
    return (
      

        

          {this.props.author}
        
        {this.props.children}
      
    );
  }
});
						

En passant à notre variable data un JSON des commentaires récupérés (normalement côté serveur)

var data = [
  {id: 1, author: "le_lutin", text: "CECI EST UN COMMENTAIRE!!"},
  {id: 2, author: "abdel-malik", text: "Ceci est un lien vers de la doc"}
];
						

Les commentaires viendront se ranger en temps réel dans notre liste CommentList !

On aura donc dans notre DOM :

	

    

      le_lutin
    
      CECI EST UN COMMENTAIRE!!
  
	

    

      abdel-malik
    
      Ceci est un lien vers de la doc
  

						

Example de méthodes sur les Components :

Le cycle de vie d'un Component est divisé en 3 états :

• Mounting：A été inséré dans le vrai DOM
• Updating : Change de propriétés/valeurs
• Unmounting : A été retiré du vrai DOM

On utilise donc ces méthodes :

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

Les méthodes avec "Will" agissent avant le changement d'état du component, et celles avec "Did" agissent après.