introduccion a react

La principal diferencia entre React y HTML es que ==HTML es un lenguaje de marcado para la estructura y contenido de las páginas web, mientras que React es una biblioteca de JavaScript para construir interfaces de usuario interactivas==. HTML define la estructura básica de una página, mientras que React permite crear componentes reutilizables que pueden manejar la lógica y el estado de la interfaz. 

Aquí hay más detalles sobre las diferencias:

• HTML:
  • Es un lenguaje de marcado estático. 
  • Define la estructura y el contenido de una página web usando etiquetas (por ejemplo, <p>, <div>, <img>). 
  • No puede manejar la interactividad ni el estado por sí solo. 
  • Requiere actualizaciones completas de la página para reflejar cambios. 
• React:
  • Es una biblioteca de JavaScript para construir interfaces de usuario. 
  • Utiliza componentes reutilizables que encapsulan la interfaz y la lógica. 
  • Permite la creación de interfaces dinámicas y reactivas. 
  • Actualiza solo los elementos que cambian, lo que mejora el rendimiento. 
  • Se basa en JSX (una extensión de JavaScript que permite escribir HTML dentro de JavaScript) para definir la estructura de los componentes. 
• Relación entre ambos:
  • React utiliza HTML (a través de JSX) para definir la estructura de sus componentes. 
  • React se ejecuta en el navegador y utiliza el DOM (Document Object Model) para renderizar la interfaz, que se basa en el HTML generado. 
• En resumen, React construye interfaces dinámicas utilizando componentes que a su vez pueden contener HTML (vía JSX).  En pocas palabras, HTML es la base, el lenguaje de marcado, mientras que React es una herramienta para construir interfaces más complejas y dinámicas sobre esa base. 

Este video explica las diferencias clave entre HTML y React en atributos:

React JS – Conceptos Básicos

---

1. Introducción a JSX

002 Introducción a JSX
JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que permite escribir código similar a HTML dentro de archivos .js o .jsx. Se utiliza principalmente con React para definir la estructura visual de los componentes.

• Aunque se parece a HTML, JSX no es un lenguaje de marcado; es una extensión de JavaScript.

• Permite incrustar expresiones de JavaScript dentro de las etiquetas utilizando {}.

---

2. ¿Qué es React JS?

03 Conceptos básicos de React JS
React JS es una biblioteca de JavaScript de código abierto desarrollada por Meta, diseñada para construir interfaces de usuario de forma declarativa y eficiente.

DOM real vs DOM virtual:

• DOM real: Es la representación en memoria de la estructura HTML de una página. Es manipulable directamente por JavaScript y el navegador.

• DOM virtual: Es una copia ligera del DOM real utilizada por React. Permite identificar y aplicar únicamente los cambios necesarios al DOM real, lo que mejora el rendimiento.

---

3. Crear una aplicación con React

`004 Creando nuestra primera app en React JS 2025-05-25

npx create-react-app mi-primera-react-app

---

4. Estructura básica de un proyecto en React

`005 Estructura de React JS 2025-05-25

• Contiene carpetas como src, public, node_modules.

• El punto de entrada por defecto es src/index.js.

• Los componentes se organizan dentro de src/components (opcionalmente).

---

5. Componentes en React

006 Nuestro primer componente en React JS
En React, los componentes son bloques reutilizables que definen partes de la UI. Pueden crearse como:

🔹 Componentes funcionales (usando rfce)

function MiComponente(props) {
  return (
    <div>
      <h1>{props.titulo}</h1>
      <p>Este es mi componente.</p>
    </div>
  );
}

export default MiComponente;

🔹 Componentes de clase (usando rccp)

import React from 'react';

class MiComponente extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.titulo}</h1>
        <p>Este es mi componente.</p>
      </div>
    );
  }
}

export default MiComponente;

🔹 Uso de componentes

import MiComponente from './MiComponente';

function App() {
  return (
    <div>
      <MiComponente titulo="Mi Componente" />
    </div>
  );
}

---

6. Props en React

📹 Archivos:

• `007 ¿Qué son los Props de React

• `008 Pasando props básicos entre componentes

• `009 Pasando variables y objetos entre componentes por los props

🔹 Qué son las props:

• Son propiedades que se pasan de un componente padre a un componente hijo.

• Son inmutables dentro del componente hijo.

• Permiten reutilizar componentes de forma flexible.

🔹 Ejemplo:

function ComponentePadre() {
  const nombre = "Juan";
  const datos = { nombre: "Maria", edad: 30 };

  return <ComponenteHijo nombre={nombre} datos={datos} />;
}

function ComponenteHijo(props) {
  return (
    <div>
      <h1>Hola, {props.nombre}!</h1>
      <p>Datos: {props.datos.nombre} - {props.datos.edad}</p>
    </div>
  );
}

---

7. Pasar funciones como props

`010 Pasando funciones entre componentes por los props

const user = { nombre: "jose", edad: 15, color: "azul" };

const saludarFn = nombre => {
  console.log("hola, " + nombre);
};

return (
  <BotonSaludar funcionSaludar={saludarFn} datos={user} />
);

Componente hijo:

function BotonSaludar(props) {
  const { funcionSaludar, datos } = props;

  return (
    <button onClick={() => funcionSaludar(datos.nombre)}>
      Saludar
    </button>
  );
}

---

8. Desestructuración de props

`011 El uso de la Asignación por Destructuring La desestructuración permite extraer propiedades de objetos directamente en variables:

const { datos, saludarFn } = props;
const { nombre } = datos;

<button onClick={() => saludarFn(nombre)}>Saludar</button>

---

9. Props por defecto

012 Props por defecto
Puedes definir valores por defecto para props si no se pasan:

const { datos, saludarFn } = props;
const { nombre = "Anónimo" } = datos;

<button onClick={() => saludarFn(nombre)}>Saludar</button>

---

10. Template Strings (Cadenas plantilla)

`013 Template Strings Son una característica de ES6+ que permiten interpolación de variables:

const saludarFn = nombre => {
  console.log(`Hola ${nombre}`);
};

Se usan comúnmente en JSX para insertar valores dinámicos en el marcado.

---

11. React Developer Tools

`014 Usando React Developer Tools Extensión para Chrome y Firefox que permite:

• Ver estructura de componentes.

• Inspeccionar props y estado.

• Detectar problemas de rendimiento.

---

12. Hook de estado: useState

`015 Hook de estado - useState Permite usar estado en componentes funcionales.

import { useState } from 'react';

const [stateCar, setStateCar] = useState(false);

const encenderApagar = () => {
  setStateCar(prev => !prev);
};

return (
  <>
    <button onClick={encenderApagar}>Encender/Apagar</button>
    <h3>El coche está: {stateCar ? "encendido" : "apagado"}</h3>
  </>
);

---

13. Hook de efecto: useEffect

`016 Hook de efecto - useEffect Permite ejecutar efectos secundarios como llamadas a APIs, suscripciones o manipulaciones del DOM.

const [contar, setContar] = useState(0);

useEffect(() => {
  console.log(`Total: ${contar}`);
}, [contar]);

const incrementar = () => {
  setContar(prev => prev + 1);
};

---

Documentacion de React

• Describing the UI

  • Your First Component
    • Resumen – Your First Component (Tu primer componente en React) En React, los componentes son funciones de JavaScript que devuelven una estructura JSX y representan bloques reutilizables de interfaz de usuario. Son el núcleo del desarrollo en React y permiten combinar HTML, CSS y lógica de manera modular. Un componente se define como una función cuyo nombre debe comenzar con mayúscula y que retorna JSX, como por ejemplo un