Introduction à React: #2 - Mon premier 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:



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





`````html
<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



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



Je peux l'utiliser comme ceci;



```jsx
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uys79km6t7ap2gw3gs81.png)

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.



```jsx
function App() {

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





```jsx
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:


```jsx
return <p>1+1</p>
```


va litteralement afficher `1+1`
Et que:


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rss7jk1mwpeukbby2kyh.png)