De Todo App a B2B SaaS con Next.js y Clerk

Rate this content
Bookmark

Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?


Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.


En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.

This workshop has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

La multi-tenencia es un concepto de desarrollo de software donde múltiples grupos de usuarios utilizan una misma aplicación, cada uno con su estado compartido. Por ejemplo, en una aplicación multi-tenant, diferentes organizaciones pueden tener su propio espacio aislado dentro de la aplicación pero utilizando la misma infraestructura.

Se puede implementar utilizando servicios como Clerk, que proporcionan autenticación y gestión de usuarios integrando componentes listos para usar que manejan sesiones de usuario, autenticación multifactor y más. Esto permite a los desarrolladores concentrarse en las características core de la aplicación sin tener que desarrollar sistemas de autenticación complejos.

Stripe es una plataforma de pagos que permite a los desarrolladores integrar la capacidad de realizar transacciones financieras en sus aplicaciones de manera segura. La integración se realiza a través de la API de Stripe, configurando sesiones de pago y manejando webhooks para eventos de pago.

Los webhooks son endpoints URL en una aplicación que reciben mensajes automáticos de Stripe cuando ocurren eventos específicos, como la finalización de una sesión de pago. Estos mensajes permiten que la aplicación ejecute procesos como actualizar el estado de una suscripción o usuario basándose en las actividades de pago.

Para escalar una aplicación SaaS se pueden utilizar herramientas y plataformas cloud que ofrecen servicios escalables y gestionados, como bases de datos, autenticación y procesamiento de pagos. Además, es crucial implementar buenas prácticas de diseño de software, como la optimización de código y la gestión eficiente de recursos.

Clerk ofrece gestión de usuarios y autenticación como servicio, simplificando la integración de funciones de seguridad en aplicaciones. Proporciona componentes preconstruidos, gestión de sesiones, autenticación multifactor y manejo de metadatos, facilitando a los desarrolladores centrarse en las funcionalidades centrales de sus aplicaciones.

Dev Agrawal
Dev Agrawal
153 min
09 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La masterclass se centra en la construcción de una aplicación básica de Todo y su transformación en un producto SaaS completamente funcional utilizando herramientas modernas de desarrollo. Herramientas de desarrollo como Next.js, Vercel, Clerk, PlanetScale y Stripe se utilizan para simplificar el proceso de desarrollo. La masterclass cubre temas como la solución de problemas, la adición de interactividad e integración de bases de datos, la implementación de autenticación y pago, la personalización de los componentes de Clerk, la adición de planes de pago premium con integración de Stripe y la implementación de características multi-tenant. Se anima a los participantes a proporcionar comentarios y compartir sus proyectos construidos con Clerk.

1. Introducción a la Masterclass

Short description:

Gracias a todos por estar aquí. La masterclass se llama De una TodoApp a una Aplicación SaaS B2B. Vamos a comenzar con una aplicación muy básica de Next.js que es una aplicación Todo. Y al final de esta masterclass, queremos llegar a un producto SaaS completamente funcional que podamos desplegar y tener usuarios para él. A lo largo de nuestro tiempo como desarrolladores de software, a menudo tenemos ideas o proyectos que enfrentan fricción al intentar construir un software funcional. Las preocupaciones adyacentes, como el despliegue, las bases de datos, la autenticación y los pagos, a menudo se interponen. Sin embargo, hay una nueva generación de herramientas de desarrollo que está cambiando esto. Estas herramientas aprovechan la nube, son confiables y escalables, y optimizan la experiencia del desarrollador.

Gracias a todos por estar aquí. Permítanme compartir rápidamente mi pantalla para que podamos comenzar esta fiesta. La masterclass se llama De una TodoApp a una Aplicación SaaS B2B. Oh, ¿qué está pasando allí? Genial. Permítanme asegurarme de tener el chat aquí. Obviamente hay un código QR aquí, pero realmente no podemos usar códigos QR. No es la mejor opción para transmitir o, digamos, en Zoom. Permítanme copiar y pegar este enlace para el kit de inicio de la masterclass, o el repositorio de inicio de la masterclass aquí en el chat.

