Úvod do Reactu

Vkládání hodnot do JSX

Velmi často budeme potřebovat do obsahu stránky zakomponovat také hodnoty uložené v různých proměnných. Připomeňme si, jak bychom vložili do našeho HTML obsah proměnné ještě před reactovými časy.

const nazev = 'Moje stránka';
const obsah = `<h1 class="title">${nazev}</h1>`;

JSX funguje velmi podobně, nepoužívá ale symbol dolaru. V Reactu budeme psát následující:

const nazev = 'Moje stránka';
const obsah = <h1 className="title">{nazev}</h1>;

Když sestavujeme řetězec, můžeme si obsah proměnné vložit kam chceme. JSX je však přísnější a takto velkou svobodu nemáme. Složené závorky můžeme použít pouze pro obsah elementu nebo pro hodnotu atributu. Následující kód je tedy v pořádku.

const nazev = 'Moje stránka';
const trida = 'title';
const obsah = <h1 className={trida}>{nazev}</h1>;

Nemůžeme však udělat například toto:

const nazev = 'Moje stránka';
const trida = 'title';
const znacka = 'h1';
const obsah = <{znacka} className={trida}>{nazev}</{znacka}>;

S těmito znalostmi můžeme naši výslednou stránku sestavit třeba takto.

import React from 'react';
import { createRoot } from 'react-dom/client';

const title = 'React Starter';
const content = 'Moje první React stránka';
const author = 'Martin Podloucký';

const appContent = (
  <>
    <header>
      <h1>{title}</h1>
    </header>
    <main>
      <p>{content}</p>
    </main>
    <footer>{author}</footer>
  </>
);

createRoot(document.querySelector('#app')).render(appContent);