Zoom

class App extends React.Component {

state = {
   titre: "Mon catalogue voiture"
  }
  
changeTitle = (ev) => {
  this.setState({
    titre:'Mon nouveau titre'
  })
}
 
 
changeViaParam = (param) => {
  this.setState({
    titre: param
  })
} 

changeViaBind = (param2) => {
  this.setState({
    titre: param2
  })
} 

changeViaInput = (event) => {
  this.setState({
    titre: event.target.value
  })
} 
  
  render() {
     
    return (
        <div>
            < MesVoitures  title={this.state.titre} />
            <button onClick ={this.changeTitle}>Titre en dur</button><br/>
            <button onClick ={() => this.changeViaParam("Via paramètre")}>Via param</button><br/>
            <button onClick ={this.changeViaBind.bind(this, "Via bind")}>Via Bind</button>
            <input type="text" onChange={this.changeViaInput} value={this.state.titre} />
        </div>
    );
  }
}

class MesVoitures extends React.Component {

addStyle = (e) => {
  
e.target.classList.toggle('styled');
}

state  = {
     cars: [
          {brand: "Ford", color: "noire"},
          {brand: "Peugeot", color: "rouge"}
          
         ]
         
  }

  render() {
      return (
          <div>
              <h1 onMouseOver={this.addStyle}>{this.props.title}</h1>
              <Voiture marque={this.state.cars[0].brand} couleur={this.state.cars[0].color} /> 
              <Voiture marque={this.state.cars[1].brand} couleur={this.state.cars[1].color} /> 
              
              {
                  this.state.cars.map(vehicule =>{
                      return(
                          <Voiture marque={vehicule.brand} couleur={vehicule.color} /> 
                      )            
                  })
              }
          </div>
    );
  }
}

const Voiture = (props) => {


  return (
    <div className="voiture">
      <p>Marque  : { props.marque }</p>
      <p>Couleur : { props.couleur }</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Zoom

Testez vos propres exemples sous Jsfiddle. Cliquez ici

JSX est une extension de la syntaxe JavaScript qui permet d’écrire du code sous forme de balises directement dans du JavaScript.

Par exemple avec JSX nous pouvons écrire :

var element = <div id="main-element"class="title">Hello, world!</div>;

Ce code doit être transformé en JavaScript pour pouvoir être compréhensible par un navigateur.

L’exemple précédent devra être transformé comme suit :

var element = React.createElement(
  "div",
  {id: "main-element", className: "title"},
  "Hello, world!"
)

Il est tout à fait possible d’écrire directement ce code.

On peut aussi utiliser Babel qui est un compilateur JavaScript qui a pour rôle de transformer du code JavaScript " moderne " (ES6, ReactJs ou autre) en une version compréhensible par tous les navigateurs.

L’attribut HTML class s’écrit className en JSX, cela vient du fait que le mot class est protégé en Javascript.

<!--  Chargement de React et de ReactDOM  -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--  Chargement de Babel  -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<!--  Positionnement de l'élément à ajouter  -->
<div id="app"></div>
 

Zoom

Testez vos propres exemples sous Jsfiddle. Cliquez ici