Tu primer componente

Vamos a crear nuestro propio componente.

Hoy los componentes son solo funciones, así que para escribir tu primer componente React, basta con que sepas escribir una función.

Por eso, en esta lección aprenderás:

1. Donde colocar tus componentes dentro del proyecto
2. Qué extensiones de archivo puedes utilizar
3. Qué sintaxis utilizar en el nombre de los componentes
4. Y Cómo reutilizarlos en multiples archivos

Escribiendo un componente nuevo

Creamos un archivo nuevo dentro de la carpeta src, con el nombre Message.tsx, podemos utilizar la extensión .js, .jsx, .ts y .tsx, pero por convención, en este curso, utilizaremos .tsx.

Este archivo debe contener ya sea una clase o una función que represente a nuestro componente. Actualmente las funciones son lo recomendado por la documentación oficial de React, por ello vamos a utilizar componente de tipo función.

Declaramos una función llamada Message, pon atención al uso de “PascalCasing” esto es que cada palabra en el nombre de la función, inicia con una letra mayúscula. En el caso de nuestra función, como su nombre consiste de una sola palabra, la M es la única mayúscula.

Es importante seguir esta convención, pues esta es la convención que tanto React como otros desarrolladores están esperando que sigamos, y pensar en la colaboración al escribir código, este el primer paso al profesionalismo.

Esta función devolverá aquello que queremos mostrar en nuestro sitio web, para este primer componente, lo que queremos es mostrar un título para nuestra pagina, y por eso necesitamos usar un h1 con un texto dentro.

Así que eso es lo que vamos a devolver en el return.

Esta sintaxis puede ser confusa, podrías pensar que estás escribiendo HTML en medio de JavaScript. Pero no es así, a esta sintaxis se le llama JSX. Y eso es justo lo que es, JavaScript X, la X es por esta capacidad de escribir etiquetas como lo haríamos en HTML, sin embargo no es HTML. Es un mutante

React crea elementos con una función llamada createElement.

function Message() {
  return createElement(
    'h1',
    { className: 'greeting' },
    "Hola blissmo"
  );
}

Pero esto es mucho código qué escribir, por eso apareció JSX. Con JSX el código equivalente de esa llamada a createElement se convierte en: <h1>Hola blissmo</h1>.

Export

Antes de poder utilizar este componente, debemos asegurarnos de exportarlo, esto nos garantiza que podremos usarlo en otras partes de nuestro proyecto, como en App.tsx.

export default Message

👀 Existen varias forma de exportar un componente:

export default function Message(){}

export const Message = () ⇒{}

App.tsx

Vamos a borrar todo el contenido dentro de App.tsx, y vamos a escribir nuestro componente App nosotros mismos, colocaremos un div para poder agregar nuestro componente Message, es importante tener en mente que un componente React solo puede devolver un elemento, este elemento debe ser el padre del resto, es decir, que debemos siempre devolver un árbol de nodos a partir de un único nodo padre. También recuerda que todos los componentes deben auto cerrarse <Message /> o poseer la etiqueta de apertura y cierre <Message></Message> nunca dejes una etiqueta sin cerrar o tendrás un error de compilación.

Colocamos nuestro componente dentro del div y aprovechamos para importarlo.

👀 La importación de nuestro componente queda así:

import Message from “./Message”

Puedes notar que no es necesario agregar la extensión .tsx gracias al compilador de Vite (esbuild).

No olvidemos exportar nuestro componente App:

import Message from “./Message”

function App(){
	return <div><Message /></div>
}

export default App

Cuando levantamos nuestro servidor, observamos que Vite está monitoreando todos los cambios en nuestra aplicación para reflejarlos en el navegador gracias a su “hot module replacement”.

Nuestro mensaje se muestra correctamente, nuestro componente es muy simple, pero en un componente del mundo real, seguramente querremos agregar comportamiento a nuestro componente, esto ya sea con formularios o botones que detonen cambios en lo que se muestra.

Gracias a JSX, nuestro componente es solo una función y por eso también soporta variables que podemos usar dentro de nuestra etiqueta h1

function Message(){ 
	const name = "Blissmo";
	return <h1> Hola {name} </h1>
}

export default App;

Cualquier expresión de JavaScript puede ser usada dentro de los “braces” ({}) Una expresión de JavaScript es cualquier pedacito de código que devuelva un valor.

function Message(){ 
	const name = "Blissmo";
	if(name!=="Héctor") return <h2>Hola tu</h2>
	return <h1> Hola {name} </h1>
}

export default App;

Esta el la belleza de JSX, pues nos permite escribir código y mezclarlo con el maquetado.

🎉 ¡Muy bien! Estas creando interfaces modernas y modularizadas con React

Ahora que has escrito tu primer componente y que has agregado React como tu nueva herramienta favorita, tal vez sea buen momento de entender cómo funciona React y con esto saber qué beneficios obtenemos al usarlo.

Enlaces relacionados

Compilador en tiempo real

Qué es JSX

Conoce esbuild