JSX non è HTML
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 4 di 42.
JSX assomiglia a HTML, ma vive all'interno di JavaScript, e questo comporta alcune piccole differenze che incontrerai continuamente:
1. className invece di class. class è una parola riservata in JavaScript, quindi JSX rinomina l'attributo:
<p className="warning">Careful!</p>2. Ogni tag deve essere chiuso. HTML tollera <br> e <input>; JSX no. I tag autochiudenti terminano con />:
<input id="name" />
<br />3. Attributi camelCase. Gli attributi composti da più parole diventano camelCase: onclick → onClick, tabindex → tabIndex. Userai spesso onClick quando arriveremo agli eventi.
Sfida
PrincipianteAl paragrafo qui sotto serve una classe CSS, aggiunta nel modo JSX.
- Assegna al paragrafo la classe CSS
notice(ricorda: JSX non usa il nome dell'attributoclass). - Mantieni invariati il suo id e il suo testo.
Provalo tu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX