De la Idea a la Producción: Desarrollo de React con un Toque Visual

Rate this content
Bookmark

Únete a nosotros para un masterclass de 3 horas que explora el mundo del desarrollo creativo de React utilizando Codux. Los participantes explorarán cómo un enfoque visual puede desbloquear la creatividad, agilizar los flujos de trabajo y mejorar la velocidad de desarrollo. Sumérgete en las características que hacen de Codux un cambio de juego para los desarrolladores de React. La sesión incluirá ejercicios prácticos que demuestran el poder de la renderización en tiempo real, la manipulación visual del código y el aislamiento de componentes, todo en tu código fuente.


Tabla de contenidos:

- Descarga e instalación: Preparando Codux para el masterclass

- Selector de proyectos: Clonación e instalación de un proyecto de demostración

- Introducción a los conceptos principales de Codux y su interfaz de usuario

- Ejercicio 1: Encontrando nuestro camino

- Descanso

- Ejercicio 2: Realizando cambios de manera efectiva

- Ejercicio 3: Reutilización y validación de casos especiales

- Resumen, Cierre y Preguntas y Respuestas

31 min
29 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Wix tiene un equipo genial trabajando en herramientas para desarrolladores, con los principales productos siendo Stylable y CodeX. CodeX es un entorno de desarrollo integrado visual para React que ayuda con la comprensión, modificación y validación del código. Soporta CSS, módulos CSS, Sass, modelos Sass y Styleable para estilos. CodeX permite una navegación, edición y renderización sencillas de componentes, y puede conectarse a fuentes de datos externas. Se puede instalar descargándolo desde codex.com y requiere una cuenta de Wix.

Available in English

1. Introducción a CodeX y Wix

Short description:

¡Hola a todos! Soy Omer, el líder de producto de Codex. Tenemos un equipo genial en Wix trabajando en herramientas para desarrolladores. Nuestros principales productos son Stylable y CodeX. Wix, fundada en 2006, es líder en la industria de creación de sitios web y gestión empresarial. Hoy, vamos a presentar CodeX, guiarlos en la instalación y uso, y valorar sus comentarios.

Así que, hola a todos. Es genial estar aquí. Comenzando con una breve introducción. Soy Omer, lidero el producto de Codex desde el equipo principal. Somos un equipo genial en Wix. Les contaré un poco más en un segundo. Me uní a Wix hace más de cuatro años. He estado trabajando en el producto Codex casi todo el tiempo. Anteriormente, cofundé Rapid UI, que es un producto que estaba en las mismas áreas de Codex, herramientas visuales para trabajar con código pero aún escribiendo código al mismo tiempo. Lo verán en un segundo. Más de ocho años en el ámbito de herramientas y codificación visual en el front-end. Hoy me acompañan algunos de nuestros increíbles miembros del equipo principal para ayudar durante la sesión práctica. Nuestra empresa se dedica principalmente a desarrollar herramientas para desarrolladores, herramientas para equipos de desarrollo. Somos un equipo muy técnico en Wix. Y lo mismo ocurre con nuestros productos. Tenemos dos productos principales. Uno de ellos es Stylable. Es un preprocesador CSS de código abierto. Les hablaremos un poco sobre él hoy. Y CodeX, que es de lo que estamos aquí para hablar. Verán que tenemos a alguien que se nos une. Un poco sobre Wix. Para aquellos que no lo sepan, Wix fue fundada en 2006 para hacer posible que todos tengan éxito en línea. Comenzamos con la creación de una presencia visual y luego agregamos muchas formas de gestionar negocios y crear lo que sea necesario para tener una presencia en línea. Líderes de la industria en creación de sitios web y gestión empresarial. 230 millones de usuarios en todo el mundo y estamos presentes en 17 países. Así que les mostraremos la nueva oferta de Wix para equipos de desarrollo.

Entonces, los objetivos de hoy son: presentar CodeX y nuestro enfoque visual para el frontend. Van a instalar el producto. Van a aprender cómo usarlo y, con suerte,

2. Introducción a CodeX y el Proceso de Desarrollo

Short description:

Nos encantaría conocer sus opiniones y ayudarles a implementar CodeX. Hoy, presentaremos CodeX, haremos una demostración rápida y responderemos sus preguntas. Más tarde, tendremos un desafío práctico. Si están interesados, podemos compartir más sobre la construcción de CodeX y el proceso de desarrollo. Comienza con una necesidad del producto, seguida por el diseño y la implementación real utilizando IDEs.

