Ukázkové React kartičky z naší aplikace

Stáhněte si naši aplikaci z App Store nebo Google Play a získejte více zdarma fishek nebo se přihlaste k odběru pro přístup ke všem fishek.

Co je JSX a proč ho React používá?

JSX je rozšíření syntaxe pro JavaScript, které umožňuje psát HTML struktury přímo v kódu JavaScript. Je to jeden z základních prvků, na kterých je postaven React.js. Proto je JSX v ekosystému React tak důležité.

React využívá JSX z několika důvodů:

1. Čistota kódu: JSX zjednodušuje proces vývoje kódu, umožňuje vývojářům umístit HTML struktury přímo do JavaScriptu. Bez JSX by byla tvorba uživatelských rozhraní v Reactu výrazně komplikovanější.

2. Snadnost použití: JSX dělá z JavaScriptu podobný jazyk HTML, což ho činí snazší k použití pro vývojáře, zejména ty, kteří jsou již obeznámeni s HTML.

3. Bezpečnost: JSX automaticky chrání kód proti všem druhům útoků, jako je XSS (Cross-Site Scripting), prostřednictvím jedinečného vkládání elementů.

4. Výkon: JSX kód je optimalizován pro výkon. Překládá se do syntaxe JavaScriptu, kterou webové prohlížeče rychleji interpretují.

Technicky vzato, JSX je nic víc než syntaktický cukr pro funkci `React.createElement(component, props, ...children)`.

Co je virtuální DOM a jaké má výhody?

Virtuální DOM, nebo virtuální model Dokumentového objektového modelu (DOM), je koncept používaný v některých knihovnách JavaScriptu, jako je React. Je to lehká kopie skutečného DOM, která je uchovávána v paměti a aktualizuje se nezávisle na skutečném DOM.

Hlavní výhody Virtuálního DOM jsou:

1. Aktualizace jsou rychlejší. Virtuální DOM je lehčí a méně operací probíhá skrze něj než v případě skutečného DOM. V důsledku toho jsou aktualizační operace rychlejší.

2. Snížení zátěže skutečného DOM. Všechny změny jsou nejprve zpracovány ve virtuálním DOM a poté, prostřednictvím procesu zvaného srovnávání, jsou vybrané změny zavedeny do skutečného DOM. Toto může zabránit těžkým, častým aktualizacím DOM.

3. Optimalizace vykreslovacího procesu. React, pomocí Virtuálního DOM, je schopen vypočítat nejefektivnější způsob, jak provést aktualizace v reálném DOM. Tímto se snižuje množství nutných operací a zlepšuje se výkon vykreslování.

4. Zjednodušuje se kódování. Vývojáři mohou kódovat, jako by se celá stránka po každé změně vykreslovala znovu. React se stará o optimalizaci procesu tak, aby bylo provedeno pouze minimální množství práce nutné pro synchronizaci virtuálního a skutečného DOM.

Co jsou props a jak jsou předávány v komponentách Reactu?

Props (od "vlastnosti") jsou vlastnosti komponent v knihovně React. Jsou využívány k přenosu dat z jedné komponenty do druhé, tedy data, která komponenta přijímá od rodičovské komponenty a obvykle jsou předávány při zavolání komponenty.

Props jsou neměnné, což znamená, že komponenta by neměla měnit hodnoty přijatých props, ale pouze je číst.

Props jsou předávány jednosměrným způsobem (z vrchu dolů), tedy od rodičovských komponent k dětským komponentám. Připomíná to postup při předávání atributů HTML elementům.

Zde je příklad použití props:

function Welcome(props) {
  return <h1>Vítejte, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Krištof"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

V tomto příkladu vytváříme komponentu `Welcome`, která očekává prop `name`. Poté v komponentě `App` vytváříme instanci komponenty `Welcome` a předáváme ji prop `name` s hodnotou "Krištof". V důsledku toho, kde jsme použili komponentu Welcome, bude zobrazen text "Vítejte, Krištof".

Vysvětlete, co je hook useEffect a k čemu se používá.

Hák useEffect v React.js se používá k provádění vedlejších efektů v funkčních komponentech. Vedlejší efekty jsou obvykle akce, které nepřímo neovlivňují vykreslování komponenty, ale jsou nezbytné pro její správné fungování, jako je načítání dat z API, obsluha časovačů nebo uvolňování zdrojů.

Funguje podobně jako metody životního cyklu komponenty: componentDidMount, componentDidUpdate a componentWillUnmount v třídních komponentách.

Můžeme ho použít ve třech různých variantách:

1. Bez druhého argumentu: Kód se zavolá po každém vykreslení.

useEffect(() => {
  console.log('Toto se spustí po každém vykreslení');
});

2. S prázdným polem jako druhým argumentem: Kód se zavolá pouze jednou po prvním vykreslení, analogický funkcí componentDidMount.

useEffect(() => {
  console.log('Toto se spustí pouze jednou, po prvním vykreslení');
}, []);

3. S polem závislostí jako druhým argumentem: Kód se spustí po prvním vykreslení a poté pokaždé, když se hodnota jakékoli závislosti v poli změní.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Toto se spustí po prvním vykreslení a poté pokaždé, když se "count" změní');
}, [count]);

Shrnutím lze říci, že hák useEffect umožňuje provádění vedlejších efektů po nebo během vykreslování funkčních komponent, což umožňuje čistý a srozumitelný kód, zatímco zaručuje plnou funkčnost.

React Kartičky

Ukázkové React kartičky z naší aplikace

Co je JSX a proč ho React používá?

Co je virtuální DOM a jaké má výhody?

Co jsou props a jak jsou předávány v komponentách Reactu?

Vysvětlete, co je hook useEffect a k čemu se používá.

Stáhnout IT Flashcards Teď