Un peu d'histoire...

· 1995 :

· 2008 :

· 2009 :

· 2013 :

Pourquoi choisir

React JS ?

I. Portrait robot
de React JS

( origine, généralités, principes-clefs )

Fiche signalétique (1)

· Concepteur : Jordan Walke ( ingénieur Facebook, fin 2011 )

· Collaborateur : Pete Hunt ( ingénieur Instagram )

· Publication : 29 mai 2013 ( sous licence Apache 2.0 )

· React “Native” : mars 2015 ( sous iOS, Android, UWP )

· Dernière version : 15.4.2 ( 6 janvier 2017 )

· Site web : reactjs.com ( https://facebook.github.io/react/ )

Fiche signalétique (2)

· Définition : bibliothèque JS ( ≠ framework, ≠ template )

· Principe : « Declarative, component-based, flexible »

· Finalité : créer des applications web monopage
                 orienté UI / génère une vue réactive (modèle MVC)
                         s'appuie sur un DOM virtuel

· Inspiré de : XHP ( librairie* pour inclusions d'HTML dans PHP )

· Particularité : JSX ( langage* : hybridation JS HTML )

Ils utilisent React...

II. Fonctionnement
de React JS

( implementation, syntaxe, logiques... )

Implementation (1)

· CDN ( content delivery network )

https://facebook.github.io/react/docs/installation.html

· Packages

OU

Implementation (2)

· JSX : package “Babel”

http://babeljs.io/

· Attention :

les autres implémentations
comme JSXTransformer.js
sont aujourd'hui deprecated !

<script type="text/babel"></script>

Débuts...

<div id="out"></div>


ReactDOM.render(
  <h1>Bienvenue dans React !</h1>,
  document.getElementById('out')
);

• HTML :

• JS(X) :

La base : ReactDOM.render(contenu, position);

Création de composant

var monComposant = React.createClass({     
     render : function(){
          return(
               <h1>Bienvenue dans React !</h1>
          );
     }
});

ReactDOM.render(
     <monComposant/>,
     document.getElementById('out')
);

React.createElement /.createClass / .Component

class monComposant extends React.Component{
     render(){   [...]

function monComposant (props){
     return   [...]

var monComposant = React.createClass({
     render : function(){
          return(<div>
                       <h1>React v{this.props.version}</h1>
                       <h2>Bienvenue {this.props.prenom} !</h2>

                 </div>
          );
     }
});

ReactDOM.render(
     <div className="accueil">
          <monComposant prenom="Ulrich" version={15}/>
          <monComposant prenom="Vincent" version={14}/>
     </div>,

     document.getElementById('out')
);

props

...

var {version,prenom}=this.props;
[...] <h1>React v{version}</h1>

var monComposant = React.createClass({
     render : function(){
          return(<div>
                       <h1>React v{this.props.version}</h1>
                       <h2>Bienvenue {this.props.children} !</h2>

                 </div>
          );
     }
});

ReactDOM.render(
     <div className="accueil">
          <monComposant version={15}>Ulrich</>
          <monComposant version={14}>Vincent</>
     </div>,

     document.getElementById('out')
);

children

...

var monComposant = React.createClass({
     saluer : function(){
          alert("Bienvenue {this.props.prenom} !")
     },
     render : function(){
          return(<div onClick={this.saluer}>
                       <h1>React v{this.props.version}</h1>

                 </div>
          );
     }
});

ReactDOM.render(
     <div>
          <monComposant prenom="Ulrich" version="15"/>
     </div>,

     document.getElementById('out')
);

événement

...

var monComposant = React.createClass({

     getInitialState: function(){

          return {accueil:true}

     },

     changer: function(){

          this.setState({accueil:!this.state.accueil})

     },

     render : function(){

          var msg;

          if(this.state.accueil){
                 msg="Bienvenue"
          }else{
                 msg="À bientôt"
          }
          return(
                 <div onClick={this.changer}>
                       <h2>{msg} {this.props.prenom} !</h2>
                 </div>
          );
     }
});          [...]

state / getInitialState / setState

...

constructor(props){
     super(props); 
     this.state={...} [...]

Et après ...?

• agir sur le style :

"... style={...}"

• state tableau :

"... {prenom:['Ulrich', 'Vincent', ...]}"

EX: "[...] this.state.prenom.map(function(texte,i)){
                  return(<p key={i}>Hello {texte}<p/>)
            }"

• composants parent > enfant

• render différent selon le state

...

index={i} 
     

III. Pourquoi
utiliser React JS ?

( avantages / inconvénients )

En synthèse (1)

· ne gère que la vue
· pas de cloisonnement net entre html et JS
· n'a pas la puissance d'un framework (mais combinable !)

· très souple et flexible (base composant)

· modification de page instantanée

· facilement intégrable à des projets déjà créés

· techno en pleine effervescence...

Bienvenue dans
la galaxie React !

...

Sources :

• articles wikipedia (FR & ENG)

• site officiel : facebook.github.io/react/ (ENG)

• code.facebook.com/projects/ (ENG)

• tutoriels youtube : Bucky Roberts / thenewboston (ENG)

• avis d'utilisateurs