React: Czym jest JSX?

Do czego służy JSX?

React pozwala na tworzenie widoku komponentu za pomocą specjalnej składni o nazwie: JSX. JSX to po prostu rozszerzenie JavaScript dzięki, któremu możemy umieszczać znaczniki HTML'owe w kodzie.

Najprostszy przykład:

const header = <h2>Hello React!</h2>;

Przykład z przekazaniem wartości:

function createHeaderHello = (name) => {
  return <h2>Hello {name}!</h2>;
}

createHeaderHello('Magda'); // <h2>Hello Magda!</h2>

Różnice między JSX a HTML

Używając JSX należy mieć świadomość, że istnieją pewne różnice między JSX a zwykłym HTML.

Na przykład w zwykłym HTML chcemy nadać klasę CSS danemu elementowi:

<div class="some-class">Div element</div>

W JSX to samo zapiszemy tak:

const element = <div className="some-class">Div element</div> 

Tutaj użyliśmy className. Jest tak, ponieważ JSX używa składni camelCase.

JSX a wstrzyknięcie kodu z zewnątrz

Wszystko, co pochodzi od użytkownika a my to wyświetlamy za pomocą JSX jak na przykład:

const element = <div>{data}</div> 

Można uznać za bezpieczną operację. Autorzy Reacta zapewniają, że dzięki JSX unikniemy ataku typu wstrzyknięcia złośliwego kodu na naszą stronę.