JSX

HTML:n kaltainen syntaksi

JavaScriptiä, jossa:

• <>-merkkien sisälle JSX:ää, jossa:

  • {}-merkkien sisälle JavaScriptiä, jossa:

    • <>-merkkien sisälle JSX:ää, jne.

<div>
  <div>Materiaali: {materiaali}</div>
  <button disabled onClick={this.handleClick}>Tallenna</button>
</div>

JSX kääntyy React.createElement-funktiokutsuiksi

React.createElement(
  "div",
  null,
  React.createElement(
    "div",
    null,
    "Materiaali: ",
    materiaali
  ),
  React.createElement(
    "button",
    { disabled: true, onClick: this.handleClick },
    "Tallenna"
  )
);

Isolla kirjaimella alkavat elementit ovat React-komponentteja, pienellä kirjaimella alkavat elementit ovat HTML-elementtejä

• Komponentti palauttaa HTML-elementtejä tai toisia komponentteja, jotka lopulta palauttavat HTML-elementtejä

• Lista elementtejä voidaan palauttaa tyhjin tageihin (<>...</>) ympäröitynä

  • Myös taulukon palautus on mahdollista

render() {
  return <>
    <h1>Tiedot</h1>
    <Puutavara tyyppi="lauta" materiaali="mänty" />
  </>;
}