Taula de continguts

Introducció

...

Component

Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas componentes. Un componente de React es una función de JavaScript a la que le puedes agregar un poco de marcado (markup). Los componentes pueden ser tan pequeños como un botón, o tan grandes como una página entera.

Defineix el component Greeting que es utilitzat pel component App:

export default function App() {
  return <Greeting/>
}

function Greeting() {
  return <p className="fs-3 p-4 border">Hello X</p>
}

¡Los componentes de React son funciones regulares de JavaScript, pero sus nombres deben comenzar con letra mayúscula o no funcionarán!

El componente devuelve una etiqueta <p /> con el atributo className.

se escribe como en HTML, ¡pero en realidad es JavaScript por detrás! Esta sintaxis se llama JSX, y te permite incorporar marcado dentro de TypeScript.

L'atribut className correspon a l'atribut class d'HTML (en JSX class és una paraula reservada)

Las sentencias return se pueden escribir todo en una línea, como en este componente:

return <p className="fs-3 p-4 border">Hello X</p>

Pero si tu marcado no está todo en la misma línea que la palabra clave return, debes ponerlo dentro de paréntesis como en este ejemplo:

function Greeting() {
  return (
    <div className="m-5">
      <p className="fs-3 p-4 border">Hello X</p>
    </div>
  )
}

¡Sin paréntesis, todo el código que está en las líneas posteriores al return serán ignoradas!

El componente Greeting està anidat dins el component App, i si vols, pots afegit tants components Greeting com vulguis dins del component App:

export default function App() {
  return (
    <>
      <Greeting />
      <Greeting />
      <Greeting />
    </>
  )
}

function Greeting() {
  return <p className="fs-3 m-2 p-2 border text-center">Hello X</p>
}

Has d'utilitzar el marcatge buit <> perque el return ha de tornar un únic component arrel.

Nota la diferencia de mayúsculas y minúsculas:

• <p> está en minúsculas, por lo que React sabe que nos referimos a una etiqueta HTML.
• <Greeting /> comienza con una G mayúscula, por lo que React sabe que queremos usar nuestro componente llamado Greeting.

Al final lo que el navegador ve es esto:

<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>

Anidar y organizar componentes

Los componentes son funciones regulares de JavaScript, por lo que puedes tener múltiples componentes en el mismo archivo.

Dado que los componentes Greeting se renderizan dentro de App (¡incluso varias veces!) podemos decir que App es un componente padre, que renderiza cada Greeting como un «hijo». Este es la parte mágica de React: puedes definir un componente una vez, y luego usarlo en muchos lugares y tantas veces como quieras.

export default function App() {
  
  // 🔴 ¡Nunca definas un componente dentro de otro componente!
  function Greeting() {
    // ...
  }
  // ...
}

export default function App() {
  // ...
}

// ✅ Declara los componentes en el primer nivel
function Greeting() {
  // ...
}

Segueix amb Importar y exportar componentes, etc.

Exemple Modifica el component greeting per tal que si li posem un nom, es generarà el codi HTML:

Hello nom

Solució

export default function App() {
  return (
    <>
      <Greeting name="Roser"/>
      <Greeting name="Jose" />
      <Greeting name="David" />
    </>
  )
}

function Greeting({name}:{name:string}) {
  return <p className="fs-3 m-2 p-2 border text-center">Hello {name}</p>
}