Así que básicamente la idea de la masterclass es que vamos a comenzar con una aplicación muy básica de Next.js que es una aplicación Todo. Ni siquiera funciona. Es una aplicación Todo que no funciona. Y al final de esta masterclass, queremos llegar a un producto SaaS completamente funcional que podamos desplegar y tener usuarios para él, incluso miles o millones de usuarios. Esa es la idea que queremos conseguir para la masterclass de hoy. De nuevo, es una masterclass muy práctica. Les animo encarecidamente a que sigan el ritmo. Y la mejor manera de seguir el ritmo es a través del repositorio de inicio. Y antes del repositorio de inicio, asegúrense de tener estas cosas instaladas. Obviamente, si han hecho algún tipo de desarrollo con JavaScript React antes, probablemente ya tengan Git y node.js instalados. Pero lo que sería realmente útil es tener instalado el CLI de Stripe. También voy a mostrar rápidamente cómo se ve el repositorio. Se ve algo así. Permítanme comprobar si pueden ver esto. Sí. Así que, este es el repositorio de GitHub que deberían poder ver desde la aplicación Todo hasta la SaaS B2B. Y esto les muestra cómo clonarlo, entrar en él, y luego. Así que, específicamente voy a estar usando BUN a veces. Es simplemente un reemplazo para npm. Así que, cada vez que vean algo como BUN install, o si me ven escribiendo BUN dev o BUN run un script, simplemente podemos reemplazar eso con npm. De hecho, podría hacerlo con npm. Y realmente asegúrense de que pueden ir a los servicios que vamos a estar usando a lo largo de esta masterclass, y pueden crear una cuenta allí. Y la parte más importante es que asegúrense de tener instalado el CLI de Stripe, porque vamos a estar usando el CLI de Stripe un par de veces a lo largo de esta masterclass. Ahora antes de realmente entrar en la parte práctica, y en este punto voy a cambiar de diapositivas. Así que, asegúrense de tener abierto el repositorio, tienen todo lo que necesitan, o pueden empezar a instalar y configurar el repositorio al lado. Mientras yo rápidamente me presento. Soy dev. Ese es mi nombre. También soy un dev. He estado escribiendo aplicaciones de JavaScript de pila completa durante unos siete años ahora, y actualmente trabajo como defensor del desarrollador en Clerc, que es un patrocinador de React Summit, y Clerc es una solución de gestión de usuarios para React, como vamos a ver pronto en esta masterclass. Y antes de realmente entrar en, como, la parte práctica, quiero transmitir el punto de lo que estamos tratando de lograr hoy. ¿Alguna vez, como desarrollador de software, has tenido esos momentos en los que alguien se acerca con ideas para una nueva aplicación? O, digamos, hey, los tableros Kanban realmente apestan. Quiero algo más sencillo. Quiero una forma más sencilla de hacer la gestión de proyectos. O si tienes tus propias ideas de cómo podría ser una mejor aplicación de planificación de viajes, o ya estás en camino de incluso construir una startup a partir de tu idea, o tal vez incluso has contratado a un equipo y asegurado un poco de financiación, y estás bien encaminado para cambiar el mundo con la mejor aplicación de gestión de tareas que el mundo ha visto, o la próxima generación de plataforma de medios sociales descentralizada, o recién salida de San Francisco, esto es cómo la IA cambiará tu producto de vida. Básicamente, la idea es, ¿alguna vez has tenido, como, muchas de estas grandes ideas de aplicaciones que deseas que existan y que quieres construir? ¿Cuántas de estas ideas llegan a producción? ¿Qué tal un prototipo? ¿Qué tal solo una demo? Tal vez algo que armamos durante el fin de semana, tal vez algo que conseguimos con amigos para el fin de semana, o tal vez vamos a hackatones, y allí estamos tratando de construir algunas cosas. Así que lo que quiero que, lo que quiero que todos piensen es, a lo largo de nuestro tiempo como desarrollador de software, ¿cuántas veces ha pasado eso? Cuando tenemos ideas, o tenemos, o tal vez incluso tenemos proyectos, tenemos startups, pero entonces hay esta especie de fricción inevitable que surge cada vez que intentamos impulsar esto hacia adelante y construir un software funcional a partir de él. Porque a medida que pasamos de la fase de ideación a la izquierda a una fase de software funcional a la derecha, hay muchas cosas como, okay, ¿dónde despliego esto? ¿Cómo despliego esto? Necesito conseguir una base de datos, ¿necesito Docker? La gente está hablando de Lambdas. Todo el mundo está volviendo a Postgres. ¿Cómo añado Authon a esto? Acabo de hackear un tablero de control. No quiero construir perfiles de usuario, invitaciones de organización, integrar con servicios de correo electrónico, asegurarme de que todo esté seguro. Probablemente también vas a estar almacenando algunos datos sensibles. Y si alguna vez quieres cobrar a tus usuarios, ¿cómo gestionas los pagos? ¿Vas a tratar ahora con números de tarjetas de crédito? Hemos oído hablar de algo llamado Stripe. ¿Cómo funciona eso? Así que estas son las ideas de lo que entra en esta sección roja, que son las preocupaciones adyacentes. Estas no son realmente cosas que están relacionadas con la idea, la cosa que realmente quieres construir, pero estas cosas inevitablemente se interponen. Y empiezan a ocupar más y más de nuestro esfuerzo, de nuestro esfuerzo de ingeniería, y eso es lo que realmente hace que ir de la idea a las aplicaciones de trabajo, sea un proceso doloroso. Y por eso a menudo vemos, o a menudo vemos, grandes equipos, grandes empresas que ya tienen un montón de recursos, un montón de expertos en ingeniería, un montón de infraestructura existente. Y porque tienen todo eso, pueden simplemente iniciar una nueva cosa y empezar una nueva aplicación, empezar un nuevo proyecto. Y por eso tenemos grandes empresas que constantemente prueban cosas nuevas. Y se mantienen constantemente en el mercado porque están constantemente experimentando con nuevas ideas con su infraestructura existente. Esto también es por qué no funciona realmente para equipos pequeños. Como si yo y mi amigo nos juntáramos para construir algo, realísticamente, ¿qué tipo de aplicación podemos realmente construir antes de que ahora tengamos que contratar a un montón de más gente para cuidar de estas preocupaciones adyacentes para que podamos convertirlo en un negocio real? Y estas son cosas que a menudo nos impiden ir hasta el final con nuestras ideas y construir aplicaciones reales. Pero de lo que estoy aquí para hablar hoy es de cómo eso ha cambiado, o al menos cómo está cambiando. Porque hay una nueva generación de herramientas de desarrollo que están haciendo esto posible. Estas herramientas tienen algunas características muy únicas. En primer lugar, aprovechan completamente lo que la nube tiene para ofrecer, lo que significa que son confiables, escalables y baratas. Así que no te preocupas por la infraestructura. La segunda cosa es que estas herramientas optimizan para la experiencia del desarrollador, lo que significa que el objetivo es darnos a nosotros como desarrolladores de software capacidades poderosas con una buena experiencia de desarrollador. Así que tienes todo el poder y todos estos sistemas e infraestructuras complejas preconstruidas para ti. Pero no solo te dan capacidades, puedes integrarte con ellos sin problemas y seguir trabajando en tu competencia central. Tu competencia central es la aplicación que estás tratando de construir. Es tu aplicación de planificación de viajes, es tu aplicación de IA, es tu aplicación de gestión de proyectos de próxima generación.

