Header Ads Widget

Ticker

6/recent/ticker-posts

Uso de la API de contexto de React.js

 


React.js se ha convertido en uno de los marcos más populares y adoptados para trabajar con JavaScript. La encuesta de desarrolladores de Stack Overflow de 2020 encontró que React.js es el segundo marco web más popular entre los desarrolladores.

Los desarrolladores aprecian la capacidad de reutilización de React y el énfasis en los componentes, que se pueden vincular fácilmente o conectar en proyectos separados. Esto hace que React sea fácil de aprender y rápido de implementar.

React sigue un enfoque de arriba hacia abajo para el enrutamiento de datos. Este enfoque puede resultar ligeramente ineficaz para determinadas aplicaciones que necesitan una estructura más universal, como la interfaz de usuario o las preferencias locales. Aquí es donde entra en juego React Context, lo que simplifica la configuración de parámetros y variables globales.

Aún mejor, tiene una API.

En este tutorial, le mostraremos cómo poner en marcha la API React Context para que pueda probarla en algunos de sus propios proyectos de desarrollo.

Su guía para reaccionar API de contexto

El objetivo principal de React es evitar que el código se vuelva prohibitivamente complejo. Si tuviera que configurar cada componente individualmente, su código rápidamente se volvería difícil de manejar. Los parámetros globales ayudan a mantener esa complejidad al mínimo.

En primer lugar, si va a utilizar la API de contexto  , deberá comprender los ganchos, ya que son predominantemente los que utiliza la API de contexto. Según la documentación de React, los ganchos son “una nueva adición en React 16.8. Te permiten usar el estado y otras funciones de React sin escribir una clase ".

Por el bien de este tutorial, nos centraremos principalmente en dos ganchos: useStateuseContextEchemos un breve vistazo a cada uno antes de profundizar en la API de contexto.

useState Hook

El gancho useState lo hace para que pueda usar estados dentro de sus componentes. Acepta el valor inicial como único argumento y luego devuelve una matriz con dos elementos. La primera es la variable de estado y la segunda es una función que puede utilizar para modificar la variable de estado.

Por ejemplo:

Import React, {useState} from "react";

Function SampleComponent(){
Const [count, setCount] = useState(0);
}

En este ejemplo, countes la variable de estado y setCountes la función que actualiza la variable de recuento.

useContext Hook

El useContextgancho hace que pueda consumir el valor de una variable de contexto. Para ver un breve ejemplo del useContextgancho en acción, considere el siguiente código:

Const Main = () => {
Const theme = useContext(ThemeContext);
Const currentTheme = appTheme[theme];
return(
<main style = {{
Padding: "1rem",
backgroundColor: `$currentTheme.backgroundColor}`,
Color: `{$currentTheme.textColor}`,

}}>

<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<button>This is a button.</button>
</main>
       };
}

Export default Main;

En este ejemplo, todo esto es necesario para usar el useContextgancho y luego pasar la ThemeContextvariable a un argumento. Ahora, pongamos estos conceptos en acción para que pueda tener una idea de cómo funciona la API de contexto en la vida real.

Construyendo un alternador de temas usando la API de contexto

Por el bien de este tutorial, vamos a crear una 'versión ligera' y una 'versión oscura' de una aplicación React. Para que esto suceda, cada componente debe poder acceder al tema actual.

Sin la API de contexto, tendría que diseñar cada componente usando una variable de 'estado':

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <Text theme= "blue" />
      <h1>{theme}</h1>
    </div>
  );
}

