Reporte de Aprendizaje: Fundamentos de React y Componentes

Temas Aprendidos: Definiciones y Procedimientos

1. La Función de Renderizado en React

2. ¿Qué es un Componente en React?

3. JSX (JavaScript XML)

4. TypeScript en React

5. Estilos en React (CSS)

6. Props (Propiedades)

7. Children

Ejercicios de Laboratorio (Ejemplos Prácticos)

1. Creación de un Componente de Función Básico

Procedimiento:

  1. Crear un archivo src/components/ComponentHeader.jsx.
  2. Digitar el siguiente código:

// src/components/ComponentHeader.jsx
import React from 'react';

function ComponentHeader() {
    return (
        <h1>¡Hola desde ComponentHeader!</h1>
    );
}

export default ComponentHeader;

Invocación en App.jsx:


// src/App.jsx
import React from 'react';
import ComponentHeader from './components/ComponentHeader';

function App() {
    return (
        <div>
            <ComponentHeader />
        </div>
    );
}

export default App;

2. Uso de JSX: Inserción de Variables y Atributos

Procedimiento:


import React from 'react';

function MyComponent() {
    const usuario = 'Jaime';
    const myId = 'titulo-principal';

    return (
        <div>
            <h1 id={myId}>Bienvenido {usuario} !!!</h1>
            <p>El año actual es: {2000 + 24}</p>
        </div>
    );
}

export default MyComponent;

3. Paso de Datos con Props (Padre a Hijo)

Procedimiento:

Componente Hijo (ChildComponent.jsx):


// src/components/ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h3>Datos recibidos del padre:</h3>
            <p>Nombre: {props.nombre}</p>
            <p>Mensaje: {props.mensaje}</p>
        </div>
    );
}

export default ChildComponent;

Componente Padre (ParentComponent.jsx):


// src/components/ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const userName = 'Alice';
    const greeting = '¡Hola desde el componente padre!';

    return (
        <div>
            <h2>Componente Padre</h2>
            <ChildComponent nombre={userName} mensaje={greeting} />
        </div>
    );
}

export default ParentComponent;

4. Renderizado Condicional con Operador Ternario

Procedimiento:


import React from 'react';

function ConditionalRender({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn ? (
                <h2>Bienvenido de nuevo!</h2>
            ) : (
                <h2>Por favor, inicia sesión.</h2>
            )}
        </div>
    );
}

export default ConditionalRender;

5. Renderizado de Lista con map()

Procedimiento:


import React from 'react';

function StudentList() {
    const students = [
        { id: 1, name: 'Ana', city: 'Lima' },
        { id: 2, name: 'Luis', city: 'Arequipa' },
        { id: 3, name: 'Marta', city: 'Cusco' },
        { id: 4, name: 'Pedro', city: 'Trujillo' }
    ];

    return (
        <div>
            <h2>Lista de Estudiantes</h2>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Ciudad</th>
                    </tr>
                </thead>
                <tbody>
                    {students.map(student => (
                        <tr key={student.id}>
                            <td>{student.id}</td>
                            <td>{student.name}</td>
                            <td>{student.city}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default StudentList;

Resultados y Reflexión Final

¿Qué aprendí y cómo lo hice?

Durante esta semana, he adquirido una comprensión sólida de los fundamentos de React, centrándome en la creación y manipulación de componentes. Aprendí que React no manipula directamente el DOM real de forma constante, sino que utiliza un DOM Virtual, lo que optimiza significativamente el rendimiento al minimizar las actualizaciones directas al navegador. Este concepto de "Diffing" y "Reconciliación" es clave para entender la eficiencia de React.

La creación de componentes, tanto de clase como de función, fue un pilar fundamental. Descubrí la simplicidad y concisión de los componentes de función, especialmente al trabajar con JSX. JSX, aunque inicialmente parece una mezcla extraña de HTML y JavaScript, rápidamente se reveló como una herramienta poderosa para construir interfaces de usuario de manera declarativa y legible. La capacidad de incrustar expresiones JavaScript directamente en el marcado HTML es increíblemente útil.

También exploré las diferentes formas de aplicar estilos, desde hojas de estilo CSS tradicionales hasta módulos CSS y estilos en línea, lo que me da flexibilidad para organizar y encapsular los estilos de mis componentes. La introducción a Tailwind CSS fue un plus, mostrando cómo un framework de utilidad puede acelerar el desarrollo de UI.

Finalmente, el concepto de Props y Children fue crucial para entender cómo los componentes se comunican entre sí y cómo se pueden construir interfaces complejas a partir de componentes más pequeños y reutilizables. Los ejercicios prácticos de pasar datos entre componentes padre e hijo, y el renderizado condicional y de listas, consolidaron mi comprensión de estos conceptos.

El aprendizaje se llevó a cabo a través de la lectura detallada del material proporcionado, la experimentación directa con el código en un entorno de desarrollo (Vite), y la resolución de los ejercicios propuestos. La práctica constante de escribir y depurar código fue esencial para asimilar los conceptos.

Reflexión Metacognitiva

Al reflexionar sobre mi proceso de aprendizaje de React, me doy cuenta de la importancia de la descomposición de problemas. React, con su enfoque basado en componentes, naturalmente me empuja a pensar en la UI como una colección de piezas más pequeñas y manejables. Esto no solo facilita el desarrollo, sino que también mejora la mantenibilidad y la reutilización del código.

Un aspecto que me resultó particularmente interesante fue la abstracción que React ofrece sobre la manipulación directa del DOM. Antes, la interacción con el DOM podía ser tediosa y propensa a errores. React, al gestionar el DOM Virtual y las actualizaciones de manera eficiente, me permite centrarme en "qué" quiero que se muestre en la UI, en lugar de "cómo" manipular los elementos del DOM. Esto representa un cambio significativo en la mentalidad de desarrollo web.

También he notado cómo la práctica constante y la experimentación son fundamentales. No basta con leer la teoría; es necesario escribir código, ver los errores, entender por qué ocurren y cómo corregirlos. Este ciclo de "intentar, fallar, aprender y corregir" es donde el verdadero aprendizaje ocurre. La capacidad de aplicar conceptos como props, renderizado condicional y bucles map en escenarios prácticos me ha dado confianza en mi habilidad para construir aplicaciones React.

En resumen, este módulo ha sido una inmersión profunda en los fundamentos de React, proporcionándome las herramientas y la comprensión necesarias para empezar a construir interfaces de usuario modernas y eficientes. La metacognición me ha permitido identificar mis estrategias de aprendizaje más efectivas y cómo puedo aplicarlas en futuros desafíos tecnológicos.

Bibliografía

Volver a Cuadernos