Introduction à React: #2 - Mon premier composant

Avant l'existance des Framework modernes...

Lorsque je voulais repliquer ce type de composant:

<h1>Je suis sensé dire une phrase customisé comme: "Bonjour!"</h1>

Je devais reecrire pratiquement la meme chose ailleurs, en gros c'est comme si je codais en un langage sans fonctions ou méthodes:

<h1>Je suis sensé dire une phrase customisé comme: "Bonsoir!"</h1>

<h1>Je suis sensé dire une phrase customisé comme: "Bon-joir!"</h1>

C'est pas ouf...

Les frameworks modernes, dont React proposent une conception qui va résoudre instant' ce probleme.

Un composant

function PhraseCustom() {
  return <h1>Ma phrase test: "Bon-joir!"</h1>
}

Je peux l'utiliser comme ceci;

function App() {
  return (
    <div>
      <p>Bijour</p>
      <PhraseCustom />
    </div>
  )
}

C'est tout con, un composant c'est une fonction. Une fonction que l'on va instancier d'une maniere bizarre certe, mais la declaration est celle d'une fonction et puis elle remplit le meme role qu'une fonction normale: La réutilisation.

Le JSX, un peu plus que du JS

Comme tu peux t'en douter, cette syntaxe ne fonctionnera pas si tu la mets dans la console de ton navigateur:

Le JSX, qui signifie JavaScript XML est une sorte d'écriture inventée par l'équipe qui a fait React chez Facebook à l'époque et qui permet de faire du balisage.
En gros, la syntaxe(horrible) qui permeterait de faire la meme chose ressemblerait à ceci:

function PhraseCustom() {
return React.createElement('h1', {}, Ma phrase test: "Bon-joir!")
}

Ce qu'on écrit en XML sera remplacer par un truc qui s'inspire de ce que je viens de montrer.

Les props,

Bon c'est cool, je peux réutiliser mon composant, mais si je le réutilise un composant, mais j'ai bien envie d'y mettre des trucs differents en fait, sinon ca n'a pas grand interet.

function App() {

  return (
    // Je passe une prop "message" 
    // Dont la valeure est 'Hey hey!'
    <div>
      <PhraseCustom message='Hey hey!' />
    </div>
  )
}

function PhraseCustom(props) {
  // J'utilise la prop "message"
  // Elle sera contenue dans l'object "props"
  return <h1>Ma phrase test: {props.message}</h1>
}

Note que les moustaches {} en JSX signifie "Interprete moi ca"

La difference de rendu est que:

return <p>1+1</p>

va litteralement afficher 1+1
Et que:

return <p>{1+1}</p>

Va tenter d'interpreter ce qu'il y a entre les moustaches.