ReactJSX


Osservazioni

JSX è un passo del preprocessore che aggiunge la sintassi XML a JavaScript. Puoi sicuramente usare React senza JSX ma JSX rende React molto più elegante.

Proprio come XML, i tag JSX hanno un nome di tag, attributi e figli. Se un valore di attributo è racchiuso tra virgolette, il valore è una stringa. Altrimenti, avvolgere il valore in parentesi graffe e il valore è l'espressione JavaScript inclusa.

Fondamentalmente, JSX fornisce solo zucchero sintattico per la funzione React.createElement(component, props, ...children) .

Quindi, il seguente codice JSX:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

Compila il seguente codice JavaScript:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

In conclusione, si noti che la seguente riga in JSX non è né una stringa né HTML :

const element = <h1>Hello, world!</h1>;

Si chiama JSX ed è un'estensione di sintassi di JavaScript . JSX potrebbe ricordarti un linguaggio modello, ma ha tutta la potenza di JavaScript.

Il team di React dice nei loro documenti che consiglia di usarlo per descrivere come dovrebbe essere l'interfaccia utente.

JSX Esempi correlati