9.1-componente

 

Tutorial de Componentes React Básicos (Simplificado)

📚 Contenido

  1. Estructura básica

  2. Ejemplo 1: Pie de Página

  3. Ejemplo 2: Tarjeta Simple

  4. Ejemplo 3: Navegación

  5. Ejemplo 4: Perfil de Usuario

  6. Ejemplo 5: Lista de Características

  7. Componente Padre (App.js)

1. Estructura básica {#estructura}

// Componente básico sin props

function MiComponente() {

  return (

    <div>

      <h1>Título</h1>

      <p>Contenido estático</p>

    </div>

  );

}






2. Ejemplo 1: Pie de Página {#ejemplo1}

Componente Hijo:

function PiePagina() {

  return (

    <footer style={{

      backgroundColor: '#333',

      color: 'white',

      padding: '20px',

      textAlign: 'center',

      marginTop: '30px'

    }}>

      <p>© 2023 Mi Sitio Web</p>

      <p>Contacto: info@misitio.com</p>

    </footer>

  );

}

Componente Padre:

jsx

function App() {

  return (

    <div>

      <h1>Mi Aplicación</h1>

      <p>Contenido principal aquí...</p>

      <PiePagina /> {/* Usamos el componente hijo */}

    </div>

  );

}




3. Ejemplo 2: Tarjeta Simple {#ejemplo2}

Componente Hijo

function TarjetaProducto() {

  return (

    <div style={{

      border: '1px solid #ddd',

      borderRadius: '8px',

      padding: '15px',

      maxWidth: '250px',

      margin: '10px'

    }}>

      <h3 style={{ marginTop: 0 }}>Producto Ejemplo</h3>

      <p>Descripción breve del producto</p>

      <p style={{ color: 'green', fontWeight: 'bold' }}>$99.99</p>

      <button style={{

        backgroundColor: 'blue',

        color: 'white',

        border: 'none',

        padding: '8px 16px',

        borderRadius: '4px',

        cursor: 'pointer'

      }}>

        Comprar

      </button>

    </div>  );}

Componente Padre:

function ListaProductos() {

  return (

    <div>

      <h2>Nuestros Productos</h2>

      <div style={{ display: 'flex', flexWrap: 'wrap' }}>

        <TarjetaProducto />

        <TarjetaProducto />

        <TarjetaProducto />

      </div>

    </div>

  );}

4. Ejemplo 3: Navegación {#ejemplo3}-Componente Hijo:

function Navegacion() {

  return (

    <nav style={{

      backgroundColor: '#f8f8f8',

      padding: '10px 20px',

      display: 'flex',

      justifyContent: 'space-between',

      alignItems: 'center'

    }}>

      <div style={{ fontWeight: 'bold', fontSize: '20px' }}>MiLogo</div>

      <div>

        <a href="/" style={{ margin: '0 10px', textDecoration: 'none' }}>Inicio</a>

        <a href="/productos" style={{ margin: '0 10px', textDecoration: 'none' }}>Productos</a>

        <a href="/contacto" style={{ margin: '0 10px', textDecoration: 'none' }}>Contacto</a>

      </div>

    </nav>

  );}

Componente Padre:

function PaginaPrincipal() {

  return (

    <div>

      <Navegacion />

      <main style={{ padding: '20px' }}>

        <h1>Bienvenido a nuestro sitio</h1>

        <p>Contenido de la página principal...</p>

      </main>

    </div>

  );

}


5. Ejemplo 4: Perfil de Usuario {#ejemplo4}

Componente Hijo:

jsx

function TarjetaPerfil() {

  return (

    <div style={{

      border: '1px solid #eee',

      borderRadius: '10px',

      padding: '20px',

      width: '200px',

      textAlign: 'center'

    }}>

      <div style={{

        width: '80px',

        height: '80px',

        backgroundColor: '#ddd',

        borderRadius: '50%',

        margin: '0 auto 15px'

      }}></div>

      <h3 style={{ margin: '10px 0' }}>Juan Pérez</h3>

      <p style={{ color: '#666', margin: '5px 0' }}>Desarrollador</p>

      <p style={{ fontSize: '14px' }}>Amante de la programación y el café</p>

    </div>

  );

}

Componente Padre:

jsx

function SeccionEquipo() {

  return (

    <div>

      <h2>Nuestro Equipo</h2>

      <div style={{ display: 'flex', gap: '20px', justifyContent: 'center' }}>

        <TarjetaPerfil />

        <TarjetaPerfil />

        <TarjetaPerfil />

      </div>

    </div>

  );

}





6. Ejemplo 5: Lista de Características {#ejemplo5}-Componente Hijo:

function ItemCaracteristica() {

  return (

    <div style={{

      borderLeft: '3px solid blue',

      padding: '10px 15px',

      margin: '10px 0'

    }}>

      <h4 style={{ margin: '0 0 5px 0' }}>Característica Importante</h4>

      <p style={{ margin: 0, fontSize: '14px' }}>

        Descripción breve de esta característica y sus beneficios.

      </p>

    </div>

  );

}

Componente Padre:

jsx

function ListaCaracteristicas() {

  return (

    <div style={{ maxWidth: '400px' }}>

      <h3>Lo que ofrecemos:</h3>

      <ItemCaracteristica />

      <ItemCaracteristica />

      <ItemCaracteristica />

    </div>

  );

}


7. Componente Padre Principal (App.js) {#app}

// App.js - Componente PADRE principal

import React from 'react';

import Navegacion from './Navegacion';

import TarjetaProducto from './TarjetaProducto';

import TarjetaPerfil from './TarjetaPerfil';

import ListaCaracteristicas from './ListaCaracteristicas';

import PiePagina from './PiePagina';

import ListaProductos from './ListaProductos';

import SeccionEquipo from './SeccionEquipo';

import PaginaPrincipal from './PaginaPrincipal';


function App() {

  return (

    <div style={{ fontFamily: 'Arial, sans-serif' }}>

      {/* Ejemplo de navegación */}

      <PaginaPrincipal />

      

      <hr style={{ margin: '40px 0' }} />

      

      {/* Ejemplo de productos */}

      <ListaProductos />

      

      <hr style={{ margin: '40px 0' }} />

      

      {/* Ejemplo de equipo */}

      <SeccionEquipo />

      

      <hr style={{ margin: '40px 0' }} />

      

      {/* Ejemplo de características */}

      <ListaCaracteristicas />

      

      <hr style={{ margin: '40px 0' }} />

      

      {/* Pie de página al final */}

      <PiePagina />

    </div>

  );

}


export default App;

📁 Estructura de archivos recomendada:

text

src/

├── App.js (componente PADRE principal)

├── components/

│   ├── PiePagina.js

│   ├── TarjetaProducto.js

│   ├── Navegacion.js

│   ├── TarjetaPerfil.js

│   ├── ListaCaracteristicas.js

│   ├── ListaProductos.js (padre de TarjetaProducto)

│   ├── SeccionEquipo.js (padre de TarjetaPerfil)

│   └── PaginaPrincipal.js (padre de Navegacion)

└── index.js

🎯 Resumen de lo aprendido:

✅ Componentes básicos: Cada ejemplo tiene estructura simple
✅ Sin CSS externo: Usamos style inline para simplicidad
✅ Padre-Hijo: Cada ejemplo muestra la relación entre componentes
✅ Contenido estático: Textos fijos y predefinidos
✅ Reutilizable: Cada componente se puede usar múltiples veces

🚀 Para ejecutar:

  1. Crear proyecto:

bash

npx create-react-app tutorial-simple

cd tutorial-simple

  1. Crear carpeta components en src/

  2. Copiar cada componente en su archivo correspondiente

  3. Ejecutar:

bash

npm start

¡Listo! Tienes 5 ejemplos básicos de componentes React sin props, cada uno con su relación padre-hijo clara y con el mínimo código necesario para entender los conceptos fundamentales.



puedes volver hacer el siguiente tutorial con los mismos ejemplos pero mas chicos, sencillos y sintanto css, que sean sencillos y claros , ademas de incluir el componente padre y el hijo en cada ejemplo, este es el tutorial:


Comentarios

Publicar un comentario

Entradas más populares de este blog

9.3-Tutorial de Componentes React con Props -SSS

  Tutorial Sencillo de Componentes React con Props Ejemplo 1: Componente Saludo (simple) Componente Padre: App.js jsx function App () {    return (      < div >        < Saludo nombre = "Ana" edad ={ 25 } />        < Saludo nombre = "Carlos" edad ={ 30 } />      </ div >    ); } Componente Hijo: Saludo.js jsx function Saludo ( props ) {    return (      < div style ={{       border : '1px solid gray' ,       padding : '10px' ,       margin : '10px' ,       borderRadius : '5px'      }}>        < h3 > Hola { props . nombre }</ h3 >        < p > Tienes { props . edad } años ...
Leer más

9.6-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida En Componentes de Clase: javascript class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    }    // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    }    // 3. RENDER (montaje/act...
Leer más

9-Componentes en React-estado

Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } ******************************************** // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Co...
Leer más