El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Comprendre JSX

Següent ►
►

Introducció a JSX

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

Conceptes Clau de JSX

  1. Sintaxi semblant a HTML: JSX permet escriure codi que s'assembla molt a HTML, però amb algunes diferències importants.
  2. Expressions JavaScript: Dins de JSX, es poden utilitzar expressions JavaScript envoltades per claus {}.
  3. Components: JSX es pot utilitzar per definir components React, que són blocs de construcció reutilitzables de la interfície d'usuari.
  4. Transpilació: JSX no és comprensible directament pels navegadors o entorns de JavaScript, per la qual cosa es necessita una eina com Babel per transpil·lar el codi JSX a JavaScript pur.

Exemple Bàsic de JSX

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default HelloWorldApp;

Explicació del Codi

  • Importació de Mòduls: import React from 'react'; i import { Text, View } from 'react-native'; importen les dependències necessàries.
  • Component Funcional: const HelloWorldApp = () => { ... } defineix un component funcional anomenat HelloWorldApp.
  • JSX: Dins del component, el codi JSX <View><Text>Hello, World!</Text></View> defineix l'estructura de la interfície d'usuari.
  • Exportació: export default HelloWorldApp; exporta el component perquè pugui ser utilitzat en altres parts de l'aplicació.

Diferències entre JSX i HTML

Característica JSX HTML
Atributs className class
Estil style={{color: 'red'}} style="color: red;"
Comentaris {/* Comentari */} <!-- Comentari -->
Etiquetes tancades <img src="..." /> <img src="...">

Expressions JavaScript en JSX

En JSX, es poden utilitzar expressions JavaScript dins de claus {}. Això permet integrar lògica dins de la interfície d'usuari.

const name = 'John';
const element = <Text>Hello, {name}!</Text>;

Exercicis Pràctics

  1. Crear un Component amb JSX:
    • Crea un component que mostri un missatge de benvinguda amb el nom de l'usuari passat com a prop.
import React from 'react';
import { Text, View } from 'react-native';

const Welcome = (props) => {
  return (
    <View>
      <Text>Welcome, {props.name}!</Text>
    </View>
  );
};

export default Welcome;
  1. Utilitzar Expressions JavaScript:
    • Crea un component que mostri la data i hora actuals utilitzant expressions JavaScript dins de JSX.
import React from 'react';
import { Text, View } from 'react-native';

const CurrentDateTime = () => {
  const now = new Date().toLocaleString();
  return (
    <View>
      <Text>Current Date and Time: {now}</Text>
    </View>
  );
};

export default CurrentDateTime;

Errors Comuns i Consells

  • No tancar etiquetes: En JSX, totes les etiquetes han de ser tancades. Per exemple, <img src="..." /> en lloc de <img src="...">.
  • Utilitzar class en lloc de className: En JSX, s'ha d'utilitzar className per definir classes CSS.
  • Expressions JavaScript fora de claus: Les expressions JavaScript dins de JSX han d'estar sempre envoltades per claus {}.

Conclusió

JSX és una eina poderosa que facilita la creació d'interfícies d'usuari en React Native. Comprendre la seva sintaxi i com utilitzar-lo correctament és fonamental per desenvolupar aplicacions eficients i mantenibles. Amb la pràctica, l'ús de JSX esdevindrà natural i intuïtiu.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats