React Hooks useContext con createContext

av952 — Thu, 15 Sep 2022 15:17:10 +0000

Para poder hacer uso de este hook de React es necesario implementar 3 sencillos pasos. Lo primero sería crear un archivo donde vivirá el contexto para toda nuestra aplicación, para este ejemplo lo llamaremos Contexto.jsx.
Hacemos la importación de los hooks a utilizar para este ejemplo

import {createContext,useContext,useState} from 'react'

Definimos el contexto

const Appcontext = createContext({
  items:[],
  create:()=>{}
})

Dentro estamos nombrando las operaciones que van a vivir dentro del contexto las cuales van a poder ser accedidas desde los otros componentes.

Implementación

export default function Contexto({children}){
  const [items,setItems]= useState([
    {
      id: 0,
      title: 'empezar'
    },
    {
      id:1,
      title: 'terminar'
    }
  ])

  function create(item){
    setItems([...items,item])
  }

  return(
    <AppContext.provider
    value={{
      items,
      create,
    }}
    >
      {children}
    </AppContext.provider>
  )
}

Va a recibir como prop la palabra children que hace referencia a los hijos que va a contener en este caso la función contexto.
Dentro del mismo archivo que estamos trabajando vamos a crear la función que va a contener los metodos y operaciones que se quieran llevar a cabo y que serán ejecutadas desde los componentes que necesiten acceder a ellas.
Por ultimo en el return hacemos el llamado a para pasar como props la información del componnete y el quien dibujara los elementos contenidos.

Adicionalmente podemos crear una función que haga el llamado a el contexto para con esto únicamente tener que invocarla dentro de los componnetes que necesiten acceder a la información.

export function useAppContext(){
  return useContext(Appcontext)
}

Ahora para poder hacer uso de este Hook dentro del componente APP.jsx hacemos la importación del componnete Contexto.jsx y envolvemos dentro de este al componente que queramos que tenga acceso a lo establecido dentro de Contexto.jsx, en este caso será el componente Todo

import Todo from './components/Todo'
import {Contexto} from './components/Contexto'

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

  return (
    <div className="App">
      <h2>Provider</h2>
      <Contexto>
        <Todo/>
      </Contexto>
    </div>
  )
}

export default App

Para finalizar en el componente Todo.jsx importamos el useAppContext para poder acceder y modificar los elementos del contexto.

import { useAppContext } from '../utils/Contexto'

export const Todo = () => {
    const contexto = useAppContext()
  return (
    <div>
     <p>conexto.items[0]</p>
    </div>
  )
}

👽 Espero sea útil esta información, no olvides dejar tu comentario y dar like :)👽

👀👀👀👀También pueden seguirme en tiktok👀👀👀👀

Github-pages usando gh-pages y Vite

av952 — Wed, 14 Sep 2022 15:24:49 +0000

Si utilizas Vite para generar tus páginas con React, tienes que saber que se requiere un proceso diferente para poder subir nuestras páginas en github pages usando la alternativa de npm gh-pages, y hoy aprenderás como hacerlo.

Lo primero será instalar gh-pages

npm install gh-pages --save-dev

Según la documentación si tu repositorio es del tipo https://github.com/<USERNAME>/<REPO> lo primero seria dirigirnos a nuestro archivo vite.config.js y añadir `la propiedad base con el nombre del repositorio.


export default defineConfig({
  base:'/REPO/',
  plugins: [react()]
})

Luego creamos un nuevo archivo en la carpeta raíz llamado deploy.sh donde pegaremos el siguiente frarmento de código

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -b main
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

Y modificamos la ultima linea cambiando el USERNAME Y REPO

git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-`

Dentro de el archivo package.json deberémos agregar el los scripts "deploy": "gh-pages -d dist" para hacer el deploy de forma más sencilla.

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
},

Ahora para terminar tendremos que ejecutar:

git add .
git commit -m 'gh-pages deploy'

npm run build

Con el último comando generaremos una nueva carpeta llamada dist la cual tiene toda la información de nuestra aplicación para poder ser subida a github pages. Por ultimo en la consola

npm run deploy

Si has seguido los pasos en la consola verás que sale un mensaje diciendo Published y en tu pagina de github abajo a la derecha te saldrá lo siguiente.

En caso de que algo mal ocurra y te diga:

fatal: Una rama llamada 'gh-pages' ya existe.latten

Puedes probar con este comando para eliminarla (en linux funciona bien).

rm -rf node_modules/.cache/gh-pages

DEV Community: av952

React Hooks useContext con createContext

👽 Espero sea útil esta información, no olvides dejar tu comentario y dar like :)👽

Github-pages usando gh-pages y Vite