2. Introducción a las Herramientas de Desarrollo y Configuración

Short description:

La nueva generación de herramientas de desarrollo elimina el esfuerzo y el espacio mental dedicado a las preocupaciones adyacentes, permitiendo a los equipos centrarse en su competencia principal. Con estas herramientas, los equipos pequeños pueden construir y operar aplicaciones que sirven a miles o millones de usuarios. Las excusas como la falta de conocimientos o las preocupaciones sobre la escalabilidad ya no son válidas. En esta masterclass, construiremos una aplicación SaaS utilizando Next.js, Vercel, Clerc, PlanetScale y Stripe. Comencemos clonando el repositorio de GitHub e instalando las dependencias.

Esa es tu competencia principal que quieres construir, no lidiar con Kubernetes, estos archivos YAML o configuraciones de webpack o estas APIs REST con horrible documentation. Dedica 10 minutos a ello y ya está, y nunca más pensarás en autenticación o vulnerabilidades o cumplimiento o ataques de bots. Esa es la mentalidad que estas herramientas pueden inculcar. Y veo que la gente sigue llegando. Gracias a todos por asistir. Repositorio de GitHub que hemos mostrado aquí. También está enlazado en el chat. Puedes registrarte para obtener una cuenta para estos. Y también asegúrate de tener node.js y tener instalado el CLI de Stripe.