function Text({theme}) {
return(
  <h1 style = {{
     color: `${theme}`
  }}>{theme}</h1>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Esto crea un componente llamado 'Texto' que genera un encabezado h1. El encabezado se puede alternar entre rojo y azul usando el calificador de estado.

Ahora echemos un vistazo a cómo se puede hacer esto con los enlaces de la API de contexto. Empezaremos con el useStategancho:

const [theme, setTheme] = React.useState("blue");

Ahora creemos un botón que usará para alternar entre los temas:

const onClickHandler = () => {
  setTheme();
}

Ahora creemos el tema rojo:

setTheme( theme === "red"? "blue": "red");

Ahora puede agregar el botón a la aplicación:

<button onClick = {onClickHandler}>Change theme</button>

Ahora puede modificar la entrada del tema, que se conoce como propsReact, con el estado del tema:

<Text theme={theme}/>

La aplicación, hasta ahora, debería verse así:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


function App() {
  const[theme, setTheme] = React.useState("red");

  const onClickHandler = () => {
  setTheme( theme === "red"? "blue": "red");
  }

  return (
    <div>
      <Text theme={theme}/>
      <button onClick = {onClickHandler}>Change theme</button>
    </div>
  );
}

function Text({theme}) {
return(
  <h1 style = {{
     color: `${theme}`
  }}>{theme}</h1>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ahora debería poder alternar entre los dos temas. En este ejemplo, sin embargo, ya está empezando a ver cómo podría volverse complicado implementar algunos temas o variables a nivel mundial. Aquí es donde entra en juego la API de contexto.

Introducción a la API de contexto

La API de contexto pasa parámetros a través de cada componente en un árbol para que no tenga que diseñar cada componente individualmente.

Veamos un ejemplo rápido para darte una idea de cómo se ve:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


function App() {
  const[theme, setTheme] = React.useState("red");

  const onClickHandler = () => {
  setTheme( theme === "red"? "blue": "red");
  }

  return (
    <div>
      <Text theme={theme}/>
      <button onClick = {onClickHandler}>Change theme</button>
    </div>
  );
}

function Text({theme}) {
return(
  <h1 style = {{
     color: `${theme}`
  }}>{theme}</h1>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

En este ejemplo, el tema de la aplicación se especifica usando un accesorio en parentComponentllamado themeEsto luego se pasa al tema Niño y luego al tema Nieto. Esto podría salirse de control para componentes profundamente anidados.

Ahora veamos cómo se vería usando la API de contexto.

En este ejemplo, ThemeTogglerserá un componente separado. Esto cambiará el tema de la aplicación React usando Context.

Primero, querrás crear una nueva aplicación React. Por el bien de este tutorial, llamamos al nuestro React_tutorialAbra una instancia de Terminal o el símbolo del sistema y navegue hasta su carpeta de programación. Una vez que esté allí, cree una carpeta para el proyecto. También llamamos a nuestra carpeta React_tutorial.

En la React_tutorialcarpeta, creará una aplicación React. Hay varias formas de lograr esto, pero estamos usando el create-react-appcomando. Ingrese el siguiente código:

npx create-react-app react_tutorial

Tenga en cuenta el uso de NPX. El uso de NPX en lugar de NPM ayuda a evitar problemas con el control de versiones o las dependencias.

Crear ThemeContext.js

Una vez que ese código termine de ejecutarse, navegue hasta la /srccarpeta en el directorio de la aplicación. Dentro de la /srccarpeta, creará dos subcarpetas. Uno es para los archivos de contexto y el otro es para los componentes. Cree dos subdirectorios y nombre uno Contexty el otro ComponentsNavegue a la Contextcarpeta y cree un archivo llamado ThemeContext.jsusando el editor de texto de su elección. (Recomendamos Notepad ++ .)

Ahora va a crear el contexto del tema real en el ThemeContext.jsarchivo. Vas a empezar usando React.createContextPuede pasar cualquier cosa como argumento a React.createContextPara este tutorial, comenzaremos pasando un argumento para el tema ligero.

import React from "react";

const ThemeContext = React.createContext("light");
export default ThemeContext;

El siguiente paso es hacer que un proveedor haga que el tema sea accesible para toda la aplicación. En React, cada objeto de contexto viene con un componente Provider React correspondiente El proveedor hace que el contexto sea consumible por otros componentes.

Para crear el proveedor, abra el app.jsarchivo en el /srcdirectorio. Una vez que app.jsesté abierto en su editor de texto, tendrá que importar el archivo ThemeContext.

Actualizar App.js

Una vez que ThemeContextse ha importado, debe envolver el componente de la aplicación en ThemeContext.Provideretiquetas y darle un accesorio llamado valueque contendrá los datos que desea asignar a todo el árbol.

El archivo app.js revisado debería verse así:

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import ThemeContext from "./Context/ThemeContext";
import Header from "./Components/Header";
import Main from "./Components/MainWithClass";
function App() {
  const themeHook = useState("light");
  return (
    <ThemeContext.Provider value = {theme}>
      <div>
        <Header />
        <Main />
        
      </div>
    </ThemeContext.Provider>
  );
}

export default App;

Crear archivo de tema

Vamos a crear un archivo de tema para los temas claros y oscuros. Cree un archivo llamado Colors.jsen el /srcdirectorio.

En el archivo de tema, cree un objeto llamado AppThemeLuego expórtelo para que esté disponible globalmente.

const AppTheme = {
    light: {
        textColor: "#000",
        backgroundColor: "#fff"
    },
    dark: {
        textColor: "#fff",
        backgroundColor: "#333"
    }
}

export default AppTheme;

Crear componentes de React

Ahora vamos a crear algunos componentes de React. Vas a hacer:

  • Encabezamiento
  • ThemeToggler
  • MainWithClass

Header.jsx

Cree un archivo llamado Header.jsxen la /srccarpeta. Ingrese lo siguiente:

import React from "react";
import ThemeToggler from "./ThemeToggler";

const headerStyles = {
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
}
const Header = () => {
    return(
        <header style = {headerStyles}>
            <h1>Context API</h1>
            <ThemeToggler />
        </header>
    );
}

export default Header;

ThemeToggler.jsx

Haremos lo mismo con ThemeToggler.jsx.

import React from "react";
import ThemeContext from "../Context/ThemeContext";

const themeTogglerStyle = {
    cursor: "pointer"
}
const ThemeToggler = () => {
        return(
            <div style = {themeTogglerStyle}>
            </div>
    );
}

export default ThemeToggler;

Consumir contexto

Ahora estás listo para usar ThemeContextEn React, hay dos métodos para crear componentes: funciones y clases. Para facilitar esto, crearemos dos componentes. Se llamará al primero MainWithClass.

MainWithClass.jsx

Primero, importe ThemeContextAppThemeLuego, debe escribir una clase que devuelva el JSX para un renderizador. Ahora es el momento de interactuar con el contexto en sí. Esto se puede hacer utilizando componentes basados ​​en clases de dos formas.

El primero es con Class.contextType.

Class.contextType

Este método comienza atribuyendo el objeto de contexto ThemeContexta la contextTypepropiedad. Una vez hecho esto, puede acceder al contexto usando this.context.

El primer método utiliza Class.contextTypeIngrese lo siguiente en el MainWithClass.jsxarchivo:

import React, { Component } from "react";
import ThemeContext from "../Context/ThemeContext";
import AppTheme from "../Colors";

class Main extends Component{
    constructor(){
        super();
    }
    static contextType = ThemeContext;
    render(){
        const currentTheme = AppTheme[this.context[0]];
        return(
            <main style={{
                padding: "1rem",
                backgroundColor: `${currentTheme.backgroundColor}`,
                color: `${currentTheme.textColor}`,

            }}>
                <h1>Heading 1</h1>
                <p>This is a paragraph</p>
                <button> This is a button</button>
            </main>

        );
    }

}

O puede utilizar el ThemeContext.Consumermétodo:

import React, { Component } from "react";
import ThemeContext from "../Context/ThemeContext";
import AppTheme from "../Colors";

class Main extends Component {
    constructor() {
        super();
        this.state = {}
    }
    render() {
        return (
            <ThemeContext.Consumer>
                {
                    ([theme]) => {
                        const currentTheme = AppTheme[theme];
                        return(
                            <main style = {{
                                padding: "1rem",
                                backgroundColor: `${currentTheme.backgroundColor}`,
                                color: `${currentTheme.textColor}`,
                            
                            }}>
                                <h1>Heading 1</h1>
                                <p>This is a paragraph</p>
                                <button> This is a button</button>
                            </main>
                        )
                       
                    }
                }
            </ThemeContext.Consumer>
        );
    }

}
export default Main;

Editar MainWithFunction

Ahora solo necesita modificar el MainWithFunctioncomponente. Ingrese lo siguiente:

import React, { useContext } from "react";
import ThemeContext from "../Context/ThemeContext";
import AppTheme from "../Colors";


const Main = () => {
    const theme = useContext(ThemeContext)[0];
    const currentTheme = AppTheme[theme];
    return(
        <main style = {{
            padding: "1rem",
            backgroundColor: `${currentTheme.backgroundColor}`,
            color: `${currentTheme.textColor}`,        
        }}>
            <h1>Heading 1</h1>
            <p>This is a paragraph</p>
            <button> This is a button</button>
        </main>
    );
}

export default Main;

¡Eso es todo al respecto! Ahora debería tener una aplicación React que funcione y que se pueda alternar entre los modos claro y oscuro.

Para probarlo usted mismo, vaya a la /srccarpeta y ejecútelo npm startEsto cargará la aplicación React en un servidor local para que puedas probarla por ti mismo.

Para hacer que esta aplicación sea más útil y utilizable, también creamos algunos UserContextarchivos. Luego hicimos un poco de limpieza para mantener las cosas limpias y bien organizadas. La estructura final de la aplicación React debería verse de la siguiente manera.

/src
./App.js
./Colors.js
src/Components
./Header.jsx
./MainWithClass.jsx
./MainWithFunction.jsx
./ThemeToggler.jsx
./UserContext.jsx
src/Context
./ThemeContext.js
./UserContext.js

También hemos creado un repositorio de GitHub con una copia de trabajo de esta aplicación React, para que pueda ver la estructura por sí mismo y verificar su código.

Comenzando con React Context API: Conclusión

El propósito principal de React es crear e implementar aplicaciones de manera rápida y eficiente. Como hemos visto, rápidamente se volvería ineficaz diseñar cada componente individual, por no mencionar irritante. La API React Context hace que diseñar sus aplicaciones React sea rápido y sin dolor. Aún mejor, estos componentes también son reutilizables, por lo que puede usarlos en proyectos futuros.

En este tutorial, le mostramos cómo crear una aplicación React desde la línea de comandos. Hemos profundizado en los aspectos principales de React: componentes y accesorios. Luego, le brindamos ejemplos de cómo configurar archivos de tema y contexto para que estén disponibles universalmente. Al final, tiene una aplicación React en funcionamiento que puede probar en su navegador para ver estos componentes en acción.

Publicar un comentario

0 Comentarios