Composición y Colocación de Estado en React con Patrones de Renderización

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:47

Composición y Colocación de Estado en React con Patrones de Renderización

Curso de React.js: Patrones de Render y Composición

Clase 4 de 19

Clase 4 / 19

Recursos

¿Cómo llevar la teoría de React a la práctica?

Para profundizar en React, es crucial pasar de la teoría a la práctica. Esto implica aplicar principios como la composición de componentes y la colocación del estado en escenarios reales. Para facilitar este aprendizaje, puedes trabajar con un repositorio específico llamado "curso React Patrones Render" en la comunidad de Platzi. Es importante recordar que comenzamos con los commits heredados del curso anterior llamado "Inicio del curso de patrones de render". Si deseas replicar este entorno, solo tienes que instalar las dependencias con npm install y ejecutar el servidor de desarrollo con npm start.

¿Cómo estructurar componentes usando componentes falsos?

Antes de sumergirte en la estructura real del código, es útil experimentar con componentes falsos que te permiten visualizar cómo debería organizarse la aplicación. Esto se logra comentando temporalmente el componente principal (App) y creando componentes básicos que imitan la estructura general deseada.

Aquí un ejemplo básico de cómo podrías estructurarlos:

function App() {
  return (
    <React.Fragment>
      <ToDoHeader />
      <ToDoList />
    </React.Fragment>
  );
}

function ToDoHeader() {
  return (
    <React.Fragment>
      <ToDoCounter />
      <ToDoSearch />
    </React.Fragment>
  );
}

function ToDoList() {
  return (
    <React.Fragment>
      <ToDoItem />
    </React.Fragment>
  );
}

¿Cómo se maneja el estado en una aplicación React de manera óptima?

En React, compartir el estado entre los componentes puede complicarse si no se maneja correctamente. Tradicionalmente, los estados y sus actualizadores se pasan por props de componente a componente, lo que puede ser tedioso y difícil de manejar en aplicaciones más grandes. Una alternativa es utilizar el patrón Provider que facilita la distribución del estado a lo largo de la estructura de componentes.

function App() {
  const [state, setState] = React.useState(initialState);

  return (
    <ToDoProvider value={{ state, setState }}>
      <ToDoHeader />
      <ToDoList />
    </ToDoProvider>
  );
}

¿Cómo optimizar la composición de componentes?

Una buena práctica es dejar que los componentes definan sus propios hijos a través de sus propiedades children, en lugar de declarar explícitamente qué componentes deben contener. Esto proporciona una mayor flexibilidad para compartir y reutilizar el estado.

function ToDoHeader({ children }) {
  return <header>{children}</header>;
}

function ToDoList({ children }) {
  return (
    <section className="ToDoList-container">
      {children}
    </section>
  );
}

Y así los llamas en App:

function App() {
  return (
    <React.Fragment>
      <ToDoHeader>
        <ToDoCounter />
        <ToDoSearch />
      </ToDoHeader>
      <ToDoList>
        <ToDoItem />
      </ToDoList>
    </React.Fragment>
  );
}

¿Qué ventajas trae la composición de componentes y colocación del estado en React?

Implementar correctamente la composición de componentes y el manejo de estados evita la necesidad de pasar una cadena interminable de props. Facilita que los estados puedan ser compartidos y utilizados en cualquier parte de la jerarquía de componentes sin importar su nivel. Esto resulta en componentes más limpios y manejables:

Eficiencia: Reduces código innecesario y simplifies la arquitectura al evitar pasar props redundantes.
Flexibilidad: Puedes definir qué componentes van en cada sección de manera dinámica, mejorando la reutilización del código.
Escalabilidad: Facilita la adición o modificación de características sin complicar la base de código.

Con estos principios en mente, puedes comenzar a aplicar estos patrones a tus proyectos de manera eficiente, asegurando una base sólida para construir aplicaciones más complejas en el futuro. Además, siempre recuerda que el aprendizaje constante y la práctica fortalecen tus habilidades como desarrollador. ¡Ánimo y sigue practicando!

John Orellana

Hace 4 años

hola a todos, tuve un problemas con la version de node js al momento de correr el servidor y las posibles soluciones son muchas las que puedes encontrar en San Google
solución 1 - elimina la carpeta de node_module y package-lock solución 2 - corre npm install si no lo has hecho solucio 3 - esposible que sea la version de node.js para ello necesitas instalar nvm para degradar la version de node.js en platzi hay una sección dedicada a nvm --> https://platzi.com/clases/1648-bff-2019/24687-como-instalar-nvm/#:~:text=nvm%20no%20tiene%20soporte%20para,archivo%20nvm%2Dsetup.exe.

y si ninguna te funciono como a mi entonces usa (n). n es parecido a nvm solo que mas cencillo https://github.com/tj/n mira la documentación pero si tienes problemas con el English aqui te va

Plataformas compatibles nes compatible con macOS, Linux, incluido el Subsistema de Windows para Linux, y varios otros sistemas similares a Unix. Está escrito como un script BASH pero no requiere que use BASH como su shell de comandos.

nno funciona en shells nativos en Microsoft Windows (como PowerShell), o Git para Windows BASH, o con Cygwin DLL.

Instalación Si ya tiene instalado Node.js, una manera fácil de instalar nes usando npm:

npm install -g n El ncomando se descarga e instala /usr/localde forma predeterminada, pero puede anular esta ubicación definiendo N_PREFIX. nalmacena en caché las versiones de Node.js en el subdirectorio n/versions. La versión activa de Node.js se instala en los subdirectorios bin, include, liby share.

Para evitar la necesidad sudode instalaciones globales, se sugiere que realice la instalación en su directorio de inicio mediante no se apropie de los directorios del sistema:npmN_PREFIX

make cache folder (if missing) and take ownership

sudo mkdir -p /usr/local/n sudo chown -R $(whoami) /usr/local/n

make sure the required folders exist (safe to execute even if they already exist)

sudo mkdir -p /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

take ownership of Node.js install destination folders

sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share Si npmaún no está disponible, una forma de iniciar una instalación:

curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n bash n lts

Now node and npm are available

npm install -g n Alternativamente, puede clonar este repositorio y

make install para instalar nen bin/nel directorio especificado en la variable de entorno $PREFIX, que por defecto es /usr/local(tenga en cuenta que probablemente necesitará usar sudo). Para instalar nen una ubicación personalizada (como $CUSTOM_LOCATION/bin/n), ejecute PREFIX=$CUSTOM_LOCATION make install.

Instaladores de terceros En macOS con Homebrew puedes instalar la fórmula n .

brew install n O en macOS con MacPorts puede instalar el puerto n :

port install n En Linux y macOS, n-install permite la instalación directamente desde GitHub; por ejemplo:

curl -L https://bit.ly/n-install | bash n-install establece tanto PREFIXcomo N_PREFIXen $HOME/n, instala nen $HOME/n/bin, modifica los archivos de inicialización de los shells admitidos para exportarlos N_PREFIXy agregarlos $HOME/n/bina PATH, e instala la última versión de LTS Node.js.

Como resultado, tanto nél mismo como todas las versiones de Node.js que administra están alojados dentro de un único directorio configurable opcionalmente, que luego puede eliminar con el n-uninstallscript incluido. n-updatese actualiza na la última versión. Consulte el repositorio de n-install para obtener más detalles.

Instalación de versiones de Node.js Simplemente ejecute n <version>para descargar e instalar una versión de Node.js. Si <version>ya se ha descargado, nse instalará desde su caché.

n 10.16.0 n lts Ejecutar npor sí solo para ver las versiones descargadas e instalar la versión seleccionada.

$ n

node/4.9.1 ο node/8.11.3 node/10.15.0

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit (También puede usar jy kpara seleccionar la versión anterior o siguiente en lugar de usar las flechas o ctrl+ny ctrl+p).

Si la versión del nodo activo no cambia después de la instalación, intente abrir un nuevo shell en caso de que vea una versión obsoleta.

Especificación de versiones de Node.js Hay una variedad de formas de especificar la versión de destino de Node.js para los ncomandos. La mayoría de los comandos usan la última versión coincidente y n ls-remoteenumeran varias versiones coincidentes.

