jsx cheatsheet

jsx-cheatsheet.md

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:

1. Tagi muszą być zamknięte. Jeśli nie ma taga kończącego, używamy samozamkniętych tagów:

    <input />

2. 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.

3. Z powodów problemów z return i nową linią, dobrze jest otaczać nawiasami zwracany JSX:

   return (<div></div>)

4. Z powodów historycznych wszystkie atrybuty są camelCase, inaczej niż w HTML, np.

   <input autoComplete className="myclass" />

   Lista takich mapowań - nie wiem czy kompletna.

5. Do expression używamy {}, np:

   <div className={variableHoldingClassName} />

6. Spacja musi być explicit:

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

7. Instrukcje kontrolne - if:

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

8. Instrukcje kontrolne - if-else:

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

9. Instrukcje kontrolne - loop:

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

10. 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>

11. Przekazywanie propsów - późniejsze nadpisują wcześniejsze:

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

12. Przekazywanie propsów - spread:

    to

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

    jest to samo co

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

13. 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} />

14. 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} />

15. Warunkowe dodanie atrybutów:

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

16. Do warunkowych className najlepiej używać classNames:

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

17. 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:

• https://facebook.github.io/react/docs/jsx-in-depth.html
• http://blog.klipse.tech/javascript/2016/12/14/jsx.html