Componentes

En React, un componente es una pieza reutilizable e independiente de la interfaz de usuario que encapsula una parte específica de la funcionalidad y la presentación de una aplicación. Los componentes en React pueden ser simples, como un botón o un formulario, o más complejos, como una barra lateral o una tabla de datos. Aquí tienes una explicación más detallada junto con ejemplos:

1. Componentes Funcionales: Un componente funcional en React es una función de JavaScript que devuelve JSX (JavaScript XML). Estos componentes son más simples y tienen menos características que los componentes de clase. Aquí tienes un ejemplo de un componente funcional que muestra un saludo:

   import React from 'react';
   
   const Saludo = (props) => {
       return <h1>Hola, {props.nombre}!</h1>;
   }
   
   export default Saludo;
   

   En este ejemplo, Saludo es un componente funcional que acepta un prop llamado nombre y muestra un saludo personalizado.

2. Componentes de Clase: Los componentes de clase en React son clases de JavaScript que extienden la clase React.Component. Estos componentes tienen más características, como el estado interno y los métodos de ciclo de vida. Aquí tienes un ejemplo de un componente de clase que muestra un temporizador:

   import React, { Component } from 'react';
   
   class Temporizador extends Component {
       constructor(props) {
           super(props);
           this.state = { segundos: 0 };
       }
   
       componentDidMount() {
           this.intervalo = setInterval(() => {
               this.setState({ segundos: this.state.segundos + 1 });
           }, 1000);
       }
   
       componentWillUnmount() {
           clearInterval(this.intervalo);
       }
   
       render() {
           return <p>Ha pasado {this.state.segundos} segundos.</p>;
       }
   }
   
   export default Temporizador;
   

   En este ejemplo, Temporizador es un componente de clase que muestra cuántos segundos han pasado desde que se montó el componente.

3. Uso de Componentes: Una vez que hayas creado tus componentes, puedes usarlos en otras partes de tu aplicación. Por ejemplo, si tienes un componente App que usa los componentes Saludo y Temporizador, podrías usarlos de la siguiente manera:

   import React from 'react';
   import Saludo from './Saludo';
   import Temporizador from './Temporizador';
   
   function App() {
       return (
           <div>
               <Saludo nombre="Juan" />
               <Temporizador />
           </div>
       );
   }
   
   export default App;
   

   Aquí, App es un componente funcional que muestra un saludo personalizado y un temporizador.

En resumen, los componentes en React son bloques de construcción fundamentales que te permiten construir interfaces de usuario reutilizables y modulares. Puedes crear componentes funcionales simples o componentes de clase más complejos, dependiendo de tus necesidades. Luego, puedes usar estos componentes en otras partes de tu aplicación para construir interfaces de usuario más complejas y dinámicas.

https://www.w3schools.com/react/react_components.asp

https://fullstackopen.com/es/part1/introduccion_a_react#componente

https://react.dev/learn/your-first-component