JavaScript y React: Creando Tu Primer Componente 🖥️

JavaScript es el lenguaje de programación más popular para el desarrollo web front-end, y React es una biblioteca JavaScript que se ha convertido en una de las más populares para la creación de interfaces de usuario interactivas. En este tutorial, vamos a crear nuestro primer componente React.

Preparando el Ambiente

Antes de comenzar, necesitas tener Node.js y npm (Node Package Manager) instalados en tu computadora. Si aún no los tienes, puedes descargar Node.js y npm aquí. El npm será instalado automáticamente cuando instales Node.js.

Después de instalados, puedes crear un nuevo proyecto React usando create-react-app, que es un ambiente de desarrollo listo para usar que viene con todo lo que necesitas para construir una app React:

npx create-react-app mi-primer-componente

Después de creado el proyecto, entra en el directorio del proyecto e inicia el servidor de desarrollo:

cd mi-primer-componente
npm start

Ahora, si abres http://localhost:3000 en tu navegador, verás la página inicial de tu nuevo proyecto React.

Creando el Componente

Vamos a crear un nuevo componente llamado MiComponente. Dentro de la carpeta src, crea un nuevo archivo llamado MiComponente.jsx. En él, vamos a definir y exportar nuestro componente:

import React from 'react';

function MiComponente() {
  return <div>¡Hola, mundo!</div>;
}

export default MiComponente;

¡Este es nuestro primer componente React! Es una función que retorna lo que queremos renderizar en el navegador — en nuestro caso, un div con el texto "¡Hola, mundo!".

Utilizando el Componente

Para usar nuestro nuevo componente, vamos a importarlo en nuestro componente App, que es el componente principal de nuestra aplicación. En el archivo App.jsx, haz lo siguiente:

import React from 'react';
import MiComponente from './MiComponente';

function App() {
  return (
    <div className="App">
      <MiComponente />
    </div>
  );
}

export default App;

Ahora, si abres http://localhost:3000 en tu navegador nuevamente, verás el mensaje "¡Hola, mundo!" que es renderizado por nuestro componente MiComponente.

Conclusión

¡Y listo! Has creado y utilizado tu primer componente React. Claro, este es un ejemplo muy básico, y los componentes React pueden hacer mucho más que eso. Pueden tener estado, recibir props, renderizar otros componentes y mucho más. Pero espero que este tutorial te haya dado una idea de cómo comenzar a crear tus propios componentes usando React.

Para continuar perfeccionando tus habilidades en JavaScript y React, consulta el artículo sobre Componentización en React: Organización y Reutilización de Código.

¡Vamos a por ello! 🦅