Reagisci JSX


Cos'è JSX?

JSX sta per JavaScript XML.

JSX ci consente di scrivere HTML in React.

JSX semplifica la scrittura e l'aggiunta di HTML in React.


Codifica JSX

JSX ci consente di scrivere elementi HTML in JavaScript e inserirli nel DOM senza alcuno createElement()  e/o appendChild()metodo.

JSX converte i tag HTML in elementi di reazione.

Non è necessario utilizzare JSX, ma JSX semplifica la scrittura di applicazioni React.

Ecco due esempi. Il primo usa JSX e il secondo no:

Esempio 1

JSX:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

Esempio 2

Senza JSX:

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Come puoi vedere nel primo esempio, JSX ci consente di scrivere HTML direttamente all'interno del codice JavaScript.

JSX è un'estensione del linguaggio JavaScript basato su ES6 e viene tradotto in JavaScript normale in fase di esecuzione.


w3schools CERTIFIED . 2022

Ottieni la certificazione!

Completa i moduli React, fai gli esercizi, fai l'esame e diventa certificato w3schools!!

ISCRIVITI A $95

Espressioni in JSX

Con JSX puoi scrivere espressioni tra parentesi graffe { }.

L'espressione può essere una variabile React, una proprietà o qualsiasi altra espressione JavaScript valida. JSX eseguirà l'espressione e restituirà il risultato:

Esempio

Esegui l'espressione 5 + 5:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;


Inserimento di un grande blocco di HTML

Per scrivere HTML su più righe, metti l'HTML tra parentesi:

Esempio

Crea un elenco con tre voci di elenco:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);


Un elemento di livello superiore

Il codice HTML deve essere racchiuso in UN elemento di livello superiore.

Quindi, se ti piace scrivere due paragrafi, devi inserirli all'interno di un elemento genitore, come un divelemento.

Esempio

Avvolgi due paragrafi all'interno di un elemento DIV:

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

JSX genererà un errore se l'HTML non è corretto o se nell'HTML manca un elemento padre.

In alternativa, puoi usare un "frammento" per avvolgere più righe. Ciò impedirà di aggiungere inutilmente nodi extra al DOM.

Un frammento ha l'aspetto di un tag HTML vuoto: <></>.

Esempio

Avvolgi due paragrafi all'interno di un frammento:

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);


Gli elementi devono essere chiusi

JSX segue le regole XML e pertanto gli elementi HTML devono essere chiusi correttamente.

Esempio

Chiudi gli elementi vuoti con/>

const myelement = <input type="text" />;

JSX genererà un errore se l'HTML non è chiuso correttamente.


Classe di attributo = nomeclasse

L' classattributo è un attributo molto utilizzato in HTML, ma poiché JSX è visualizzato come JavaScript e la classparola chiave è una parola riservata in JavaScript, non è consentito utilizzarla in JSX.

Usa classNameinvece l'attributo.

JSX ha risolto questo problema usando classNameinvece. Quando viene eseguito il rendering di JSX, traduce gli className attributi in classattributi.

Esempio

Usa l'attributo classNameinvece classche in JSX:

const myelement = <h1 className="myclass">Hello World</h1>;


Condizioni - se dichiarazioni

React supporta le ifistruzioni, ma non all'interno di JSX.

Per poter utilizzare le istruzioni condizionali in JSX, dovresti mettere le if istruzioni al di fuori di JSX, oppure potresti usare invece un'espressione ternaria:

Opzione 1:

Scrivi ifistruzioni al di fuori del codice JSX:

Esempio

Scrivi "Ciao" se xè inferiore a 10, altrimenti "Arrivederci":

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Opzione 2:

Usa invece espressioni ternarie:

Esempio

Scrivi "Ciao" se xè inferiore a 10, altrimenti "Arrivederci":

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

Nota che per incorporare un'espressione JavaScript all'interno di JSX, il JavaScript deve essere racchiuso tra parentesi graffe, {}.


Mettiti alla prova con gli esercizi

Esercizio:

Eseguire il rendering di un elemento <p> senza utilizzare JSX.

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));