JSX

Download reactjs eBook

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 <div>Hello {this.props.name}</div>;
  }
}

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

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

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

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

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.

Esempi correlati

Stats

63 Contributors: 2
Friday, March 3, 2017
Autorizzato sotto: CC-BY-SA

Non affiliato con Stack Overflow
Rip Tutorial: info@zzzprojects.com

Scarica eBook