Bien, entonces, lo que sucede con la nueva generación de herramientas de desarrollo es que realmente eliminan el esfuerzo y el espacio mental que tenemos que dedicar a estas preocupaciones adyacentes. Esto significa que realmente lo único en lo que estás pensando es en tu competencia principal. Es tu idea aquí, es lo que está en verde. Así que lo que eso significa es que los equipos no necesitan ser enormes. No necesitas tener mucha infraestructura existente para empezar a construir aplicaciones reales con este conjunto de herramientas. Puedes tener simplemente un equipo pequeño de tres a cinco personas o incluso 10 personas, 20 personas que pueden construir, operar y soportar un software, una aplicación que potencialmente está sirviendo a miles o millones de usuarios. Y esa es una expectativa completamente realista de tener con estas herramientas porque eso es lo que mucha gente está haciendo hoy en día. De nuevo, la mentalidad en la que esto nos pone es lo que me gusta llamar sin más excusas. Es decir, cuando tengo una idea sólida que creo que realmente va a funcionar o que quiero experimentar con ella, no tengo estas excusas de, bueno, realmente no conozco las bases de datos o sé que esto nunca va a escalar, nunca podré hacerlo escalar, o nunca podré hacer esto lo suficientemente seguro. Si esta es una aplicación de IA que estoy construyendo, tal vez tenga miedo de los bots. Tal vez tenga miedo de que los bots vengan, entren, abusen de tus servicios para obtener créditos gratis. Pero, estas ya no son excusas que tengo porque estas herramientas, esto completamente elimina eso de mí. Así que eso es lo que vamos a hacer hoy. Construyamos una aplicación SaaS con estas herramientas. Vamos a usar Next.js como nuestro framework, vamos a usar Vercel como el host. Vamos a usar Clerc para la gestión de usuarios y autenticación. Vamos a usar PlanetScale para la database y vamos a usar Stripe para todo nuestro flujo de pagos. Y, realmente, eso es todo lo que tengo para las diapositivas de hoy. Y, en este punto, podemos pasar a la parte práctica.

Bien, así que lo que tenemos aquí es el repositorio de GitHub. Vale, tengo preguntas. ¿Necesitaré una cuenta de Stripe y PlanetScale? Definitivamente necesitarás una cuenta de Stripe. El paso de PlanetScale, si quieres, estamos empezando con una database SQLite, así que si quieres seguir con eso durante la duración de la masterclass, puedes hacerlo. Pero una vez que lleguemos al paso de PlanetScale, en esta masterclass, repasaré el paso de crear realmente la cuenta. Así que no necesariamente tienes que crear todas estas cuentas ahora mismo. Ahora mismo, lo más importante es que puedas clonar el repositorio y luego puedes ejecutar NPM install y entonces todos los repositorios deberían estar, todas las dependencias deberían estar disponibles para ti. Necesitarás una cuenta de Stripe porque estamos integrando pagos y puedes tener una cuenta de PlanetScale si quieres conectarte con bases de datos en vivo. Bien, así que mientras se terminan de instalar las dependencias, vamos a familiarizarnos un poco con este código base. Obviamente todo lo importante está dentro de nuestra carpeta SRC. Publica el enlace de Git. Sí, dame un segundo. Aquí. Así que este es el enlace para el repositorio de GitHub. Asegúrate de clonarlo e instalar las dependencias. Y nuestras dependencias están instaladas. Ahora podemos ejecutar NPM run dev y deberíamos ver nuestra aplicación de tareas aquí en la pantalla en un momento. Pero hasta entonces, veamos nuestra aplicación. Tenemos nuestra carpeta SRC y creo que mi ordenador puede estar luchando por recursos en este punto, pero seguiremos adelante. Y dentro de aquí, tenemos una página de inicio y tenemos una página de panel de control. Así que puedes pensar en esta página de inicio como una especie de página de aterrizaje. Estás obteniendo este error, se requiere la URL de la database. Así que lo que puedes hacer en ese caso es que puedes ir a tu archivo dot env. Deberías tener una URL de database por defecto en tu env. Bien, así que en tu archivo dot env, podemos deshacernos de estos dos, pero puedes tener una URL de database igual a esta cadena aquí. Así que file colon db.sqlite. Así que si estás obteniendo el error de que te falta la URL de la database, solo asegúrate de que esto se añade en tu archivo dot env. Voy a pegar eso en el chat. Gracias por señalar eso. Básicamente solo necesitamos apuntar la aplicación hacia el archivo SQLite que se va a utilizar como database. Así que estamos empezando con solo una database SQLite de demostración aquí y puedes ignorar todo lo demás en el entorno por ahora. Así que ahora deberías tener la aplicación funcionando. Avísame si todos han llegado hasta este punto. Y nuestra página de inicio es básicamente como, así que si vas a tu archivo de diseño aquí, tu archivo de diseño en src app layout. Ahora esto tiene algunas cosas que, en cierto sentido, no deberían estar allí. Así que podemos deshacernos de esto rápidamente. Si ves este import de clerk-nextjs, puedes deshacerte de eso. Puedes deshacerte de clerk-provider y user-button de la sección. Vamos a añadir estos de nuevo más tarde, pero ahora mismo si solo estás construyendo nuestra aplicación de tareas no necesitamos eso. Pero lo que sí necesitamos es si vamos a nuestra página de panel de control, en nuestra página principal aquí, tenemos un enlace para ir al panel de control. Y si hacemos clic en él, deberíamos ver, ¿qué está pasando aquí? Dame un segundo. Oh, estoy silenciado.

Watch more workshops on topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.