Construyendo Tu Primera Aplicación React

Un tutorial paso a paso para crear una aplicación simple de React, perfecto para estudiantes intermedios en nuestro programa de codificación práctica.

Preparación del Entorno

Antes de comenzar, asegúrate de tener Node.js instalado en tu sistema. Utilizaremos Create React App para configurar rápidamente nuestro proyecto.

npx create-react-app mi-primera-app-react
cd mi-primera-app-react
npm start

Creando tu Primer Componente

Vamos a crear un componente simple llamado Saludo. Este componente mostrará un mensaje de bienvenida personalizado.

// src/Saludo.js
import React from 'react';

function Saludo(props) {
  return <h1>Hola, {props.nombre}!</h1>;
}

export default Saludo;

Utilizando el Componente

Ahora, vamos a utilizar nuestro componente Saludo en el componente principal App.

// src/App.js
import React from 'react';
import Saludo from './Saludo';

function App() {
  return (
    <div className="App">
      <Saludo nombre="Estudiante" />
    </div>
  );
}

export default App;

Añadiendo Estado

Vamos a mejorar nuestra aplicación añadiendo un estado para cambiar dinámicamente el nombre del saludo.

// src/App.js
import React, { useState } from 'react';
import Saludo from './Saludo';

function App() {
  const [nombre, setNombre] = useState('Estudiante');

  return (
    <div className="App">
      <Saludo nombre={nombre} />
      <input 
        type="text" 
        value={nombre} 
        onChange={(e) => setNombre(e.target.value)}
      />
    </div>
  );
}

export default App;

Conclusión

¡Felicidades! Has creado tu primera aplicación React con componentes interactivos y estado. Este es solo el comienzo de tu viaje en el aprendizaje basado en proyectos con React.

Continúa explorando conceptos más avanzados como el manejo de eventos, ciclos de vida de componentes, y la integración con APIs para construir aplicaciones más complejas y robustas.