Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Composición y colocación del estado en React

4/19
Recursos

Aportes 47

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En resumen:

⭐️ Cuando los componentes nietos de App no solo son nietos, sino también componentes hijos, podemos pasarles props directamente y mejorar su comunicación.

Casi siempre que llamamos a un componente… pos lo llamamos y ya. 😅

function App() {
  return (
    <TodoHeader />
  );
}

function TodoHeader() {
  return (
    <TodoCounter />
  );
}

Esto implica que para compartir el estado debemos pasar props y props y props por cada componente intermedio entre App y los componentes que realmente necesiten esas props en cualquier lugar de la jerarquía. 😓

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

  return (
    <TodoHeader state={state} setState={setState} />
  );
}

function TodoHeader({ state, setState }) {
  return (
    <header>
      <TodoCounter state={state} setState={setState} />
    </header>
  );
}

Pero otra forma de trabajar es que App no solo llame a sus componentes directamente hijos, sino que también llamen a los siguientes componentes en la jerarquía de la aplicación. 😮

function App() {
  return (
    <TodoHeader>
      <TodoCounter />
    </TodoHeader>
  );
}

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

Y esta nueva forma de trabajar implica que ya no tenemos que pasar props y props y props entre App y el resto de componentes para compartir el estado, sino que App puede comunicarse directamente con el componente que realmente necesita ese estado. 🤩

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

  return (
    <TodoHeader>
      <TodoCounter state={state} setState={setState} />
    </TodoHeader>
  );
}

💚 Esta es la magia de la composición de componentes.

Para estar en el mismo archivo, lo que tienen que hacer es lo siguiente:
clonar el repositorio asi

git clone https://github.com/platzi/curso-react-patrones-render.git

entrar al proyecto:

cd curso-react-patrones-render

luego cambiar al mismo commit que en el video:

git checkout 2e56300c1d5b28bceae71df1c763b434dc640436

git switch -c principio

git checkout principio

o también puedes restaurar la rama master hasta el commit del video de esta forma:

git reset --hard 2e56300c1d5b28bceae71df1c763b434dc640436

y por ultimo instalar las dependencias:

  npm i

sin darme cuenta es lo que había estado haciendo al momento de crear aplicaciones con React.

React.Fragment ya no es necesario, solo pones un tag vacío y listo

<>
</> 

Para lo que quieran hacerlo en TypeScript y no sepan como tipar un children aquí os dejo dos formas de tipar los componentes de react que se suelen usar:

  • Tipando inline en los parámetros del componente
function TodoHeader({ children }: {children?: ReactNode}) {
  return (
    <>
             {children}
        </>
  );
}
  • Creando un type que le aplicaremos esta se suele usar mucho por que queda más limpia
type TodoHeaderProps = {
  children?: ReactNode
}

function TodoHeader({ children }: TodoHeaderProps) {
  return (
    <>
             {children}
         </>
  );
}

Uno nunca debería versionar las configuraciones estéticas del vscode, es como hacer terrorismo visual.

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 no tiene soporte para,archivo nvm-setup.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.

Para aquellos que simplemente quieren seguir trabajando con su codigo anterior:

  • Van a su repositorio
  • Hacen clic eb el boton verde que dice code
  • Elijen http o ssh y copian el codigo
  • Van a su consola y escriben: git clone elCodigoCopiado
  • Esperan que cargue
  • Ahora se mueven a la carpeta de su app
  • Abren consola y escriben npm install, con el fin de instalar todos los paquetes de node
  • escriben en la consola npm start para iniciar el servidor

Por esto hay que saber que es Scope & Closures.

Repo

https://github.com/platzi/curso-react-patrones-render

Para aquellos que les da error al clonar el repositorio y ejecutar

npm start

Ejecuten estos comandos en su terminal

npm update

npm audit fix --force

por lo menos a mi me funciono.

La composición de componentes nos ayuda para que el llamado de cada uno de los componentes hijos y nietos sea desde el componente padre.

Genial esto, y el useContext lo usamos para casos más específicos, me encanta.
Lo aceptaba, tener todo tan componetizado y tener que ir entrando a cada archivo, pero asi lo veo super super entendible y más mantenible.
¡Me encantó!

Clases que te vuelan la cabeza

Me dio problemas mi versión de Node (17.x.x). Para no alargar el problema usé la versión 12.18.3, no sé cuál se usó al iniciar el curso, recomiendo usar un archivo .nvmrc

Me gusto mucho esta parte de la documentación de React.

“”"

Para cada parte del estado de tu aplicación:

Identifica qué componentes muestran algo con base a este estado.
Busca un componente común a estos más arriba en la jerarquía.
Este componente o uno más arriba en la jerarquía debería poseer el estado.
Si no puedes encontrar un componente en el que tenga sentido manejar el estado, crea un nuevo componente solo para guardar el estado y ubícalo dentro de la jerarquía en algún lugar por encima de los componentes que lo necesitan.

""
Pensando en React

Uso de prop {children} para evitar el paso de props por cada componentes padre

Hasta esta clase, la didáctica que Juan hace entre este curso y el curso de Introducción a React me parece maravillosa.

Mi gran pregunta a estas alturas es…
.
¿Cuantas generaciones de componentes sería una buena recomendación tener dentro del componente app? ¿2 o 3 o 4?
.
O ¿Deberiamos dejarlo a nuestro criterio hasta donde nuestra app sea facíl de leer sin meter tantas lineas de codigo?

Para aquellos que les da error al clonar el repositorio y ejecutar npm start
.
.

Hagan lo siguiente:

  1. Borren la carpeta node_modules
  2. Borren el archivo package-lock.json

.
.
Si sigue sin funcionar, entonces desde el terminal, ejecutan las siguientes lineas:
.
.

  • Para Windows:
set NODE_OPTIONS=--openssl-legacy-provider
  • Para Linux & MacOS
export NODE_OPTIONS=--openssl-legacy-provider

Muito interesante

Cuando descargaba e iba al commit que han compartido los compañeros, comúnmente me daba un error que decía algo como

code: ‘ERR_PACKAGE_PATH_NOT_EXPORTED’
(Lo siento, no le tomé captura)

Pero, lo pude solucionar con un

npm update && npm audit fix --force

por si a alguien más le da el mismo error

El curso de introducción a React ya no se encuentra disponible, entonces uno que va siguiente la ruta de Frontend y Backend con JavaScript para desarrollo web, llega aquí sin los conocimientos necesarios. Mal

Gracias a las lecturas de la clase pasada, en la plataforma egghead, y esta clase, entiendo la importancia de una buena composicion de compontentes, y como optimiza todo el tema de renderizarlos en el navegador.

Si tienen el error “fatal: remote origin already exists” y no pueden hacer push cuando clonaron el repo de Platzi, puede ser que esto les ayude
Eliminar el control remoto existente: puedes eliminarlo con el comando

git remote remove origin

Esto eliminará el control remoto existente y te permitirá agregar un nuevo control remoto con el nombre original utilizando el comando

git remote add origin  <url_del_repositorio>.

No sé porqué ahora empiezo a amar la composición de componentes 😄

Excelente esta clase!! en la anterior había quedado media perdida, pero este ejemplo es buenísimo!

Con esta clase ya me quedaron más claros los conceptos de composición y la colocación del estado

Muy buena clase Juan David! Gracias por explicar de forma clara y sencilla estos conceptos. Me sirvió mucho este ejemplo de composición!

Gran patrón de diseño de componentes!

Es que Dios mio, React es todo. 😎

si quieren ir al commit donde inicia la clase:
primero hagan un git log y busquen el commit donde inicia este curso,
para salir usen esc, control +z +z,
luego escriban git checkout +el commit y listo

Composición y colocación del estado en react

El hook useContext puede ayudar a evitar que siempre tengamos que usar props.

Referencia de la API de los hooks

Si pasamos {children} a un componente en sus props y renderizamos ello, cuando usemos al componente simplemente le pasamos las etiquetas HTML para que se creen en el navegador.

¿Puedo hacer que mi componente TodoList en los children solo reciba elementos TodoItem? es decir, que si llega otro tipo de elemento no renderice o aparezca un error de compilación.
***<u>Help¡¡¡ </u>*****Al instalar yarn install y luego yarn start me sale error:** PS C:\Users\USER\Documents\Platzi\Projects\react-patrones-render\curso-react-patrones-render> yarn start yarn run v1.22.22 $ react-scripts start node:internal/modules/cjs/loader:537    throw e;    ^ Error \[ERR\_PACKAGE\_PATH\_NOT\_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in C:\Users\USER\Documents\Platzi\Projects\react-patrones-render\curso-react-patrones-render\node\_modules\postcss-safe-parser\node\_modules\postcss\package.json   at new NodeError (node:internal/errors:393:5)   at exportsNotFound (node:internal/modules/esm/resolve:292:10)   at packageExportsResolve (node:internal/modules/esm/resolve:628:9)   at resolveExports (node:internal/modules/cjs/loader:531:36)   at Module.\_findPath (node:internal/modules/cjs/loader:600:31)   at Module.\_resolveFilename (node:internal/modules/cjs/loader:1012:27)   at Module.\_load (node:internal/modules/cjs/loader:872:27)   at Module.require (node:internal/modules/cjs/loader:1092:19)   at require (node:internal/modules/cjs/helpers:103:18)   at Object.\<anonymous> (C:\Users\USER\Documents\Platzi\Projects\react-patrones-render\curso-react-patrones-render\node\_modules\postcss-safe-parser\lib\safe-parser.js:1:17) {  code: 'ERR\_PACKAGE\_PATH\_NOT\_EXPORTED' } Node.js v19.1.0 error Command failed with exit code 1. info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command. --------------------------------------------------------------------------------------
Si se entendio, excelente
Que belleza de clase ome!

Composición y colocación del estado en React

.
En este ejemplo vemos como se ha aplicado la composición de componentes utilizando children en los componentes hijos.
.

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

	return (
		<>
			<TodoHeader>
				<TodoCounter />
				<TodoSearch />	
			</TodoHeader>

			<TodoList>
				<TodoItem state={state} />
			</TodoList>
		</>
	);
}

.
En este caso, son TodoHeader y TodoList quienes internamente reciben la propiedad children.
.

function TodoHeader({children}) {

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

	return (
		<section>
			{children}
		</section>
	);
}

.
De este modo es el componente App quien define el contenido que va dentro de TodoHeader y TodoList.
.
Esto evita que tengamos que pasar props y props desde los componentes padres hacia sus hijos, como sería el ejemplo a continuación.
.

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

	return (
		<>
			<TodoHeader />
			<TodoList state={state} />
		</>
	);
}

.
Como se puede observar, para poder llegar a transmitir el estado hacia los componentes que lo necesiten habrá que pasárselos por medio de props.
.

function TodoHeader() {

	return (
		<>
			<TodoCounter />
			<TodoSearch />
		</>	
	);
}
function TodoList({state}) {

	return (
		<>
			<TodoItem state={state} />
		</>
	);
}

.
En conclusión, utilizando una buena composición de componentes evitaríamos la propagación excesiva de props y volveríamos el código más flexible incluso sin tener que depender demasiado de React Context.

Hola buenas, cuando quiero ejecutar npm start me da este error, que me estaria faltando? ![](https://static.platzi.com/media/user_upload/image-c91fa947-9921-483a-926e-24058aff8b2d.jpg)
Una solución que encontre para el "npm start", fue remplazar el script de start por "start":`"NODE_ENV=production node_modules/react-scripts/bin/react-scripts.js start"`

Para que arman una ruta de aprendizaje que contiene cursos que están por fuera de la ruta de aprendizaje?

Hace que mucho del contenido no tenga sentido.

Esto se refiere a una forma de diseñar la app que nos da más flexibilidad y donde aunque el codigo no es tan elegante, nos permite trabajar mejor.

En lugar de que un componente primera generación (hijo de app, por ejemplo) decida su contenido, podemos usar la estrategia de “children” para que donde declaramos ese componente, también hagamos su contenido.

Esto nos da la flexbilidad de reutilizar ese componente más facilmente y de que los componentes hijos (es decir, los nietos de app) tengan acceso a la información de app directamente, sin context y sin pasar props y pros.

El estado lo puedes colocar en la zona de mayor relevancia:

  • Si es un estado solo consumido por un componente, debe ir en ese componente.
  • Si es un estado compartido, debe ir en el componente padre más cercano que englobe a los componentes que consumen ese estado

El estado lo puedes ubicar segun los componentes stateful y stateless

  • Separar los componente por los que manejan logica y estado y los que solo maquetan y reciben por props la información

React encourage us to apply components composition to components that are applying components compositions.

Podrían evitar el “y movemos aqui, y organizamos alla”, usan varios archivos al mismo tiempo y el moverse entre archivos pierde uno la pista, repitiendo varias veces y perdiendo el hilo del seguimiento de los movimientos y como estos se relacionan con los demas archivos…

inicio