El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció a JSX

JSX (JavaScript XML) és una extensió de la sintaxi de JavaScript que permet escriure codi que s'assembla a HTML dins de JavaScript. És una característica fonamental de React que facilita la creació d'interfícies d'usuari de manera declarativa.

Conceptes clau de JSX

Sintaxi semblant a HTML: JSX permet escriure etiquetes HTML dins de JavaScript.
Transpilació: JSX no és comprensible directament pels navegadors, per la qual cosa es necessita un transpilador com Babel per convertir-lo en codi JavaScript.
Expressions JavaScript: Dins de JSX, es poden utilitzar expressions JavaScript envoltades per claus {}.

Exemple bàsic de JSX

const element = <h1>Hola, món!</h1>;

En aquest exemple, <h1>Hola, món!</h1> és un element JSX que representa un element HTML <h1> amb el text "Hola, món!".

Com utilitzar JSX

Embolcallar expressions JavaScript

Dins de JSX, es poden utilitzar expressions JavaScript envoltades per claus {}. Per exemple:

const name = 'Joan';
const element = <h1>Hola, {name}!</h1>;

Aquest codi crea un element <h1> que mostra "Hola, Joan!".

Atributs en JSX

Els atributs en JSX s'escriuen de manera similar als atributs HTML, però amb algunes diferències:

class es converteix en className.
for es converteix en htmlFor.

Exemple:

const element = <div className="container">Contingut aquí</div>;

Niuar elements

Es poden niuar elements JSX de la mateixa manera que es fa amb HTML:

const element = (
  <div>
    <h1>Hola, món!</h1>
    <p>Això és un paràgraf.</p>
  </div>
);

Renderitzar elements

Per renderitzar un element JSX en el DOM, s'utilitza el mètode ReactDOM.render():

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hola, món!</h1>;
ReactDOM.render(element, document.getElementById('root'));

Exercicis pràctics

Exercici 1: Crear un element JSX

Crea un element JSX que mostri el teu nom dins d'un element <h1>.

const myName = 'El teu nom';
const element = <h1>Hola, {myName}!</h1>;
ReactDOM.render(element, document.getElementById('root'));

Exercici 2: Utilitzar expressions JavaScript

Crea un element JSX que mostri la suma de dos nombres dins d'un element <p>.

const num1 = 5;
const num2 = 10;
const element = <p>La suma de {num1} i {num2} és {num1 + num2}.</p>;
ReactDOM.render(element, document.getElementById('root'));

Exercici 3: Niuar elements

Crea un element JSX que contingui un element <div> amb un element <h1> i un element <p> dins.

const element = (
  <div>
    <h1>Benvingut a React</h1>
    <p>Això és un paràgraf dins d'un div.</p>
  </div>
);
ReactDOM.render(element, document.getElementById('root'));

Errors comuns i consells

No tancar etiquetes: Totes les etiquetes en JSX han de ser tancades, fins i tot les etiquetes auto-tancades com <img /> o <input />.
Utilitzar class en lloc de className: Recorda que en JSX, class es converteix en className.
Expressions JavaScript fora de claus: Les expressions JavaScript dins de JSX han d'estar envoltades per claus {}.

Conclusió

JSX és una eina poderosa que facilita la creació d'interfícies d'usuari en React. Permet escriure codi que s'assembla a HTML dins de JavaScript, fent que el codi sigui més llegible i mantenible. Amb la pràctica, et sentiràs còmode utilitzant JSX per crear components React de manera eficient.

En el següent mòdul, explorarem els components de React, que són els blocs de construcció fonamentals de qualsevol aplicació React.

JSX: Extensió de la sintaxi de JavaScript

Introducció a JSX

Conceptes clau de JSX

Exemple bàsic de JSX

Com utilitzar JSX

Embolcallar expressions JavaScript

Atributs en JSX

Niuar elements

Renderitzar elements

Exercicis pràctics

Exercici 1: Crear un element JSX

Exercici 2: Utilitzar expressions JavaScript

Exercici 3: Niuar elements

Errors comuns i consells

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa