Czym jest JSX w React i czy warto się z nim zaprzyjaźnić?

JSX to składnia podobna do XML/HTML z Reacta, która rozszerza ECMAScript. JSX pozwala na pisanie kodu HTML zmieszanego z JavaScript. Spójrzmy na poniższy przykład:

export const App = () => {
  return (
    <main id="root">
      <h1>Hello Folks!</h1>
      <p>
        Random question: 
        Is <strong>FC Barcelona</strong> win any match in the Champions League this season? 
        </p>
    </main>
  );
}

export default App;

Każdy kod JSX jest konwertowany na funkcję React.createElement, którą zna przeglądarka internetowa. Spójrz na przekonwertowany kod, który pokazałem w poprzednim fragmencie:

export const App = () => {
  return React.createElement(
    "main",
    { id: "root" },
    React.createElement(
      "h1",
      null,
      "Hello Folks!"
    ),
    React.createElement(
      "p",
      null,
      "Random question: Is ",
      React.createElement(
        "strong",
        null,
        "FC Barcelona"
      ),
      " win any match in the Champions League this season?"
    )
  );
};

export default App;

Funkcja react createElement tworzy i zwraca nowy element reactowy. Oto sygnatura funkcji:

React.createElement(
  type,
  [props],
  [...children]
)

Argument type może być elementem HTML lub elementem React (lub nawet fragmentem React). Drugim argumentem jest obiekt props, który zawiera atrybuty znacznika HTML lub rekwizyty elementu React. Ostatnim argumentem są dzieci, a więc jest to kolejny element jsx przekształcony w funkcję React createElement.

W powyższym kodzie widać zagnieżdżone elementy. Wszystkie znaczniki jsx są transportowane do funkcji react createElement, a zwykły javaScript może je zrozumieć.

Jeśli więc zapytasz, czym jest jsx w React, co oznacza jsx, mogę odpowiedzieć, że jest to specjalna składnia, która pozwala mieszać zwykły JavaScript i elementy HTML w celu przyspieszenia programowania. Wtedy możesz zapytać…

Czy JSX jest niezbędny dla Reacta?

Nie jest tak, że jeśli nie lubisz składni JSX lub chcesz pisać kod JavaScript bez konfigurowania babel do transpiracji składni JSX do rzeczywistego kodu javascript, możesz pisać aplikacje React bez JSX.

Pro-tip dla ciebie: jeśli chcesz uniknąć zbyt częstego pisania React.createElement, możesz spróbować czegoś takiego:

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Are you sure you don't want to use JSX?'),
  document.getElementById('root')
);

React JSX wyjaśniony na przykładach

React JSX to podstawowa koncepcja Reacta. Jeśli dobrze go zrozumiesz, będziesz mógł wydajnie pisać kod React. Zobaczmy typowe przypadki użycia JSX w React.

Jak dodać kod JavaScript w JSX?

Aby dodać kod w stylu JSX, należy użyć nawiasów klamrowych w następujący sposób:

export const App = () => {
  const welcomeMessage = 'Hello folks!';

  return (
    <main id="root">
      <h1>{welcomeMessage}</h1>
    </main>
  );
}

export default App;

JSX nie pozwala na renderowanie obiektów bezpośrednio jako tag JSX, więc ten kod react nie jest poprawny, a błąd pojawia się podczas korzystania z JSX Expression podczas renderowania obiektu.

export const App = () => {
  const welcomeMessage = {
    text: 'Hello folks!'
  };

  return (
    <main id="root">
      <h1>{welcomeMessage}</h1>
    </main>
  );
}

export default App;

Można jednak pisać tablice w wyrażeniach JSX, ponieważ podczas renderowania tablice są konwertowane na ciągi znaków. Tak więc ten element reakcji jest ważny:

export const App = () => {
  const welcomeMessage = ['Hello', ' ',  'folks', '!'];

  return (
    <main id="root">
      <h1>{welcomeMessage}</h1>
    </main>
  );
}

export default App;

Atrybuty

JSX umożliwia korzystanie z natywnych atrybutów HTML, a także własnych atrybutów niestandardowych. W przypadku natywnych atrybutów HTML, JSX używa konwencji wielbłądzich liter zamiast normalnej konwencji nazewnictwa HTML. Poza tym należy pamiętać, że na przykład słowo class jest zarezerwowanym słowem kluczowym i dla obu. Dla tych słów kluczowych JSX używa className dla klasy i htmlFor dla zarezerwowanego słowa kluczowego (for).

