Les Fondamentaux de React : JSX, Composants et Props

Salut à tous !

Comme promis, cette semaine, je plonge dans les bases de React. Pour bien comprendre cette bibliothèque, il faut d’abord se familiariser avec trois concepts essentiels : JSX, les composants et les props. Ces éléments forment le socle de toute application React et permettent de structurer son code de manière efficace.

JSX : Un HTML dans du JavaScript ?

La première chose qui m’a marqué en React, c’est JSX (JavaScript XML). Il permet d’écrire du HTML directement dans du JavaScript, ce qui rend la syntaxe bien plus intuitive. En réalité, ce n’est pas du HTML mais une extension syntaxique qui sera ensuite transformée en appels JavaScript.

const element = <h1>Salut, React !</h1>;

Au début, ça peut sembler étrange, mais très vite, on se rend compte que JSX facilite la lecture et l’organisation du code. Il est également sécurisé car React échappe automatiquement toutes les valeurs insérées dans JSX pour éviter les attaques XSS.

Composants : La Base

En React, tout tourne autour des composants. Un composant est une fonction ou une classe qui retourne du JSX. Ils permettent de découper l’interface en petits blocs réutilisables.

function Welcome(props) {
  return <h1>Bonjour, {props.name} !</h1>;
}

Avec ce simple composant Welcome, je peux afficher différents messages en changeant les propriétés aussi appeler props.

Props : Passer des données aux Composants

Les props (propriétés) permettent de passer des informations d’un composant parent à un composant enfant. C’est un peu comme les paramètres d’une fonction.

<Welcome name="Youssef" />

Ce concept est très puissant car il rend les composants dynamiques et réutilisables à volonté.

Ce que j’en retiens

• JSX simplifie l’écriture du code, même si ça peut surprendre au début.
• Les composants sont au cœur de React et permettent une approche modulaire.
• Les props facilitent la communication entre les composants.

J'espère que cet article t'a plu et on se dit à la semaine prochaine.

Sources

• React Functional Components, Props, and JSX – React.js Tutorial for Beginners
• Components and Props - React
• Maîtriser le JSX en 120 SECONDES - React JSX - YouTube