DEV Community 👩‍💻👨‍💻

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on

Introduction à React: #2 - Mon premier composant

Avant l'existance des Framework modernes...

Image description

Lorsque je voulais repliquer ce type de composant:

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

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>
Enter fullscreen mode Exit fullscreen mode
<h1>Je suis sensé dire une phrase customisé comme: "Bon-joir!"</h1>
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

Je peux l'utiliser comme ceci;

function App() {
  return (
    <div>
      <p>Bijour</p>
      <PhraseCustom />
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

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

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>
  )
}
Enter fullscreen mode Exit fullscreen mode
function PhraseCustom(props) {
  // J'utilise la prop "message"
  // Elle sera contenue dans l'object "props"
  return <h1>Ma phrase test: {props.message}</h1>
}
Enter fullscreen mode Exit fullscreen mode

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

La difference de rendu est que:

return <p>1+1</p>
Enter fullscreen mode Exit fullscreen mode

va litteralement afficher 1+1
Et que:

return <p>{1+1}</p>
Enter fullscreen mode Exit fullscreen mode

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

Image description

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!