소개 à React: #2 - Mon 프리미어 컴포저트

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 selected 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 proposal une conception qui va résoudre instant' ce probleme.

구성 해제

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 선언 est celle d'une fonction et puis elle remplit le meme role qu'une fonction normale: La réutilisation.

르 JSX, 운 프 플러스 퀘 뒤 JS

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



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는 ressemblerait à ceci를 선택했습니다.

함수 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.

레 소품,

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 mustaches {} en JSX은 "Interprete moica"를 의미합니다.

La difference de rendu est que:

return <p>1+1</p>

VA 리터럴먼트 어피처1+1기타:

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

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