Mój krótki poradnik o JSX

Wstęp

To nie jest style guide, więc można za pewne ładniej to napisać. Poradnik ma zwięźle pokazać działanie JSX.

JSX

JSX to jakby HTML. Składnia XML, ale zmieszany z javascriptem:

This specification does not attempt to comply with any XML or HTML specification. JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity https://facebook.github.io/jsx/

Jest jednak kilka różnic:

Tagi muszą być zamknięte. Jeśli nie ma taga kończącego, używamy samozamkniętych tagów:
```
 <input />
```
Każdy komponent musi zwracać tylko jeden tag lub array (od react 0.16).

Źle:
```
return <div></div><div></div>
```
Dobrze:
```
return <div><div></div><div></div></div>
```
Dobrze (od react 0.16):
```
return [<div></div><div></div>]
```
Ewentualnie można użyć https://github.com/gajus/react-aux.
Z powodów problemów z return i nową linią, dobrze jest otaczać nawiasami zwracany JSX:
```
return (<div></div>)
```
Z powodów historycznych wszystkie atrybuty są camelCase, inaczej niż w HTML, np.
```
<input autoComplete className="myclass" />
```
Lista takich mapowań - nie wiem czy kompletna.

Do expression używamy {}, np:

<div className={variableHoldingClassName} />

Spacja musi być explicit:

<div><span>my text</span>{' '}<span>my text</span></div>

Instrukcje kontrolne - if:

<div>{active && <div>active</div>}</div>

Instrukcje kontrolne - if-else:

<div>{active ? <div>active</div> : <div>not active</div>}</div>

Instrukcje kontrolne - loop:

<ul>{items.map(item => <li>{item.name}</li>}</ul>

Instrukcje kontrolne - loop i key. Ponieważ "Keys help React identify which items have changed, are added, or are removed", dodajemy key. Jeśli elementy mają mieć zmienianą kolejność, nie używamy index:
```
<ul>{items.map((item, index) => <li key={index}>{item.name}</li>}</ul>
```
Przekazywanie propsów - późniejsze nadpisują wcześniejsze:
```
<div active={active} {...props}>Some text</div>
```

Przekazywanie propsów - spread:

<div {...props, ...{active, onClick: doSomething}}>Some text</div>

jest to samo co

<div {...props} active={active} onClick={doSomething}>Some text</div>

disabled i required działają inaczej niż w HTML. Jeśli mają wartość false, nie pojawią się w komponencie, czyli możemy używać
```
<input required={isRequired} />
```
Jeśli nie przekażesz wartości dla propsa, to ma on domyślnie wartość true.

Poniższe są równoważne:
```
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
```

Warunkowe dodanie atrybutów:

<Button {...condition ? {bsStyle: 'success'} : {}} />

Do warunkowych className najlepiej używać classNames:

className={classNames(
  'agreement__step-content', 'react-rewrite',
  { 'height-zero': heightZero }
)}

Wyświetlenie wartości true w expression da nic:

var value = true;
return <div>value: {value}</div>;

Używaj JSON.stringify:

var value = true;
return <div>value: {JSON.stringify(value)}</div>;

Więcej na:

rofrol/jsx-cheatsheet.md

Mój krótki poradnik o JSX

Wstęp

JSX