¿Qué es React? ⚛️

React es una popular biblioteca de JavaScript creada por Facebook en 2013. Te permite desarrollar interfaces rápidas y fáciles de usar para aplicaciones web. Si alguna vez has usado Facebook, Instagram o Netflix, ¡ya te has encontrado con React! 🚀

La principal ventaja de React es enfoque por componentes. ¡Puedes crear pequeños bloques independientes (componentes) y reutilizarlos como si fueran piezas de LEGO! 🧱

¿Cómo empezar a programar en React? 💻

Para trabajar con React necesitarás:

• ✅ Node.js — entorno de ejecución de JavaScript (se puede descargar desde sitio web oficial).

• ✅ Editor de texto, por ejemplo Visual Studio Code.

• ✅ Instalar React con la ayuda de create-react-app.

¿Cómo instalar React? 🛠

Abre la terminal (o línea de comandos) y escribe:

npx create-react-app my-app
cd my-app
npm start

Este comando creará un nuevo proyecto en React y ejecutará un servidor local. ¡Ahora puedes desarrollar! 🚀

Características principales de React 🔧

• Componentes: Permiten dividir el código en pequeñas partes reutilizables.

• Estado (state): Gestiona los datos dentro de la aplicación.

• Eventos: Permiten reaccionar a las acciones del usuario.

• DOM virtual: Acelera la actualización de la interfaz.

Conceptos básicos de React 📚

1. Componentes 📦

Los componentes son la característica principal de React. Pueden ser funcionales o de clase.

Ejemplo de un componente simple:

function Welcome() {
  return <h1>Привет, React!</h1>;
}

Este componente se puede insertar en cualquier lugar de la aplicación.

2. JSX — JavaScript + HTML 📜

React utiliza JSX, que permite escribir HTML directamente dentro de JavaScript.

Ejemplo de código JSX:

const element = <h1>Привет, мир!</h1>;

JSX hace que el código sea más legible y fácil de usar.

3. Estado (state) 🎛

El estado le permite administrar datos dinámicos en el componente.

Ejemplo de un componente con state:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Cuando el usuario pulsa el botón, ¡el número aumenta! 🔢

4. Controladores de eventos 🖱

React facilita el trabajo con eventos, como los clics.

Ejemplo de controlador de eventos:

function Button() {
  function handleClick() {
    alert('Button pressed!');
  }

  return <button onClick={handleClick}>Нажми меня</button>;
}

5. Trabajar con efectos (useEffect) ⚙️

El gancho useEffect permite ejecutar el código cuando cambia el estado.

Ejemplo:

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <p>Прошло {seconds} секунд</p>;
}

Este componente cuenta los segundos desde el momento en que se carga la página. ⏳

Proyectos sencillos en React 💡

1. Contador 📊

Creamos un contador que aumenta cuando se pulsa el botón.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

2. Generador de números aleatorios 🎲

Cada vez que se pulse el botón, aparecerá un nuevo número.

import React, { useState } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <p>Число: {number}</p>
      <button onClick={() => setNumber(Math.floor(Math.random() * 100))}>Сгенерировать</button>
    </div>
  );
}

Conclusión 🎉

React es una herramienta poderosa para crear aplicaciones web modernas. Hemos visto los conceptos básicos: componentes, estado, eventos y efectos. ¡Ahora puedes empezar a desarrollar tus primeras aplicaciones React! 🚀

¡Lo más importante es la práctica! Cuanto más código escribas, mejor lo entenderás. ¡Así que siéntete libre de experimentar y crear tus propios proyectos! ¡Buena suerte aprendiendo React! 😊