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.
Ottieni la certificazione!
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 div
elemento.
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' class
attributo è un attributo molto utilizzato in HTML, ma poiché JSX è visualizzato come JavaScript e la
class
parola chiave è una parola riservata in JavaScript, non è consentito utilizzarla in JSX.
Usa className
invece l'attributo.
JSX ha risolto questo problema usando className
invece. Quando viene eseguito il rendering di JSX, traduce gli className
attributi in class
attributi.
Esempio
Usa l'attributo className
invece
class
che in JSX:
const myelement = <h1 className="myclass">Hello World</h1>;
Condizioni - se dichiarazioni
React supporta le if
istruzioni, 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 if
istruzioni 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, {}
.