React Concepts de base- Components, Props, State

1. Components

Components sont React des blocs de construction indépendants qui peuvent être réutilisés. Ils sont divisés en éléments d'interface utilisateur plus petits et peuvent être combinés pour former des fichiers components. Par exemple, une application peut avoir components comme Header, Sidebar et Content. Chaque composant a ses propres responsabilités et peut recevoir props et state afficher les données correspondantes.

Exemple:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props in React sont des valeurs transmises components de l'extérieur. Ils aident à transmettre les données du parent components à l'enfant components. Props sont en lecture seule et ne peuvent pas être modifiés à l'intérieur du composant. Pour utiliser props, nous transmettons des valeurs aux attributs du composant et les utilisons dans la partie UI.

Exemple:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React sont des données modifiables qui peuvent être modifiées dans un composant. Chaque composant peut avoir le sien state pour stocker et gérer les données dynamiques. Lorsque le state change, React met automatiquement à jour l'interface utilisateur correspondante. State est géré uniquement en classe components et est initialisé dans le constructeur du composant. Pour mettre à jour le state, nous utilisons la State méthode `set()`.

Exemple:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}