No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Composici贸n de componentes sin React Context

7/19
Recursos

Aportes 12

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Tengo un proyecto personal en el que hab铆a atomizado y encapsulado todo de tal manera que cada archivo .js hacia solo una cosa y llamaba solamente a sus hijos (lo cual me da mucha seguridad al querer cambiar un comportamiento o interacci贸n). Pero sent铆a que no me quedaba algo 鈥淒ECLARATIVO鈥.
Usando composici贸n de componentes cambi贸 el proyecto completamente!!!
Mi sensaci贸n: antes ver mi c贸digo era como 鈥渓eer un libro que ten铆a una palabra por p谩gina y hab铆a que dar la vuelta a la hoja a cada rato鈥, muy incomodo y sin flow. Ahora parece una p谩gina de wikipedia que describe globalmente mi aplicaci贸n y con los enlaces para seguir profundizando (los imports) 馃槄馃槄馃槄馃槄
Ahora s铆 siento m谩s declarativo a mi react. Gracias Juan

As铆 vamos hasta este punto 馃ザ

Todo-Machine

Cosillas nuevas:
ID 煤nicos para las tareas
Modo dark y light
UI creo que agradable y minimalista
Algo de responsive

Cualquier comentario y/o consejo bienvenido 馃榿

Ahora entiendo porque la propiedad children era su favorita :v
Nos lo habia advertido desde el primer curso jajaja

El curso de introducci贸n me explot贸 la cabeza, mis proyectos en react eran un desastre no pod铆a ni darle mantenimiento yo mismo, gracias al curso de introducci贸n un proyecto de mi trabajo qued贸 s煤per bien y ahora con composici贸n me siento m谩s confiado y seguro de lo que hago, eres un gran maestro Juan!. Sigue as铆 nunca pares de ense帽ar. 馃槃

Me he quedado sorprendido eh, esto es lo maximo.

Se simplifico bastante, es mucho mas f谩cil de leer

Muchas gracias, me siento mucho m谩s seguro con React.
El curso de introducci贸n me dejo con cierta incertidumbre sobre como escalaria el proyecto solamente con props, pero esto de la composici贸n es sin duda un salva vidas! Gracias David!

Buen铆sima clase! al terminar el curso anterior me puse a personalizar y crear nuevas funcionalidades en la app y en todo usaba el context, ya no entend铆a nada jajaja, me viene de maravilla este curso 馃槃

Logr茅 mejorar el c贸digo de mi todo con la composici贸n de componentes y es cierto, todo se siente mas f谩cil de leer y de entender. Eso de sustituir el Contexto por un Custom Hook es una pasada. No descarto por completo el uso de Contexto en app grandes pero en cosas sencillas como esta evidentemente no se necesita.
Repo
Deploy

Para los que han tenido problemas con el deploy usando gh-pages (la dependencia). Les aconsejo hacer build primero y luego deploy, sin usar el predeploy(muchas veces se ha quedado un poco congelado el proceso y he tenido que salir con Ctrl + C) En el caso que intentes resubir un nuevo gh-pages y da el error ( fatal: A branch named 鈥榞h-pages鈥 already exists. ) Lo que hay que hacer es y a la carpeta de node_modules/ .cache/ y eliminar la carpeta gh-pages y volver a hacer deploy.

(Muchas veces el proceso no funciona a la primera pero al final lo hace) se dar谩n cuenta porque en consola nos devuelve la palabra (Published)

Pobre React Context. Destrozado en segundos.

Y qu茅 tal si adem谩s de eso usamos slots! 馃く
Usar props enviando componentes!

Fuente: https://daveceddia.com/pluggable-slots-in-react-components/

function App({ user }) {
	return (
		<div className="app">
			<Nav>
				<UserAvatar user={user} size="small" />
			</Nav>
			<Body
				sidebar={<UserStats user={user} />}
				content={<Content />}
			/>
		</div>
	);
}

// Accept children and render it/them
const Nav = ({ children }) => (
  <div className="nav">
    {children}
  </div>
);

// Body needs a sidebar and content, but written this way,
// they can be ANYTHING
const Body = ({ sidebar, content }) => (
  <div className="body">
    <Sidebar>{sidebar}</Sidebar>
    {content}
  </div>
);

const Sidebar = ({ children }) => (
  <div className="sidebar">
    {children}
  </div>
);

const Content = () => (
  <div className="content">main content here</div>
);