ReactJS: Buenas Prácticas para un Código Escalable y Eficiente
TRANSCRIPTION COMPLÈTE
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
[Música]
Ah.
[Música]
[Música]
[Música]
[Música]
Hola a todos, ¿cómo andan todos por ahí?
Acá yo soy Leila, estoy en el equipo de
marketing de Henry, así que les quiero
dar la bienvenida a esta masterclass
increíble que vamos a tener con Luisni
eh sobre las buenas prácticas para un
código escalable y eficiente para
nuestra carrera de fullstack.
Les cuento que eh la carrera arranca el
3 de noviembre, la modalidad full time.
Eh son clases en vivo, como varios ya
saben, de lunes a viernes de 11 a 13
horas y la modalidad parttime arranca el
10 de noviembre hasta el 21 de agosto.
Ahí les dejé en el link el en el chat el
link para que puedan ingresar a nuestra
a nuestra página y puedan ver todos los
toda la información que necesitan sobre
la carrera.
Así que ahora la la invitamos a a Luisni
para que nos venga a contar un poco más
sobre esta masterclass increíble que nos
va a dar.
Hola, Leila. Muchas gracias allí por la
introducción y la bienvenida. No, yo
super encantada de estar acá una vez más
compartiendo conocimiento, también
aprendiendo, por supuesto, porque en
esto se aprende todos los días y pues
nada, eh, ver qué qué preguntas tienen
por allí. eh los chicos sobre este tema
tan importante que son las buenas
prácticas y sobre todo aplicadas a JS
que es eh diría yo el framework web de
programación frontend más utilizado al
momento.
Totalmente. Bueno, ya te dejo entonces,
Luis Ni todo tuyo.
Listo. Vale, voy a compartir pantalla y
me confirman, por favor, cuando la vean.
Listo. Eh, ya la ven, ¿cierto?
Ah, la vas la la vas a compartir tú, eh,
Leila, ¿cierto?
Vale. Bueno, primero quiero comenzar
contándoles eh quién soy. Básicamente
en este momento soy software engineer en
Mercadolibbre. Tengo un año trabajando
allí en un proyecto interno muy
importante, pero también fui eh
exglober. Trabajé en Globant, una
empresa argentina muy importante también
en el mundo de la tecnología durante
casi 5 años y entre esas y otras
empresas tengo casi 10 años de
experiencia trabajando enfocada en el
desarrollo del frontend, específicamente
en la parte web, eh con clientes, con
productos internos y bueno, todo este
tiempo me ha ayudado también eh a
adquirir a ir puliendo esas buenas
prácticas, ¿no? Y la idea es
transmitirles hoy un poco ese
conocimiento para que ustedes se puedan
ahorrar un poco todos esos tropiezos que
tiene uno como desarrollador a lo largo
de la carrera. También me pueden
encontrar en LinkedIn como Luis Niugarte
y en mis tiempos libres pues soy
influencer, así que me pueden encontrar
y escribirme también en @luisnugarte
cualquier duda que tengan.
Bueno, ahora sí a lo que vinimos, a
hablar sobre buenas prácticas enfocadas
en React JIS y hoy vamos a estar tocando
cuatro puntos importantes sobre este
tema. El primero, por supuesto, la
arquitectura y la estructura de un
proyecto de React, cómo organizar la
base de lo que va a ser todo nuestro
proyecto y todo nuestro código de ahí en
adelante para poder escalar sin caos.
Eh, por supuesto, vamos a hablar de
componentes limpios y manejo eficiente
del estado, lo cual es el corazón
prácticamente de React, pensar en flujos
de datos claros y predecibles.
E también estaremos viendo un poco y
profundizando sobre lo que es un código,
lo que se entiende como un código
robusto y mantenible, porque no es lo
mismo tener código que tener un buen
código y prevenir errores antes de que
llegue la producción. Por allí dicen que
el mejor error es el que nunca llega.
Entonces, vamos a estar viendo un poco
ese tema y, por supuesto, también vamos
a estar hablando sobre performance,
accesibilidad y experiencia de usuario,
que creo que son pilares fundamentales
cuando pensamos en buenas prácticas. Y
esto es lo que podemos decir que
distingue un proyecto profesional de uno
amater. E al final también vamos a dejar
un espacio eh libre para preguntas y
respuestas, así que las pueden ir igual
dejando en el chat y al final las vamos
a estar respondiendo.
¿Listo?
Entonces, lo primero es entender qué es
React JS y por qué debo aplicar eh
buenas prácticas en un proyecto basado
en este framework. Entonces, nos dice el
concepto, ¿podemos pasar la diapositiva,
porfa?
Eh, nos dice el concepto que esto es una
librería de JavaScript para crear
interfaces de usuario basadas en
componentes reutilizables, que como
decíamos es el componente o el el lo el
deber ser de utilizar React JS. React
usa un don virtual para actualizar la
interfaz de forma rápida y eficiente,
ideal para aplicaciones web interactivas
y escalables. Aunque sabemos que también
existe eh React Native, que es para
aplicaciones eh mobile de móviles. ¿Cuál
es la importancia de aplicar buenas
prácticas en un proyecto de React?
Primero que nada, la mantenabilidad,
facilidad de entender el código,
depurarlo y mejorarlo, la escalabilidad
porque permite que la crezca sin
volverse caótica. Así comencemos eh con
un solo usuario, un solo objetivo y un
solo desarrollador. La idea es que
estemos en la capacidad de que esta
crezca. Eh, también rendimiento, evita
errores innecesarios, rendes
innecesarios y mejora la experiencia de
usuario. Y por supuesto la colaboración
porque nos asegura un código consistente
entre varios desarrolladores.
Em, ahora arquitectura y estructura. Yo
creo que esto es como la base, el
esqueleto, lo primero eh que debemos
pensar cuando vamos a comenzar un
proyecto y en React JS hay una forma de
organizar esa base para que pueda
escalar sin caos. Entonces, vamos a ver
un poquito más sobre esto y nos damos
cuenta de que hay muchas hay hay un
punto muy importante, valga la
redundancia, de por qué debemos aplicar
y pensar una buena arquitectura. La
arquitectura aplica para front, para
back, si ustedes quieren estudiar eh
full stack. Pero cuando hablamos
específicamente del front, hay unos
puntos muy importantes que vamos a estar
desarrollando ahora. Entonces, nos dice
la experiencia que un proyecto mal
estructurado puede funcionar, sí, por
supuesto, hasta que alguien más lo toca.
Por ahí hay varios memes de que
solamente Dios y el desarrollador que
hicieron el código entienden ese código
y esa no es la idea. La idea es que
cualquier desarrollador que entre a ver
un proyecto lo pueda entender o al menos
tener una idea de qué es lo que hace ese
proyecto. Por eso nos decimos que la
arquitectura no es sobre tamaño del
equipo, sino sobre la claridad mental
que puede darnos ese proyecto a uno o 10
desarrolladores, independientemente de
cuántos seamos. Entonces, nos ayuda a
evitar la deuda técnica, facilita la
lectura, el testing y el onboarding para
nuevos eh desarrolladores al proyecto. Y
por supuesto que es el core de todo
esto, mejora la reutilización y la
coherencia visual.
DÉBLOQUER PLUS
Inscrivez-vous gratuitement pour accéder aux fonctionnalités premium
VISUALISEUR INTERACTIF
Regardez la vidéo avec des sous-titres synchronisés, une superposition réglable et un contrôle total de la lecture.
RÉSUMÉ IA
Obtenez un résumé instantané généré par l'IA du contenu de la vidéo, des points clés et des principaux enseignements.
TRADUIRE
Traduisez la transcription dans plus de 100 langues en un seul clic. Téléchargez dans n'importe quel format.
CARTE MENTALE
Visualisez la transcription sous forme de carte mentale interactive. Comprenez la structure en un coup d'œil.
DISCUTER AVEC LA TRANSCRIPTION
Posez des questions sur le contenu de la vidéo. Obtenez des réponses alimentées par l'IA directement à partir de la transcription.
TIREZ LE MEILLEUR PARTI DE VOS TRANSCRIPTIONS
Inscrivez-vous gratuitement et débloquez la visionneuse interactive, les résumés IA, les traductions, les cartes mentales, et plus encore. Aucune carte de crédit requise.