Categoría: JavaScript

crear Contexto: (Contexto.js)

import { createContext } from "react";

const Contexto=createContext("valor por defecto");
export default Contexto;

Proveer de contexto: (App.js)

import './App.css';
import React from 'react';
import ComPadre from './componentes/ComPadre';
import Contexto from './componentes/Contexto';
function App() {

  return (
    <div className="App">
      <Contexto.Provider value="Hola contexto">
        <ComPadre texto="Hola" />
      </Contexto.Provider>
      
    </div>
  );
}

export default App;

Arbol de componentes: (Compadre,comhijo1,comhijo2)

import ComHijo1 from "./ComHijo1";
function ComPadre({ texto }) {

    return <ComHijo1 texto={texto}/>;
}

export default ComPadre;

import ComHijo2 from "./ComHijo2";
function ComHijo1({ texto }) {

    return <ComHijo2 texto={texto}/>;
}

export default ComHijo1;

import ComHijo3 from "./ComHijo3";
function ComHijo2({ texto }) {

    return <ComHijo3 texto={texto}/>;
}

export default ComHijo2;

Consumir el contexo (ComHijo3)

import { useContext } from "react";
import Contexto from "./Contexto";
function ComHijo3({ texto }) {
    const textoContexto = useContext(Contexto);
    console.log(textoContexto)
    return (<>
        <h1>{texto}</h1>
        <p> Esto viene desde las propiedades por goteo</p>
        <h1>{textoContexto}</h1><p> Esto viene del contexto</p>
    </>)
}

export default ComHijo3;

import Cabecera from './Cabecera';
import Boton from './Boton';

function Bloque({ texto }) {
    const pinchar=()=>{
        console.log("Has pinchado el botón "+texto)
    }
    // Paso el evento del padre al hijo
    return <div>
        <Cabecera texto={texto} />
        <Boton texto="Pincha aquí" evento={pinchar}/> 
    </div>;
}

export default Bloque;

function Boton({ texto,evento }) {

    return <button onClick={evento}>{texto}</button>;
}

export default Boton;

Pasar la información del padre al hijo
En bloque pasamos el texto al botón

import Cabecera from './Cabecera';
import Boton from './Boton';

function Bloque({ texto }) {

    // Paso la información del padre al hijo
    return <div>
        <Cabecera texto={texto} />
        <Boton texto="Pincha aquí" bloque={texto}/> 
    </div>;
}

export default Bloque;

function Boton({ texto,bloque }) {

    return <button onClick={()=>pinchar(bloque)}>{texto}</button>;
}
const pinchar=(texto)=>{
    console.log("Has pinchado el botón "+texto)
}
export default Boton;

App.js

import './App.css'; // Estilos propios del componente 
import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta

const foo=(elemento)=>{
  console.log("Has pinchado en " + elemento.alt)
    if (elemento.alt === "Marie Curie") {
      elemento.src = "/img/ok.jpg"
    } 
}
function App() {

  // Devuelvo un div con las tarjetas que quiera
  // la Tarjeta tiene unas propiedades que se pasan al componente
  // Pasamos el nombre y la url de la imagen
  return (
    <div className="App">
      <h1>¿Quien descubrió el radio?</h1>
      <Tarjeta nombre="Einstein" correcta="Marie Curie" foo={foo}/>
      <Tarjeta nombre="Marie Curie" correcta="Marie Curie"  foo={foo}/>
      <Tarjeta nombre="Schrodinger" correcta="Marie Curie" foo={foo}/>
    </div>
  );
}

export default App;

Tarjeta.js

import Foto from './Foto'; // Importo Foto
import Cabecera from './Cabecera'; // Importo Cabecera


// Tarjeta le paso las propiedades nombre y url
// Esto va dentro de props pero uso destructuring
function Tarjeta({nombre, correcta,foo}) {
    // En el div es donde pongo la clase, porque es elemento html
    // Uso los componentes Cabecera y Foto
    return (
        <div className="tarjeta">
            <Cabecera  nombre={nombre} correcta={correcta}/>
            <Foto descripcion={nombre}  foo={foo}/>
        </div>
    )
}

export default Tarjeta;

Foto.js

function Foto({descripcion, foo}) {
    let ruta='/img/'
    let nombre=descripcion.toLowerCase().replaceAll(" ","")+".jpg"
    return <img onClick={(evt)=>{foo(evt.target)}} className="foto" src={ruta+nombre} alt={descripcion} />
}

export default Foto;

App.js

import './App.css'; // Estilos propios del componente 
import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta


function App() {

  // Devuelvo un div con las tarjetas que quiera
  // la Tarjeta tiene unas propiedades que se pasan al componente
  // Pasamos el nombre y la url de la imagen
  return (
    <div className="App">
      <h1>¿Quien descubrió el radio?</h1>
      <Tarjeta nombre="Einstein" correcta="Marie Curie" />
      <Tarjeta nombre="Marie Curie" correcta="Marie Curie"/>
      <Tarjeta nombre="Schrodinger" correcta="Marie Curie"/>
    </div>
  );
}

export default App;

Tarjeta.js

import Foto from './Foto'; // Importo Foto
import Cabecera from './Cabecera'; // Importo Cabecera


// Tarjeta le paso las propiedades nombre y url
// Esto va dentro de props pero uso destructuring
function Tarjeta({nombre, correcta}) {
    // En el div es donde pongo la clase, porque es elemento html
    // Uso los componentes Cabecera y Foto
    return (
        <div className="tarjeta">
            <Cabecera  nombre={nombre} correcta={correcta}/>
            <Foto descripcion={nombre}/>
        </div>
    )
}

export default Tarjeta;

Cabecera.js

const comprobar = (objeto, correcta) => {
    
    console.log("Has pinchado en " + objeto.innerHTML)
    if (objeto.innerHTML === correcta) {
        objeto.innerHTML = "Muy BIEN"
    } else {
        objeto.innerHTML = "INCORRECTO"
    }
}

function Cabecera({ nombre, correcta }) {

    return <h1 onClick={(event) => { comprobar(event.target, correcta) }} >{nombre}</h1>;
}

export default Cabecera;