Disfrutamos haciéndolo. Apreciamos mucho sus comentarios. Así que no duden en compartir sus pensamientos, hacer preguntas, comunicarse, sugerir lo que sea. Nos encantaría escuchar todo lo que tengan que decir. Y, por supuesto, estaremos encantados de ayudarles a implementar CodeX para su equipo y sus necesidades si están interesados al final. Esto es lo que haremos hoy. Comenzaremos con una breve introducción sobre la visión de CodeX y qué estamos haciendo. Haré una demostración rápida, les mostraré cómo funciona el producto, les daré la opción de hacer preguntas. Estaremos aquí para responder. Luego haremos un descanso de unos minutos, regresaremos y comenzaremos a hacer un desafío práctico al final. Si están interesados, podemos contarles un poco más sobre cómo construimos CodeX. Un poco sobre cómo funciona internamente. Así que, entendamos el campo de juego. El proceso de desarrollo tal como lo conocemos hoy y comenzaré con una breve introducción sobre por qué estamos construyendo lo que estamos construyendo. Entonces, todos estamos aquí trabajando en el front-end, ¿verdad? La mayoría de nosotros creamos salidas visuales para lo que sea que necesitemos hacer. Y generalmente necesitamos colaborar. Trabajamos con múltiples personas para entregar, al final del día, algo visual para nuestros usuarios. Por lo general, comienza con una necesidad del producto. ¿Verdad? Algo que necesitamos construir. Una necesidad comercial o una solicitud de producto. Algo que sabemos que necesitamos construir. Por lo general, comienza con el gerente de producto o la persona encargada del producto en el equipo que se encarga de descubrir que necesitamos construir esta cosa. Más adelante en el proceso, una vez que descubrimos lo que necesitamos construir, generalmente comenzamos a jugar con cómo queremos que se comporte, cómo queremos que se vea. Aquí es donde entra el design. ¿Verdad? Tenemos las solicitudes del producto y luego viene el design, tratando de descubrir cómo hacerlo, idealmente juntos. Resolverlo. Por lo general, en entornos separados tienen preocupaciones separadas durante su trabajo. Y este es el momento en el que entra la herramienta de design. Y, por supuesto, lo que todos conocemos y amamos, el paso número tres, tenemos que hacer realmente la cosa. Así que tenemos la necesidad del producto y tratamos de descubrirlo juntos, comenzamos a diseñarlo, resolvemos el concepto. Pero al final del día necesitamos hacerlo funcionar. Necesitamos que se ejecute en entornos reales, escribir código real. Así que eso generalmente es el entorno número tres, nuestros IDEs donde gestionamos nuestro código.

3. Introducción a Codex y Puntos Problemáticos

Short description:

Nos enfrentamos a problemas y puntos problemáticos cuando trabajamos en entornos separados. Comprender y cambiar el código puede ser complejo. Encontrar tu lugar y mantener la confianza puede ser un desafío. Nos apoyamos en herramientas para ayudarnos a implementar lo correcto. Queremos estar seguros y garantizar una validación adecuada. Codex es un IDE visual para React.

Entonces, por lo general, ese sería el flujo común de pasos, múltiples personas trabajando en múltiples entornos que generalmente están separados entre sí, generalmente cada uno con su propia forma de trabajar. Ahora, no solo eso, necesitamos trabajar con entornos separados. Nos enfrentamos a algunos problemas y puntos problemáticos con los que todos podemos relacionarnos. Así que comienza con encontrar nuestro lugar, ¿verdad? No solo es nuestro proyecto, ¿verdad? Por lo general, no es algo que comencemos desde cero. E incluso si es nuestro proyecto que comenzamos siempre necesitamos volver y mantenerlo. Y comprender el código en el que estamos tratando de escribir puede ser complejo, ¿verdad? ¿Qué hace esta cosa? ¿Cómo debo cambiarla? ¿Estoy cambiando lo correcto? ¿Dónde debo cambiar la cosa para que funcione como necesito? ¿Qué hace? Comúnmente nos encontramos jugando con DevTools, dibujando estos rectángulos rojos, tratando de señalar el elemento del DOM que necesitamos seleccionar para hacer el cambio. Así que es muy desafiante ingresar a un código existente o incluso a nuestro propio código que escribimos hace algún tiempo y saber qué necesitamos hacer y dónde. No solo eso, ¿verdad? Tenemos la estructura de nuestro proyecto, tenemos la forma en que deben estar los archivos, alineados. Tenemos nuestras propias convenciones de equipo. Tenemos la forma en que queremos que se estructuren las carpetas, y todo eso. Así que encontrar tu lugar puede ser más desafiante de lo que parece. Ahora, no solo eso. Queremos mantener la confianza y queremos avanzar rápido. Cosas que nos encontramos haciendo, queriendo hacer el cambio, incluso si ya sabemos lo que queríamos hacer, ¿verdad? Tenemos la solicitud de design y sabemos dónde necesitamos hacer el cambio en el código, pero ¿cómo lo hacemos? ¿Siempre sabemos qué necesitamos cambiar y dónde y cómo lo hacemos? Así que en estos dos ejemplos estoy tratando de representar estos casos en los que siempre tenemos que confiar en esta otra herramienta. Un cuarto entorno. Algo que nos ayudará a descubrir cómo implementar correctamente lo correcto. Muchas veces, para cosas visuales, nos encontramos trabajando con herramientas visuales para ayudarnos a asegurarnos de que estamos obteniendo el resultado correcto. Ahora, lo último que nos importa es estar seguros. Queremos asegurarnos de que no hayamos cambiado realmente algo que no queríamos o que hayamos logrado cubrir todos los casos. Cambiar algo. ¿Cómo sé que cubro todos los casos? Lo que vemos aquí es la distribución de Android en diferentes dispositivos que fue en 2015, creo, así que puedes imaginar cómo ha evolucionado desde entonces. Y no solo se trata de pantallas. ¿Afecté algo que no debía? ¿Tengo la validation adecuada para asegurarme de que no cambié algo que no debía? ¿Tengo una confirmación de que el cambio que se hizo se realizó en todos mis diseños? Y, por supuesto, para ayudar a otros a trabajar con mi código y estar seguros cuando se unan a mi flujo de trabajo, necesito ayudarlos, ¿verdad? Así que estoy creando estas páginas de documentation o incluso desde el lado de Linux, creando esta documentation de API para asegurarme de que las personas puedan interactuar con el código de la forma en que queremos. Así que volviendo a lo que acabamos de hablar. Comprender el código sería lo primero. ¿Qué debo hacer? ¿Dónde debo implementarlo? ¿Cómo debo implementarlo? ¿Qué necesito cambiar realmente y cómo puedo ser efectivo? ¿Cómo puedo asegurarme de hacerlo lo más rápido posible? Y por último, ¿cómo puedo confirmar que no cambié algo que no quería? ¿Que tengo todo lo que necesito cubierto? Con eso, permítanme presentarles Codex.