Niestandardowe atrybuty HTML w JSX

W przypadku niestandardowych atrybutów HTML należy użyć prefiksu danych. Wygląda tak samo jak zwykły HTML.

export const App = () => {
  const welcomeMessage = ['Hello', ' ',  'folks', '!'];
  const isCustom = true;

  return (
    <main id="root">
      <h1 data-isCustom={isCustom}>{welcomeMessage}</h1>
    </main>
  );
}

export default App;

Jak widać w tym komponencie react w znaczniku HTML <h1>, użyłem atrybutu data-isCustom i nawiasów klamrowych, aby przekazać wartość do atrybutu. Co więcej, można przekazywać wartości do atrybutów znaczników HTML za pomocą literałów łańcuchowych, takich jak ten:

export const App = () => {
  const welcomeMessage = ['Hello', ' ',  'folks', '!'];

  return (
    <main id="root">
      <h1 data-mode="default">{welcomeMessage}</h1>
    </main>
  );
}

export default App;

Wyrażenia JavaScript

Wyrażenie JavaScript może być używane wewnątrz JSX. Co chyba nie jest zaskakujące, gdy chcesz użyć wyrażenia JavaScript, musisz owinąć je nawiasami klamrowymi {}.

If statements

W JSX nie można używać instrukcji if-else. Zamiast tego można użyć wyrażeń warunkowych lub wyrażeń trójskładnikowych JavaScript. Spójrz na prosty komponent React z instrukcją JSX if:

export const App = () => {
  const welcomeMessage = ['Hello', ' ',  'folks', '!'];
  const shouldDisplay = true;

  return (
    <main id="root">
      {shouldDisplay && <h1 data-mode="default">{welcomeMessage}</h1>}
    </main>
  );
}

export default App;

Dla if/else można użyć czegoś takiego:

{shouldDisplay ? <h1 data-mode="default">{welcomeMessage}</h1> : 'no way!'}

Wolę eksplodować wyrażenia JavaScript do const (i czasami zapamiętywać je za pomocą haka React useMemo ze względu na wydajność). Spójrz na poniższy kod JSX:

export const App = (props) => {
  const { hasError } = props;
  const welcomeMessage = 'Hello folks!';
  const errorMessage = 'Something went wrong.'

  const shouldDisplayError = hasError ? 
    <p>{errorMessage}</p> : <h1 >{welcomeMessage}</h1>;

  return (
    <main id="root">
      {shouldDisplayError}
    </main>
  );
}

export default App;

Pętle

Jeśli chcesz wyrenderować tablicę JavaScript za pomocą JSX, możesz użyć czegoś takiego:

export const App = () => {
  const array = ['a', 'b', 'c']

  return (
    <main id="root">
      {array.map(el => <p key={el}>This is {el}</p>)}
    </main>
  );
}
export default App;

Spread operator

Operator spread nie jest obsługiwany jako wyrażenie potomne jsx, więc nie można umieścić czegoś takiego w komponencie react:

 {...['a','b','c']}

Komentarze w kodzie JSX

Jeśli chcesz wstawić komentarz do komponentu react, musisz zawinąć go za pomocą nawiasów klamrowych.

{/** this is comment */}

StylowanieJSX

React zachęca do używania stylów inline. Możesz użyć wyrażeń JSX, aby przekazać wartość do atrybutu style w celu ustawienia stylów wbudowanych. React automatycznie doda również px po numerze określonej właściwości.

Uwaga: stylowanie inline nie jest jedynym sposobem stylizowania elementów react. Istnieje kilka innych podejść, ale jest to temat na inny artykuł.

JSX: Podsumowanie

Podczas pracy nad aplikacją React można używać JSX do umieszczania znaczników w kodzie javascript. Oznacza to, że w tym samym pliku znajdują się znaczniki HTML i wyrażenia JavaScript.

Każdy tag JSX jest przekształcany w funkcję javascript React createElement. Co więcej, jeśli z jakiegoś powodu nie chcesz używać JSX, możesz napisać kod react bez JSX.

Moim zdaniem JSX ma wiele zalet i zdecydowanie jest przyjacielem każdego programisty React. Najbardziej podoba mi się to w JSX, ponieważ wygląda jak JavaScript z większą mocą (można śmiało powiedzieć, że JSX jest zbudowany na JavaScript). Podoba mi się to podejście bardziej niż coś, co można znaleźć w Vue.js lub Angular, gdzie trzeba nauczyć się konkretnych funkcji i składni frameworka.