React – Les composants

Créer un composant

Il existe 2 sortes de composant :

Composant de fonction

– plus performant

– plus concis

– pas de gestion du state

– pas de gestion du cycle de vie

composant de classe

– gestion du state

– gestion du cycle de vie

– moins performant

– plus long à écrire

index.html


<!--  Positionnement des composants  -->
<div id="app"></div>

Modèle de composant de classe


import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      
        
      
    )
  }
}

Modèle de composant de fonction


import React from 'react'

export default function App() {
  return (
    
      
    
  )
}

Jsfiddle

Publier 2 avril 2020 par Michel PIALLIER dans React - Les composants Commentaires fermés

Composant enfant à parent

HTML


<div id="container"></div>

Javascript


class Parent extends React.Component {
  render() {
   return <h1><Enfant /></h1>
  }
}

class Enfant extends React.Component {
  render() {
   return <h3>Hello World</h3>
  }
}
ReactDOM.render(
  <Parent  />,
  document.getElementById('container')
);

Jsfiddle

Publier 4 avril 2020 par sm2017 dans React - Les composants Commentaires fermés

Les props

Concepts abordés :

1 – transmission du titre par Props

2 – événement onMouseOver pour ajouter une classe au titre

HTML


<div id="root"></div>

Javascript


class App extends React.Component {
    state = { 
        titre: "Mon catalogue voiture" }
 
    render() { 
        return < MesVoitures title={this.state.titre} />; 
    } 
} 

class MesVoitures extends React.Component {
    addStyle = (e) => {
           e.target.classList.toggle('styled');
    }
   render() {
       return (
           <div>
               <h1 onMouseOver={this.addStyle}>{this.props.title}</h1>
             <Voiture marque="Ford" couleur= "noire" />
           </div>
       ); 
    } 
} 

const Voiture = (props) => {
    return (
        <div>
            <p>Marque : { props.marque }</p> <p>Couleur : { props.couleur }</p>
        </div>
    ); 
}; 

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

Jsfiddle

Publier 6 avril 2020 par sm2017 dans React - Les composants Commentaires fermés