4. Codex IDE y Stack Compatible

Short description:

Codex es un entorno de desarrollo integrado con un enfoque visual para gestionar el front-end. Puedes editar código de React, TypeScript y estilos directamente, mientras ves los cambios en tiempo real. Puedes trabajar junto a Codex en tu IDE, implementar tu código en cualquier lugar y utilizar tus propias bibliotecas de terceros. Admitimos CSS, módulos CSS, Sass, modelos de Sass y Styleable para estilos.

Entonces, Codex es un IDE visual para React. Cuando decimos IDE, lo decimos en serio. Es un entorno de desarrollo integrado. Tiene todas estas capacidades que ya conoces, puedes escribir código libremente, gestionar scripts, gestionar Git, todo eso. Pero además de todo eso, tenemos nuestro propio enfoque visual para gestionar el front-end, cosas que al final del día deberían ser visuales. En Codex, el código es la única fuente de verdad. No hay traducciones, no hay código sucio o intermedio para traducir lo que estás haciendo. Simplemente estás editando código de React y TypeScript y, por supuesto, los estilos que estás utilizando. No hay nada en medio. Desarrollas componentes de forma aislada, pero al mismo tiempo puedes ejecutar la aplicación completa, ejecutar las páginas completas. Trabajamos de forma visual, ¿verdad? Tenemos nuestro enfoque visual para gestionar el front-end, pero siempre puedes ver los cambios reflejados en el código en tiempo real. Así que eso vuelve a los primeros puntos. Editamos código y nada más. Editamos directamente tu código de React, TypeScript y estilos. Eso significa que puedes mantener tu IDE. Aún puedes trabajar de la forma en que estás acostumbrado en tu IDE junto a Codex si así lo deseas. Trabajas localmente en los archivos de tu máquina y puedes implementarlo donde quieras. Al final del día, este es tu código. Nosotros solo somos un entorno de edición que ejecuta tu código y te ayuda en el proceso. En cuanto a la complejidad, los componentes y el entorno pueden ser tan simples o tan complejos como necesites que sean. Al final del día, es tu código. Y nosotros solo podemos ayudarte a ejecutarlo de la forma en que deseas. Nuestro stack compatible, trabajamos con componentes de React escritos en TypeScript. Dependemos en gran medida de TypeScript para ayudarte a trabajar con las propiedades de los componentes. Lo verás durante la demostración. Puedes utilizar tus propias bibliotecas de terceros cuando trabajas con Codex. Nuevamente, es tu código, tu proyecto. Y puedes utilizar estas cuatro soluciones de estilos que admitimos. CSS y CSS con CSS modules, Sass y modelos de Sass, Styleable, que es nuestra solución de estilos interna. Te contaremos un poco más al respecto al final si estás interesado. Lo utilizamos mucho en Wix. Y estoy seguro de que muchos de ustedes lo encontrarán muy útil.

5. Solución de Estilo de CodeX y Demostración

Short description:

Hemos agregado Tailwind a nuestra última versión. Ahora, pasemos a CodeX para una demostración. Hemos creado un proyecto llamado Git Ducks, una startup con características brillantes de gestión de Git. Hoy, rediseñaremos la barra superior y el botón de conexión. Esta es la página del proyecto de CodeX.

Y la última solución de estilo que admitimos, Tailwind, que fue muy solicitada por la community desde que lanzamos el producto. Y acabamos de agregarlo a nuestra última versión. Así que, eso es realmente genial. De acuerdo. Entonces, ese sería el momento de la demostración. Así que, voy a pasar a CodeX por un segundo. Perdón. Permíteme repasarlo. Entonces, para la demostración, hemos creado este proyecto. Se llama Git Ducks. Es una nueva startup. Es un proveedor de servicios. Tiene todas las características brillantes de una solución de gestión de Git. Pero tiene un gran impacto en la conexión entre diferentes desarrolladores. Por supuesto, no es una empresa real. Lo creamos para esta demostración. Pero representa un caso de uso real de una aplicación React y TypeScript. Hoy vamos a hacer dos tareas. La primera será rediseñar esta barra superior. Entonces, el equipo de design del producto de Git Ducks tiene una nueva necesidad. Quieren hacer que las conexiones entre los desarrolladores sean más prominentes. Lo han desglosado, lo han especificado y este es el resultado deseado para el equipo. Así que, tuvimos una reunión y este es el resultado deseado que queremos construir. Y vamos a ver cómo podemos usar Codecs para design esto. Así que, vamos a reorganizar esto. Y vamos a cambiar el design del botón de conexión. Pasemos a Codecs.

De acuerdo. Antes de comenzar, repasemos lo que vemos aquí. Esta es la página del proyecto

6. Introducción a Codecs y Configuración del Proyecto

Short description:

En Codecs, puedes crear nuevos proyectos, usar plantillas o boilerplates, abrir proyectos locales o clonar proyectos desde Git y acceder a tutoriales. Vamos a abrir un proyecto existente, GitDUX, para ver cómo está construido. Es similar a cualquier aplicación React con archivos de componentes, estilos y dependencias. En Codecs, encontrarás el mismo proyecto con un enfoque visual. Los componentes están a la izquierda y los boards se utilizan para renderizar los componentes.

página de Codecs. Aquí es donde todo comienza, ¿verdad? Lo que ves aquí son los proyectos recientes en los que he estado trabajando. Vamos a empezar con Git Ducks en un segundo. Pero solo quiero mostrarte lo que puedes hacer aquí. Entonces, en Codecs, tienes dos opciones cuando comienzas. O supongo que tres. Lo verás en un segundo. Entonces, la primera opción sería crear un nuevo proyecto. Puedes usar una de nuestras plantillas, uno de nuestros boilerplates. Puedes ver que estamos usando tecnologías bastante comunes y estamos agregando más a medida que avanzamos. Y hemos agregado estas plantillas de inicio rápido para que puedas jugar con lo que estamos haciendo. Puedes abrir proyectos locales desde tu máquina o clonar proyectos desde Git. Y puedes echar un vistazo a nuestros tutoriales si estás tratando de aprender y entender cómo funciona Codecs. Tenemos este proyecto de tutorial y algunos videos para que juegues. Pero lo que queremos hacer es abrir un proyecto existente en el que ya estoy trabajando. Ese es GitDUX. Ahora solo quiero que veas cómo está construido GitDUX. Así que este es el repositorio de GitDUX. Puedes verlo aquí mismo. Y es bastante similar a cualquier proyecto que conozcas, ¿verdad? Ves que tenemos un archivo package.json con las dependencias y las bibliotecas que usamos aquí. Tenemos archivos de componentes que puedes ver, componentes de React adentro, estilos como hojas de estilo. Tenemos módulos de nodo con dependencias, bibliotecas que estamos usando, activos, variables, todo eso. Así que eso es prácticamente una aplicación típica de React. Volviendo a Codecs, ahora estamos aquí, ves exactamente el mismo proyecto, ¿verdad? Este es el mismo repositorio. Estos son los mismos archivos con nuestro enfoque más visual para el desarrollo. A la izquierda, los componentes de mi proyecto. Estos son los componentes recientes en los que he estado trabajando. En el centro, estos son los boards. Los boards son conceptos de Codecs. Es solo una forma de renderizar componentes. Es como un envoltorio.

7. Renderización de Componentes y Edición de Código

Short description:

Los boards son formas de renderizar componentes y estados. El stage es el entorno de renderizado de Codecs, donde puedes interactuar con el código. El panel de elementos representa la estructura del DOM y el código fuente, mientras que el panel de propiedades se utiliza para editar las props del componente. El panel de estilos calculados ayuda a validar el código y verificar la implementación.

a un componente. Puedes renderizar dentro de cuantos componentes quieras, pasar diferentes props a él, pasar data, por lo que básicamente puedes verificar todos los estados de tu componente y mientras estás editando tu componente, puedes editar cada uno de esos estados. Entonces, los boards son simplemente formas de renderizar componentes y estados. Así que voy a abrir los componentes de la aplicación. Solo quiero que veas el proyecto por un segundo. Justo antes, vamos a sumergirnos en las tareas mismas.

Aquí, en el centro, tenemos el stage. Este es el entorno de renderizado de Codecs. Aquí es donde renderizamos el código, por supuesto. Ahora puedes jugar con él como si fuera como las herramientas de desarrollo o algo que vemos en el navegador. Los estados se activan. Los comportamientos que deben ser activados por la interacción del usuario se activan. Así que todo aquí está vivo. Es un componente React. Pero al mismo tiempo, puedes ver que cuando estoy cambiando a este modo, puedo tocar los diferentes elementos y básicamente puedo acceder a todas las partes que construyen este componente de la aplicación o este componente de la página de perfil o lo que sea. Puedes ver que me estoy moviendo en diferentes ámbitos, cambiando lo que estoy editando en cada punto, pero puedo tocar todas las piezas que al final del día, este componente está compuesto. Ahora, eso se puede hacer desde el stage o desde el lado izquierdo aquí, puedes ver el panel de elementos. El panel de elementos es una representación de la estructura del DOM combinada con tu código fuente. Puedes ver que tenemos elementos HTML, componentes de mi proyecto o de bibliotecas de terceros, y expresiones, cosas que hacen que otros elementos se comporten o se muestren, cosas como mapas, repetidores, condiciones, otras expresiones que pueden no mostrarse en el DOM pero tienen un gran impacto en cómo se ve el DOM al final del día. Entonces, como dije, es una combinación del DOM y el código fuente. A la derecha, el panel de propiedades, ese es el primero. Aquí es donde editamos las props del componente. Ahora, verás en un segundo cómo lo hacemos y cuándo debemos usarlo. Pero al igual que el panel de elementos, el panel de propiedades es un reflejo del código. Cualquier cambio que haga en mi código afectará a todos los paneles en consecuencia. Y viceversa. Por supuesto, estamos editando la misma fuente. Justo debajo, el panel de estilos calculados. Y como probablemente lo sepas, representa los estilos del elemento que actualmente he seleccionado. Entonces, es una herramienta muy útil cuando intento verificar que hice todo correctamente, que implementé todo correctamente, que estoy usando los valores correctos, una forma para que los miembros de mi equipo verifiquen mi trabajo también. Pero no es solo una herramienta para verificar mi código para validación.

8. Navegación y Rediseño de Codex

Short description:

Codex permite una fácil navegación y edición de código. El panel de estilos sirve como editor de CSS, proporcionando acceso a todas las propiedades necesarias. Los archivos se pueden acceder en cualquier momento. En esta tarea, rediseñaremos el componente de la barra superior reestructurando la posición de un botón.

Es una herramienta muy útil para la navegación. ¿Ves este botón aquí? Al hacer clic en él, me llevará al lugar correcto que necesito para editar este color de fondo si quiero cambiarlo. Entonces, voy a hacer clic en él y me redirige al tercer panel aquí. El panel de estilos. Este es nuestro editor de CSS. Ahora aquí, estoy editando básicamente todo lo que es estilo. Considera que ya estaba seleccionado en este botón seleccionar todo. Y tengo todas las propiedades que necesito editar aquí mismo frente a mí. Fin. Todo aquí siempre está disponible a través del código. Entonces, esta vez salté al código de la hoja de estilos. Pero tienes acceso a todos los archivos de este proyecto en todo momento. Esto es como tu ID. Entonces, los archivos siempre se pueden acceder a través de Codex también. Comencemos con la primera tarea. Entonces, solo recordemos a todos cuál era. Entonces, vamos a hacer este rediseño. Esto es Codex. Voy a volver a la página de inicio y queremos manipular el componente de la barra superior. Entonces, puedes ver que ya he creado tres boards. Estos son los diferentes estados de esta componente, permutaciones que eran importantes para asegurarme de que existieran. Entonces, lo que queremos hacer sucede aquí. Así que echemos un vistazo rápido a cómo se construye este código y qué queremos hacer con él. Entonces, el primer cambio sería reestructurar la posición de este botón. Así que simplemente lo voy a arrastrar aquí y lo voy a colocar en la parte superior. Entonces, como puedes ver, simplemente moví el elemento en el orden JSX. Lo estoy editando desde el stage y mantengo mi código como estaba. Simplemente lo reemplacé donde quería que estuviera. Eso fue fácil.

9. Cambiando el Estilo del Botón y el Efecto Hover

Short description:

Para cambiar el estilo del botón, hago doble clic en él y entro en su ámbito. Cambio el color de fondo usando una variable. Luego, cambio el color del texto a blanco usando otra variable. Para arreglar el efecto hover, bloqueo el elemento al pasar el cursor sobre él y realizo los cambios necesarios. Después de restablecer, el diseño se ve perfecto. Los cambios no afectan a otros componentes.

Pasemos al segundo cambio. En realidad, queremos cambiar el estilo del propio botón. Entonces, voy a hacer doble clic y entrar en el ámbito del botón, ¿verdad?, porque quiero cambiar el componente del botón de conexión y no la barra superior que lo está utilizando. Entonces, lo primero que queríamos era cambiar el color de fondo. Voy a hacer clic aquí mismo porque me ayudará a ir a donde necesito ir. Y voy a cambiar el fondo. Así que, haciendo clic aquí mismo, veo que estoy usando un valor RGB. También puedo ver el código. Y podemos ver que no es lo que queremos, ¿verdad? No es el color y definitivamente no es la forma en que queremos codificarlo. Así que voy a usar una variable. Como puedes ver, tengo todas las variables de mi proyecto disponibles aquí. Solo voy a hacer clic en ella. Y como puedes ver, el cambio se ha aplicado. Lo veo en el escenario y lo veo en mi CSS. La segunda cosa que quiero hacer es cambiar el color del texto a blanco, igual aquí. Voy a usar una variable, primaryLight, y obtengo el diseño como quiero, ¿verdad? Así que voy a cambiar a vista previa solo para comprobar. Por supuesto, no hemos manejado el hover. Así que casi es perfecto, pero aún no. Arreglemos el hover juntos aquí en el panel de administración de estados. Voy a hacer clic y bloquear el elemento al pasar el cursor sobre él. Ahora, esta es una forma realmente genial de diseñar, bloquear un elemento en un estado específico. Ahora puedo hacer los cambios y verlo en ese estado específico. Ahora, como puedes ver, acaba de aparecer un nuevo selector aquí cuando lo bloqueé. Queremos asegurarnos de que veas lo que agregaste en CodeX. Si no tuviera este selector, se me ofrecería crear uno, pero en este caso, queremos cambiar algo que ya existía. Y voy a cambiar el color de fondo aquí también. Nuevamente, permíteme mostrarte el código que estoy editando. Puedes ver que es button hover, y lo voy a cambiar a primary dark. Así que ahora, cuando lo restablezca a su comportamiento normal, volviendo a la vista previa, ahora puedo ver que el diseño se ve bastante perfecto.

Bien, asegurémonos de que todo se vea bien, ¿de acuerdo? Tenía tres estados que creé anteriormente, y puedes ver que es el mismo componente, ¿verdad? Vemos el mismo componente de la barra superior colocando todos estos tres tableros, y veo que el diseño no se vio afectado más de lo que quería, ¿verdad? Así fue como se diseñó. Lo mismo ocurre con mi componente de la aplicación, ¿verdad?

10. Creando el Componente de Conexiones

Short description:

Acabo de rediseñar esto. Lo completamos rápidamente y se lo enviamos al equipo de diseño. Les gustó y lanzamos el producto. Ahora, tenemos una nueva solicitud para crear un componente que muestre las conexiones del usuario. Volvamos a Codex y creemos un nuevo componente llamado Conexiones. Puedes usar plantillas para personalizar la estructura y los archivos. Echemos un vistazo rápido al componente de Conexiones.

No afectó nada que no quisiera. Acabo de rediseñar esto. Entonces, la siguiente tarea que debo hacer sería confirmar y enviar mis cambios. Así que voy a escribir un mensaje de confirmación. Por supuesto, siéntete libre de usar el método que estás acostumbrado a usar para gestionar Git. Esto es solo una representación de los flujos de Git, pero está todo conectado a la forma en que funciona. Así que si estás acostumbrado a usar la terminal, siéntete libre de hacerlo. Si quieres usar tu IDE, está bien. Y también puedes usar la interfaz de Git de Codex.

Esa fue la primera tarea. La completamos bastante rápido. Muy bien. Lo enviamos de vuelta al equipo de design. Les gustó mucho y lanzamos el producto. Pero recibimos una nueva solicitud. Vale, no solo queremos conectar a los desarrolladores. También queremos asegurarnos de que entiendan cuántas conexiones tienen. En este caso, se nos pidió crear esta nueva cosa. Así que vamos a crear un nuevo componente juntos que mostrará al usuario cuántas conexiones tiene. Así que voy a volver a Codex. Volviendo a la pantalla de inicio, voy a crear un nuevo componente. Puedes ver este botón aquí mismo. Ahora se me ofrece usar las plantillas que tengo en este proyecto. Voy a llamar al componente Conexiones. Esta plantilla puede ser lo que quieras. Puedes elegir la estructura de archivos y carpetas que quieras reutilizar. Si tienes eso, las plantillas de componentes en Codex son completamente tuyas para crear y controlar. Si tienes una estructura que te gusta, archivos, variables que se importan, contexto, lo que necesites en tu componente, puedes crear las plantillas que necesitas para acelerar tu flujo de trabajo.

Echemos un vistazo rápido a lo que acabamos de recibir aquí. Tenemos este componente de Conexiones. Renderiza el texto.

11. Creando la Estructura Básica de un Componente React

Short description:

Esta es una estructura básica de un componente React con una hoja de estilos. El tablero renderiza el componente Conexiones y podemos pasarle datos. Creemos el componente agregando elementos y manejando propiedades requeridas. Finalmente, agregaremos un elemento span para representar el número de conexiones.

Aquí puedes ver que es una estructura básica del componente React. Tengo esta hoja de estilos aquí que fue creada. Este proyecto utiliza Sass modules. Esta es la hoja de estilos que fue creada. Nuevamente, esto se basa en las plantillas que tengo. No tiene nada adentro. Y el tablero, el tablero simplemente renderiza mi componente Conexiones. Y si más adelante necesitamos pasar datos al componente, lo utilizaremos. Lo verás en un segundo.

Entonces, comencemos creando el componente. Voy a hacer clic en este botón Agregar, y veré el panel de agregar elementos. Ahora, esta es una forma de agregar más y más elementos a la estructura. Puedo usar diferentes elementos HTML, componentes de mi proyecto o de bibliotecas de terceros. En este caso, se está demostrando Bootstrap, pero siéntete libre de usar lo que quieras. Voy a comenzar con el componente de icono. Ese es el primer elemento que queremos agregar. Nuevamente, puedo arrastrarlo aquí al escenario. Y puedes ver que se importa al archivo, ¿verdad? Y se agrega a la estructura JSX. Pero aún veo este error. Y obtengo este error de tipo. Y dice que falta esta propiedad requerida. También puedo verlo aquí en el panel de props. Como dije, las props son una representación de la interfaz de ese componente. Así que simplemente lo reflejamos de manera visual. Ahora mostramos que hay un error aquí y obtengo todos estos valores que esta propiedad puede aceptar. Entonces, si elijo este valor de seguidores, este es el diseño que necesitamos. Puedes ver que ya no vemos el error y todo se renderiza como se espera.

Bien, voy a agregar otro elemento. Voy a usar un span. Esto se usará para representar el número de conexiones que tiene este usuario.

12. Conectando el Texto a una Fuente de Datos Externa y Arreglando el Diseño

Short description:

Queremos conectar el texto a una fuente de datos externa y exponer una propiedad para la interfaz del componente. Aunque esta función aún no está disponible en los paneles visuales de Codecs, estamos trabajando en ello. Voy a demostrar cómo implementar el cambio en VS Code y mostrar que todo funciona en conjunto. Al agregar la propiedad 'count' a la estructura del componente y reemplazar el texto, podemos ver la expresión en el árbol de elementos. El tablero es un archivo en tu repositorio que se puede gestionar desde VS Code o cualquier otra ubicación deseada. Antes de arreglar el diseño, debemos asegurarnos de que la composición se vea bien agregando el componente 'connections' y conectándolo a los datos de la interfaz 'Toppar'.

Pero en este caso, no solo queremos tener un texto fijo. Queremos conectarlo a una data que proviene de una fuente externa. Necesitamos que el usuario vea el número real de conexiones. Por lo tanto, en este caso, vamos a exponer una propiedad para esta interfaz del componente.

Ahora, esto es algo que actualmente no cubrimos en Codecs desde los paneles visuales. Estamos trabajando en algunos de estos aspectos y nos encantaría recibir tus comentarios. Así que todavía sucede en el código. Solo quiero mostrarte cómo puedo pasar a VS Code para implementar el cambio que quiero hacer y volver a Codecs.

Voy a llamar a esta propiedad 'count' y voy a usar un número. Lo agregaré a la estructura de este componente, y reemplazaré este texto con la propiedad 'count'. Ahora, una vez que guardo y vuelvo a Codecs, veo aquí que ya no veo el texto, pero veo en el árbol de elementos que tengo una expresión. Ahora, puedes ver que también se cambió en el código aquí. Básicamente, todo funciona en conjunto.

Ahora volveré al tablero y veré las props de este componente. Puedes ver que ahora tenemos una nueva propiedad agregada, la propiedad 'count'. Y una vez que le pase cualquier valor, lo veré renderizado como queremos que se vea. También puedes verlo aquí. El tablero es solo un archivo en tu repositorio. Puedes hacer lo que quieras. Si quieres gestionar las cosas con código, está bien. También puedes hacerlo desde VS Code. Los tableros se agregan a tu proyecto, y puedes colocarlos donde quieras y gestionarlos desde VS Code o desde donde desees, si así lo deseas. Bien. Eso es más o menos lo que queríamos, ¿verdad? Vemos que tenemos un problema de diseño, pero antes de arreglarlo, solo quiero asegurarme de que todo se vea bien en esta composición, ¿de acuerdo? Esta es la tarea que hemos recibido.

Voy a hacer clic en agregar panel nuevamente, y ahora veré este nuevo componente, el componente 'connections' aquí mismo, ¿verdad? Y lo agregaré en la parte inferior donde el diseñador lo ha indicado. Y ya puedo ver que tengo esta data que no se muestra, ¿verdad? Entonces, en este caso, quiero conectarlo a la data que proviene de la interfaz de 'Toppar'. Entonces, lo que acabo de hacer aquí fue exponerlo a la interfaz de usuario que este componente 'Toppar' está pasando. Ahora, una vez que lo he conectado, puedes ver que se muestra un número. Este es el número que proviene del tablero de este componente 'Toppar'. Y ahí es donde quería que estuviera conectado. Ahora, una vez que hemos cubierto eso, podemos hacer la última cosa, que sería arreglar el diseño aquí mismo.