Los números de versión numéricos pueden estar completos o incompletos, con un prefijo opcional v.

4.9.1 8: versiones 8.xy v6.1: versiones 6.1.x Hay etiquetas para dos versiones especialmente útiles:

lts: lanzamiento oficial de soporte a largo plazo más reciente latest, current: lanzamiento oficial más reciente Hay una autoetiqueta para leer la versión de destino de un archivo en el directorio actual o en cualquier directorio principal. nbusca en orden:

.n-node-version: versión en una sola línea. Personalizado para n. .node-version: versión en una sola línea. Utilizado por múltiples herramientas: nodo-versión-uso .nvmrc: versión en una sola línea. Usado por nvm. si no se encuentra el archivo de versión, busque enginecomo se indica a continuación. La engineetiqueta busca un package.jsonarchivo y lee el enginescampo para determinar la compatibilidad con Node.js. Requiere una versión instalada de nodey se usa npx semverpara resolver rangos complejos.

Hay soporte para las secuencias de lanzamiento con nombre:

argon, boron, carbon: nombres en clave para flujos de lanzamiento de LTS Se pueden usar estos alias de soporte de Node.js, aunque simplemente resuelva a la última versión coincidente:

active, lts_active, lts_latest, lts, current,supported El formulario de la última versión es para especificar otras versiones disponibles utilizando el nombre de la carpeta de descarga remota seguido opcionalmente de la versión completa o incompleta.

nightly test/v11.0.0-test20180528 rc/10 Eliminación de versiones Eliminar algunas versiones en caché:

n rm 0.9.4 v0.10.0 Eliminación de todas las versiones almacenadas en caché, excepto la versión instalada:

n prune Elimine el Node.js instalado (no afecta las versiones en caché). Esto puede ser útil para volver a la versión del sistema de nodo (si está en una ubicación diferente), o si ya no desea usar nodo y npm, o está cambiando a una forma diferente de administrarlos.

n uninstall Uso de versiones descargadas de Node.js sin reinstalar Hay tres comandos para trabajar directamente con sus versiones descargadas de Node.js, sin reinstalar.

Puede mostrar la ruta a la nodeversión descargada:

$ n which 6.14.3 /usr/local/n/versions/6.14.3/bin/node O ejecute una versión descargada nodecon el n runcomando:

n run 8.11.3 --debug some.js O ejecute un comando con el PATHmodo modificado nodey npmserá de la versión descargada de Node.js. (NB: npmejecutar de esta manera usará node_modules globales de la carpeta de la versión del nodo de destino).

n exec 10 my-script --fast test n exec lts zsh Preservar npm Una instalación de Node.js normalmente también incluye npm, npxy corepack, pero es posible que desee conservar sus versiones actuales (especialmente las más nuevas) usando --preserve:

$ npm install -g npm@latest ... $ npm --version 6.13.7

Node.js 8.17.0 includes (older) npm 6.13.4

$ n -p 8 installed : v8.17.0 $ npm --version 6.13.7 Puede hacer que esto sea el valor predeterminado configurando la variable de entorno en una cadena no vacía. Hay variables de entorno separadas para npmy corepack:

export N_PRESERVE_NPM=1 export N_PRESERVE_COREPACK=1 Puede ser explícito para obtener el comportamiento deseado independientemente de las variables de entorno:

n --preserve nightly n --no-preserve latest Misceláneas La ayuda de la línea de comandos se puede obtener de n --help.

Enumere las versiones remotas coincidentes disponibles para descargar:

n ls-remote lts n ls-remote latest n lsr 10 n --all lsr Lista de versiones descargadas en caché:

n ls Mostrar diagnósticos para ayudar a resolver problemas:

n doctor Fuente personalizada Si desea utilizar un espejo de Node.js diferente que tenga el mismo diseño que el https://nodejs.org/dist/ predeterminado , puede definir N_NODE_MIRROR. El ejemplo más común es de usuarios en China que pueden definir:

export N_NODE_MIRROR=https://npmmirror.com/mirrors/node Si el espejo personalizado requiere autenticación, puede agregar el nombre de usuario y la contraseña codificados en URL en la URL. p.ej

export N_NODE_MIRROR=https://encoded-username:encoded-password@host:port/path También hay N_NODE_DOWNLOAD_MIRRORun espejo diferente con el mismo diseño que el https://nodejs.org/download predeterminado .

Arquitectura personalizada De forma predeterminada n, elige los archivos binarios que coinciden con la arquitectura de su sistema. Por ejemplo, en un sistema de 64 bits ndescargará binarios de 64 bits.

En una Mac con silicona de Apple:

para Node.js 16 y superior, nel valor predeterminado es binario arm64 que se ejecuta de forma nativa para versiones anteriores de Node.js, nlos valores predeterminados son binarios x64 que se ejecutan en Rosetta 2 Puede anular la arquitectura predeterminada utilizando la opción -ao .--arch

por ejemplo, reinstale la última versión de Node.js con binarios x64:

n rm current n --arch x64 current Variables de entorno opcionales El ncomando se descarga e instala /usr/localde forma predeterminada, pero puede anular esta ubicación definiendo N_PREFIX. Para cambiar la ubicación para decir $HOME/.n, agregue líneas como las siguientes a su archivo de inicialización de shell:

export N_PREFIX=$HOME/.n export PATH=$N_PREFIX/bin:$PATH Si desea almacenar las descargas en una ubicación diferente, use N_CACHE_PREFIX. Esto no afecta la versión del nodo activo actualmente.

nel valor predeterminado es usar tarballs de Node.js comprimidos xz para la descarga si es probable que tar en el sistema admita la descompresión xz. Puede anular la elección automática estableciendo una variable de entorno en cero o distinta de cero:

export N_USE_XZ=0 # to disable export N_USE_XZ=1 # to enable Puede ser explícito para obtener el comportamiento deseado independientemente de la variable de entorno:

n install --use-xz nightly n install --no-use-xz latest En breve:

N_NODE_MIRROR: Ver fuente personalizada N_NODE_DOWNLOAD_MIRROR: Ver fuente personalizada soporte para NO_COLOR y CLICOLOR=0 para controlar el uso de códigos de color ANSI N_MAX_REMOTE_MATCHESpara cambiar el ls-remotemáximo predeterminado de 20 versiones coincidentes N_PRESERVE_NPM: Ver Preservar npm N_PRESERVE_COREPACK: Ver Preservar npm Cómo funciona ndescarga un paquete de Node.js precompilado y lo instala en un solo prefijo (p. ej /usr/local., ). Esto sobrescribe la versión anterior. La bincarpeta en esta ubicación debe estar en su PATH(por ejemplo, /usr/local/bin).

Las descargas se guardan en una carpeta de caché que se utilizará para las reinstalaciones. Las descargas también están disponibles para uso limitado usando n whichy n runy n exec.

npmLa instalación no cambia los paquetes globales , con la excepción de npmsí mismo, que es parte de la instalación de Node.js.

Comentarios (78)78 comentarios

Juan Castro

Profesor

Hace 5 años

Luis Alejandro Vera Hernandez

Iván Rodríguez

Rodrigo Milesi

Santiago Lopera Naranjo

Moisés Astudillo

Gilbert Ardila

Mauricio Gonzalez Falcon

Mariano Gastón Paduani

Adrian Bautista Orozco

Jairo Campos Ruiz

Rodrigo Ramos Xochiteotzin

Remix Zapata

Yanhfrey Chira

Carlos Andres Poiche Soliz

Miguel Angel Hurtado Perdomo

Hace 2 años

Brian Sánchez Izquierdo

Reinaldo Mendoza

Max Andy Diaz Neyra

Ramiro Godoy

John Caballero

Jesús Alberto Martínez Hernández

Aldo Sebastián Méndez Gonzalez

Lucas Frezzini

Moises Hernandez

Hace un año

Mauricio Parada G

Jaime Bustamante

Kevin Zavala

Julian Franco

Fidel Parabacuto

Zedovius .

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Composición y Colocación de Estado en React con Patrones de Renderización

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos