1. Entorno de Desarrollo

Para instalar React y comenzar un proeycto, ejecuta estos comandos en tu terminal:

npm install create-react-app -g
create-react-app proyecto-react
cd proyecto-react
npm start

Estructura del Proeycto:

proyecto-react
    - node_modules
    - public
        - favicon.ico
        - index.html
        - manifest.json
    - src
        - App.css
        - App.js
        - App.test.js
        - index.css
        - index.js
        - logo.svg
        - serviceWorker.js
    - .gitignore
    - package.json
    - package-lock.json
    - README.md
    - yarn.lock

Archivo src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Archivo src/App.js:

function App() {
  return (
    <div className="App">
      ¡Hola React!
    </div>
  );
}
export default App;
</div>

2. Sintaxis JSX
-------
JSX es una sintaxis que combina HTML y JavaScript, permitiendo renderizar componentes React de manera más intuitiva.

Ejemplo de Uso:

import React from "react";

var nombre = "Ejemplo"; var precio = 100; var imagenUrl = "ruta/de/imagen.jpg"; var estado = true; var items = [ { id: 1, titulo: "Item 1", descripcion: "Descripción del Item 1" }, { id: 2, titulo: "Item 2", descripcion: "Descripción del Item 2" } ];

function ComponenteJSX() { return (

{nombre} Precio: {precio.toLocaleString()}

Estado: {estado ? "Activo" : "Inactivo"}

{items.map(item => ( - ### {item.titulo}

{item.descripcion} ))}

); } export default ComponenteJSX;

3. Componentes

3.1 Creación de Componentes

Función:

import React from "react";

function ComponenteFuncional(props) {
  console.log(props);
  return (
    <div className="contenedor">
      <h3>Componente Funcional</h3>
      <p>Mensaje: {props.mensaje}</p>
    </div>
  );
}
export default ComponenteFuncional;
</div>

#### Clase:

import React from "react";

class ComponenteClase extends React.Component { constructor() { super(); this.nombre = "Componente de Clase"; this.state = { numero: 0 }; }

render() { return (

{this.nombre} Estado: {this.state.numero}

); } } export default ComponenteClase;

3.2 Comparación de Métodos

1. Componentes de Clase pueden manejar estado (state), mientras que los Funcionales no.
2. Componentes de Clase tienen ciclos de vida, los Funcionales no.
3. Los datos del padre se pasan como props en ambos casos, pero se acceden de manera diferente.
4. Componentes Funcionales son más eficientes y recomendados para la mayoría de los casos.

3.3 Notas Importantes

// 1. Nombre de los componentes debe comenzar con mayúscula
// 2. Se pueden reutilizar nombres de elementos HTML en mayúsculas
// 3. Evita usar camelCase en los nombres de componentes
// 4. Un componente debe tener un solo nodo raíz en su JSX

4. Manejo de Eventos

import React from "react";

class ComponenteEventos extends React.Component {
  manejarEvento() {
    console.log("Evento ejecutado");
  }

  sumarNumeros(a, b) {
    console.log(a + b);
  }

  capturarEvento(e) {
    console.log(e);
  }

  prevenirDefault(e) {
    e.preventDefault();
    console.log("Evento por defecto prevenido");
  }

  render() {
    return (
      <div className="contenedor">
        <h3>Manejo de Eventos</h3>
        
        <button onClick={this.manejarEvento}>EjecutarEvento</button>
        <button onClick={() => this.sumarNumeros(5, 10)}>Sumar</button>
        
        <form onSubmit={this.capturarEvento}>
          <input type="text" name="nombre" />
          <button type="submit">Enviar</button>
        </form>
        
        <div className="padre" onClick={() => this.manejarEvento()}>
          <div className="hijo" onClick={(e) => {
            e.stopPropagation();
            console.log("Evento hijo");
          }}>Detener Propagación</div>
        </div>
      </div>
    );
  }
}
export default ComponenteEventos;
</div>

5. Estado (State)
-------

import React from "react";

class ComponenteEstado extends React.Component { constructor() { super(); this.state = { nombre: "Componente", edad: 25, lista: [ { id: 1, titulo: "Item 1" }, { id: 2, titulo: "Item 2" } ], numero: 0 }; }

incrementarNumero() { this.setState({ numero: this.state.numero + 1 }); }

render() { const { nombre, edad, lista, numero } = this.state;

return (

Manejo de Estado Nombre: {nombre} Edad: {edad}

{lista.map(item => ( - {item.titulo} ))}

Numero: {numero} this.incrementarNumero()}>Incrementar

); } } export default ComponenteEstado;

6. Compatibilidad con Eventos en JavaScript

Parar la Propagación de Eventos

function pararPropagacion(event) {
  event = event || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}

Prevenir el Comportamiento por Defecto

function prevenirDefault(event) {
  event = event || window.event;
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

Capturar y Manejar Eventos

function capturarEvento(event) {
  event = event || window.event;
  console.log("Evento capturado:", event);
}