13. Editando y Probando el Componente de Conexiones

Short description:

Puedo editar el componente de conexiones desde cualquier ámbito y cambiar todo lo que necesito visualmente. Se ve bien en diferentes estados y con diferentes datos. Guardo los cambios para mis compañeros de equipo. Eso es más o menos lo que quería mostrarte. He terminado mi tarea, hecho el rediseño, creado un nuevo componente y lo he probado. Puedo crear otro tablero para el componente de Conexiones si es necesario. Eso es lo que queríamos mostrarte en Codex. Te ayudaremos a instalar el producto.

Entonces, nuevamente, al profundizar en el componente de conexiones, ahora puedes ver que básicamente puedo editarlo desde cualquier ámbito, ¿verdad? Este es el componente Toppar, y esto es lo mismo, solo aislado de los demás. En este caso, voy a usar un diseño de flexbox bastante básico. Quiero que veas el código mientras lo hago. Así que voy a elegir flexbox y quiero que las cosas estén alineadas al centro. Y voy a usar un pequeño espacio entre columnas de tres píxeles, eso es según el design. Y puedo ver que se ve exactamente como debería, ¿verdad?

Así que pude cambiar básicamente todo lo que necesitaba cambiar desde esta experiencia visual. El código se ve bien. Ahora asegurémonos de que se vea bien en estos tres estados. Veo que no afecté nada. Lo mismo ocurre con mi aplicación. Puedes ver aquí que se ve genial. Tengo diferentes data en mi aplicación. Así que eso es increíble. Significa que estoy realmente conectado a los data que fluyen, pero los estoy representando correctamente. Esa sería la última cosa que tengo que hacer, volver a guardar mis cambios para que mis compañeros de equipo puedan obtener ese componente. Por supuesto, si tienes confirmaciones eventuales y todo eso, siéntete libre de usarlas. A partir de ahora, eso es tuyo. Y eso es todo. Eso es más o menos lo que quería que vieras. He terminado mi tarea. He hecho el rediseño, creado un nuevo componente, me he asegurado de que todos los estados afecten lo que deberían afectar. Lo he probado en diferentes estados. Puedo volver aquí y crear otro tablero para mi componente de Conexiones si quiero. Digamos, conexiones número largo. Si solo quiero asegurarme de que no afecté algo que no debería haber afectado, puedo darle un ancho máximo y agregar puntos suspensivos si quiero. Esa es mi forma de asegurarme de que todos los estados se gestionen correctamente. Al final del día, todo lo que hago se refleja aquí. Eso es lo que queríamos mostrarte en Codex. Te ayudaremos a instalar el producto. Por cierto, estos son los enlaces.

14. Instalación y Configuración de Codex

Short description:

Te ayudaremos a instalar el producto Codex. Ve a codex.com, descárgalo para tu sistema operativo y asegúrate de tener Git y node instalados. Inicia sesión con tu cuenta de Wix o crea una nueva. Una vez dentro de Codex, utiliza el código QR proporcionado para escanear y descargar. Comenzaremos la configuración del proyecto y brindaremos asistencia si es necesario.

Volveremos a eso en un segundo. Así que te ayudaremos a instalar el producto Codex. Si quieres hacerlo en este descanso de unos minutos, eres más que bienvenido. Ve a codex.com. Te mostraré el código QR en un segundo. Descárgalo. Tienes todos los diferentes sistemas operativos. Deberíamos tenerlos todos cubiertos. Creo que sí.

En este punto, una vez que lo inicies, nos aseguraremos de que tengas Git y node instalados. Estos son los dos requisitos de Codex para poder ejecutar proyectos reales. Y tendrás que iniciar sesión. Inicia sesión con tu cuenta de Wix o crea una nueva. Y una vez que lo hagas, deberías estar dentro de Codex. Así que nuevamente, siéntete libre de usar este código QR para escanear. Fue un poco más rápido, así que volveré cinco minutos antes de las cinco en punto. Eso serían 12 minutos a partir de ahora. Así que tómate tu tiempo. Descarga Codex mientras tanto e instálalo.

Lo siguiente que haremos será comenzar la configuración del proyecto y comenzar a realizar algunas acciones. Y nuevamente, si necesitas ayuda, hay varios de nosotros aquí que estaríamos encantados de ayudarte con lo que necesites hacer. Si tienes algún problema, simplemente escríbelo aquí en el chat. Ya hemos creado salas de trabajo previas, así que si necesitas asistencia personalizada, no dudes en pedirla. Estamos aquí para ayudarte.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.