JSX (JavaScript) - JSX (JavaScript)

JSX ( JavaScript Syntax Extension i czasami określane jako JavaScript XML ) to rozszerzenie składni języka JavaScript , które zapewnia sposób na uporządkowanie renderowania komponentów przy użyciu składni znanej wielu programistom. Z wyglądu jest podobny do HTML .

Komponenty Reacta są zazwyczaj pisane przy użyciu JSX, chociaż nie muszą tak być, ponieważ komponenty mogą być również napisane w czystym JavaScript. JSX jest podobny do innej składni rozszerzenia stworzonej przez Facebooka dla PHP o nazwie XHP .

Narzut

Przykład kodu JSX: 

const App = () => {

   return (
     <div>
       <p>Header</p>
       <p>Content</p>
       <p>Footer</p>
     </div>
   ); 
}

Elementy zagnieżdżone

Wiele elementów na tym samym poziomie musi być opakowanych w pojedynczy element React, taki jak <div>element pokazany powyżej, fragment nakreślony przez <Fragment>lub w jego skróconej formie <>lub zwrócony jako tablica.

Atrybuty

JSX zapewnia szereg atrybutów elementów zaprojektowanych w celu odzwierciedlenia tych dostarczanych przez HTML. Do komponentu można również przekazać niestandardowe atrybuty. Wszystkie atrybuty zostaną odebrane przez komponent jako props.

Wyrażenia JavaScript

Wyrażenia JavaScript (ale nie instrukcje ) mogą być używane wewnątrz JSX z nawiasami klamrowymi {}: 

  <h1>{10+1}</h1>

Powyższy przykład wyrenderuje: 

  <h1>11</h1>

Instrukcje warunkowe

Instrukcji if-else nie można używać wewnątrz JSX, ale zamiast tego można używać wyrażeń warunkowych. Poniższy przykład zostanie wyrenderowany jako ciąg, ponieważ jest równy 1. { i === 1 ? 'true' : 'false' }'true'i

const App = () => {

   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}

Powyższe wyrenderuje: 

<div>
  <h1>true</h1>
</div>

Funkcje i JSX mogą być używane w warunkach warunkowych: 

const App = () => {

   const sections = [1, 2, 3];

   return (
     <div>
       {sections.map((n,i) => (
           /* 'key' is used by react to keep track of list items and their changes */
           /* Each 'key' must be unique */
           <div key={"section-" + n}>
               Section {n} {i === 0 && <span>(first)</span>}
           </div>
       ))}
     </div>
   );
}

Powyższe wyrenderuje: 

<div>
  <div>Section 1<span>(first)</span></div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

Kod napisany w JSX wymaga konwersji za pomocą narzędzia takiego jak Babel, zanim zostanie zrozumiany przez przeglądarki internetowe. To przetwarzanie jest wykonywane zazwyczaj podczas kompilacji oprogramowania procesu, zanim aplikacja jest wdrożony .

Zewnętrzne linki

Bibliografia