¿Qué es un Componente en React?

En React, un componente es una parte reutilizable e independiente de la interfaz de usuario que puede contener su propio estado, propiedades y lógica. Aquí te dejo una guía básica sobre cómo crear un componente en React:

Funcional Components (Componentes Funcionales):

Creación de un archivo:
- Crea un nuevo archivo para tu componente, por ejemplo, MiComponente.js.
Importación de React:
- Importa la biblioteca React al principio del archivo:

import React from 'react';

3. Definición del Componente:

Define tu componente funcional:

function MiComponente() {
  return (
    <div>
      <h1>Hola, soy un componente React</h1>
    </div>
  );
}

Class Components (Componentes de Clase):

Creación de un archivo:
- Crea un nuevo archivo para tu componente, por ejemplo, MiComponente.js.
Importación de React:
- Importa la biblioteca React y, opcionalmente, Component al principio del archivo:

import React, { Component } from 'react';

3. Definición del Componente:

Define tu componente de clase que extienda Component:

class MiComponente extends Component {
  render() {
    return (
      <div>
        <h1>Hola, soy un componente React de clase</h1>
      </div>
    );
  }
}

Utilización del Componente:

Después de crear tu componente, puedes utilizarlo en otros archivos React. Por ejemplo, en un archivo App.js:

import React from 'react';
import MiComponente from './MiComponente'; // Ajusta la ruta según la ubicación real de tu componente

function App() {
  return (
    <div>
      <h1>Mi Aplicación React</h1>
      <MiComponente />
    </div>
  );
}

export default App;

Recuerda que en React, los componentes pueden recibir propiedades (props) y manejar su propio estado interno. También pueden contener lógica adicional, eventos y más.

Esta es solo una introducción básica. A medida que explores React, podrías encontrarte con Hooks, propiedades (props), y otros conceptos que amplían la funcionalidad de los componentes React.

Leonardo Fabian