Lekce 1.3

Znáte JSX opravdu dobře?

Ať už jste začátečník nebo zkušený profesionál, je snadné přehlédnout nuance toho, jak JSX skutečně kompiluje a renderuje. Níže jsou 8 konceptů odvozených z běžných interview otázek. Projděte si je, otestujte se a zjistěte, zda dokážete najít chyby v poskytnutých příkladech.

Co se naučíte
  • •8 klíčových konceptů JSX odvozených z běžných interview otázek
  • •Jak JSX skutečně kompiluje a renderuje
  • •Běžné chyby a úskalí v JSX syntaxi
  • •Praktické příklady a opravy bugů
1

Definice komponenty

Začněme základy. Když napíšete React komponentu, co vlastně vytváříte?

Otázka

Která z následujících možností nejlépe popisuje React komponentu?

Třída, která striktně renderuje HTML řetězce.

Funkce, která vrací popis UI

Šablonovací engine, který se kompiluje do Handlebars

2

Proměnné a interpolace

JSX nám umožňuje míchat JavaScript logiku přímo do našeho značkování. Ale syntaxe je důležitá.

Scénář

Máte proměnnou const label = "Submit";. Jak to zobrazíte uvnitř tlačítka?

Možnost A

jsx
// Option A
<button>{{ label }}</button>

Možnost B

jsx
// Option B
<button>{ label }</button>

Možnost C

jsx
// Option C
<button>${ label }</button>
3

Renderování "ničeho"

Někdy chcete, aby se komponenta úplně skryla.

Tvrzení

Pro renderování žádného UI můžete jednoduše vrátit jakoukoli "falsy" JavaScript hodnotu.

Pravda nebo nepravda?

Pravda

Nepravda

4

Logika podmíněného renderování

Nováčci často hledají direktivy jako v-if (Vue) nebo *ngIf (Angular) uvnitř JSX.

Otázka

Má JSX vestavěný atribut r-if nebo if pro podmíněné renderování?

Ano

Ne

5

Chyba "sousedních elementů"

Analyzujte následující fragment kódu. Vypadá dost nevinně, ale zhavaruje vaši aplikaci.

jsx
function Layout() {
  return (
    <Sidebar />
    <MainContent />
  );
}
Co je zde špatně?

Komponenty musí být zabaleny v nadřazeném elementu nebo Fragmentu

Komponenty nemohou být PascalCase

Nic není špatně

6

Seznamy a klíče

Renderování polí je každodenní úkol v Reactu. Podívejte se na kód níže:

jsx
const products = [
  { id: 101, name: 'Laptop' },
  { id: 102, name: 'Mouse' }
];

// Which render method is valid?

A

jsx
{products.forEach(p => <li>{p.name}</li>)}

B

jsx
{products.map(p => <li>{p.name}</li>)}

C

jsx
{products.map(p => <li key={p.id}>{p.name}</li>)}
7

JavaScript "Return" past

JavaScript má funkci zvanou Automatické vložení středníku (ASI). Může zlomit vaše JSX, pokud si nedáte pozor na formátování.

Co je špatně s touto komponentou?
jsx
function ProfileCard() {
  return 
    <div className="card">
      <h1>User Name</h1>
    </div>
}
8

Atributy a samozavírací tagy

Nakonec se podívejme na syntaxi specifickou pro převod HTML na JSX.

Najděte chyby v tomto fragmentu:
jsx
function SearchBar() {
  return (
    <div class="search-container">
      <label>Search:</label>
      <input type="text" name="query">
    </div>
  )
}