Name: React Summit Remote Edition 2021
Start: 2021-04-11T22:00:00.000Z
End: 2021-04-15T22:00:00.000Z

Aleksei Podgaev

Varun

Joanna Otmianowska

Mauro Bartolomeoli

Anisha Malde

Nikolay Advolodkin

Nick Hehr

Oscar Pagani

Gary Forster

Victor 

Christian Guy

Simon Flack

Vladyslav Abramov

Rishi Narang

Sander Laarhoven

Renata

Einar Guðni Guðjónsson

Lorenzo Greco

Arne Claerebout

Sakshi Shreya

Kasey

Filip Michalowski

Tia Eastwood

Monica Marian

Sachini Dissanayaka

CHRIS Jakubik

Paula Diaz

Zain Fathoni

Mihai Batiu

André Ferreira

Frank Schwichtenberg

Remix es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!

Construyendo Mejores Sitios Web con Remix

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.

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!

Building Better Websites with Remix

Michael Jackson

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Consejos sobre React Hooks que solo los profesionales conocen

This workshop on React Hooks Tips explores hooks beyond the basics, covering common mistakes, advanced hooks, creating custom hooks, and the rules of hooks. It demonstrates the use of useState, useEffect, and useContext hooks, as well as creating custom hooks for managing state and performing side effects. The workshop also covers the use of useRef, useReducer, and useLayoutEffect hooks, and provides insights into how React hooks work under the hood. It concludes with the implementation of a provider component and the use of context and reducers to manage complex state in functional components.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Hooks Tips Only the Pros Know

Maurice de Beijer

¿Cansado de reconstruir tu marco de trabajo web basado en React desde cero para cada nuevo proyecto? ¡Estás de suerte! RedwoodJS es un marco de aplicación web de pila completa (piensa en Rails pero para desarrolladores JS/TS) basado en React, Apollo GraphQL y Prisma 2. Nosotros hacemos el trabajo de integración pesada para que tú no tengas que hacerlo. También integramos de manera hermosa Jest y Storybook, y ofrecemos soluciones incorporadas para la obtención de datos declarativa, autenticación, pre-renderizado, registro, a11y y mucho más. Despliega en Netlify, Vercel, o vuelve a la vieja escuela en AWS o metal desnudo. En esta charla aprenderás sobre la arquitectura de RedwoodJS, verás las características principales en acción, y te irás con una sensación de asombro y admiración en tu corazón.

RedwoodJS: El marco de aplicación React Full-Stack de tus sueños

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Tom Preston-Werner

Si tu proyecto React requiere funcionalidad de edición de texto enriquecido, hay una serie de bibliotecas a considerar. En esta masterclass veremos las características de algunos de los actores clave para que puedas ayudar a juzgar cuál es el mejor ajuste para tus requisitos.

Draft.js, Editor.js, Slate.js: Eligiendo el mejor editor de texto para tu proyecto React

Welcome to my session on DraftJS, EditJS, and SlideJS. We will discuss their strengths and data model, focusing on React's component and prop model. We will evaluate the editors based on their sustainability, funding, support, maturity, license, editor features, release cycle, data structure, ecosystem, browser support, usage, and GitHub stars. The first editor we'll discuss is Draft.js, which is used by Facebook Messenger, comments, status posts, and the Facebook Notes app. It's funded and supported by Facebook, has a version of 0.11.7, and requires custom code for additional features. The license is MIT. It's a bare metal, in terms of features. The release cycle is semantic version. The data structure is JSON. It's used by 83,000 packages and has 20,000 stars. The data model is made up of blocks with text and entities. It supports various editor features including block styles, inline styles, undo/redo, paste, lists, nested lists, media, and links. Editor.js is a block-based editor written in vanilla JavaScript. It has a 2.19 release, Apache 2.0 license, and a semver release cycle. The data structure is JSON, and there are numerous plugins available. It has 1,500 packages using it and 15,000 stars. The editor features include block styles, inline styles, undo/redo, paste, lists, nested blocks, media, and links.

If your React project requires rich text editing functionality, there are a number of libraries to consider. In this session we'll look at the features of some of the key players so that you can help judge which is the best fit for your requirements.

Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project

Lee Rowlands

Desde la Cumbre de React del año pasado, React Query ya se ha convertido en una de las bibliotecas de búsqueda de datos más populares y poderosas para React. Para celebrarlo, iremos detrás de escena para ver cómo funciona realmente React Query e incluso construiremos nuestro propio gancho useQuery en solo 150 líneas de código. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¡Construyamos React Query en 150 líneas de código!

React Query is a popular data synchronization library used by indie developers, startups, and Fortune 500s, with over 1,200 commits and 250 contributors. The Talk covers the creation of a simplified version of React Query called React Query Lite. It explores concepts like caching, background fetching, and garbage collection. The speaker also discusses the use of query observers and the integration of React Query with React. The Talk concludes with a discussion on React Native tools, testing, and the stability of React Query's API.

Since React Summit last year, React Query has already become one of the most popular and powerful data fetching libraries for React. To celebrate, we'll be going behind the scenes to see how React Query actually works and even build our own useQuery hook in just 150 lines of code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's Build React Query in 150 Lines of Code!

Tanner Linsley

- Introducción - Cleo &amp; nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto &amp; propósito, revisar los diseños- Comenzando con la configuración del entorno &amp; “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native

This workshop focuses on building an interactive wheel of fortune feature with React Native. The feature, called spin to win, incentivizes users to save more by allowing them to spin a wheel and contribute to their savings. The tutorial covers setting up the pan responder to detect user gestures, calculating rotation using gesture handling, mapping animation values to rotation, adding momentum to the wheel for a realistic spinning effect, and addressing issues such as incorrect rotation and lack of velocity. The workshop also explores extensions like adding confetti and haptic feedback for a better user experience.

- Intro - Cleo &amp; our mission- What we want to build, how it fits into our product &amp; purpose, run through designs- Getting started with environment set up &amp; “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Build an Interactive “Wheel of Fortune” Animation with React Native

Oli Bates

Aprende cómo la modelización de estados con máquinas de estado y gráficos de estado puede mejorar la forma en que desarrollas tus aplicaciones React, y obtén un adelanto de herramientas visuales nunca antes vistas que llevarán la gestión de estados al siguiente nivel.

XState: el futuro visual de la gestión de estados

This Talk introduces the visual future of state management and how XState is bringing it to reality. It explains the role of reducers in containing application logic and how state machines and state charts provide a visual and mathematically rigorous way to represent behaviors. XState is easily integrable with React and other frameworks, allowing for the management of local, global, and semi-local state. The Talk also highlights new features in XState, such as the use of TypeScript for stronger typing and the introduction of the useSelector hook for improved performance. The future vision includes the combination of diagrams and code, with tools like Stately.ai, and the importance of explicit modeling of application logic using state machines.

Learn about state modeling with state machines and statecharts can improve the way you develop your React applications, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level.

XState: the Visual Future of State Management

David Khourshid

Next.js — La Arquitectura Híbrida (SSG/SSR) para la Modernización y Escalado de React para Desarrolladores Web

Today's Talk discussed the impact of Core Web Vitals on SEO and website performance. Strategies for improving Core Web Vitals include using Next.js, optimizing images and fonts, and measuring performance with tools like Google Lighthouse. The hybrid approach of Next.js allows for flexibility in rendering applications. Recent releases of Next.js have focused on performance improvements. Next.js Commerce offers an all-in-one starter kit for e-commerce. Vercel provides a tool for measuring real user experiences and identifying potential causes of performance issues.

Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React

Lee Robinson

Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo una Aplicación de Shopify con React & Node

Jennifer Grey and Hanna Chen, front-end developers at Shopify, hosted a React pre-conference workshop on building a Shopify app with React and Node. The workshop covered creating a basic app in Shopify, using React components designed by Shopify, and accessing store data. They also discussed using the Shopify app CLI, harnessing the power of Polaris for an integrated UI experience, and using AppBridge for communication. Overall, participants learned how to build a Shopify app and enhance it with functionalities using AppBridge and Polaris.

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Shopify App with React & Node

Jennifer Gray

Hanna Chen

Mejora el proceso de desarrollo de aplicaciones React aplicando las metodologías BDD &amp; TDD. Estas metodologías de prueba te hacen sentir seguro al refactorizar una base de código y mejorar el código existente mientras evitas efectos secundarios y envías más rápido. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

BDD & TDD en React

Today's Talk covers TDD and BDD in React testing, including the importance of testing practice in React. The Talk discusses the evolution of testing, the daily flow of developing a feature with TDD and BDD, and best practices for testing. It also emphasizes the significance of using the right tools and writing tests that resemble user actions. Applying tests in practice leads to better architecture decisions.

Improve the development process of React applications applying BDD &amp; TDD methodologies. These testing methodologies make you be confident when refactoring a codebase and improving existing code while avoiding side effects and shipping faster. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

BDD & TDD in React

Laura Beatris

Hubo un tiempo antes de React, y habrá vida después. Si te vinculas demasiado estrechamente a cualquier tecnología, podrías atraparte a ti mismo y perderte la próxima ola. Vamos a alejarnos de la biblioteca de gestión de estado del momento — ¿qué lecciones atemporales podemos aprender de React? En la charla, discutiré las lecciones que he aprendido estudiando React que llevaré conmigo durante el resto de mi carrera.

Lecciones para sobrevivir a React

The Talk focuses on the lessons we can learn from React's success, including API design, optimizing for change, testing, and community engagement. The idea of a DX UX mullet, with immediate mode in the front and retained mode in the back, is observed in various areas of software development. The importance of naming and optimizing for change is emphasized, as well as the significance of DevTools and building a community. The principles behind the Temporal framework and the importance of good naming in API design are also discussed.

There was a time before React, and there will be life after. If you tie yourself too closely to any technology, you might trap yourself and miss the next wave. Let's zoom out from the state management library du jour — what timeless lessons can we learn from React? In the talk I'll discuss lessons I've learned from studying React that I will take with me for the rest of my career.

Lessons To Outlive React

Shawn Swyx Wang

Usando Rollbar en React

Rollbar is a leader in continuous code improvement, offering industry-leading grouping technology and real-time performance to turn error messages into actionable items. The new Rollbar for React SDK introduces a new way to initialize Rollbar using the Provider component and an error boundary for automatically capturing and logging React errors. The Rollbar React SDK provides multiple ways to set the rollbar context and customize its behavior. Attendees are encouraged to provide feedback on the Rollbar React SDK source code and sign up for an extended trial period using the provided URL and promo code.

Using Rollbar in React

Jeff Hoffer

Nunca ha sido tan fácil para los desarrolladores de React construir aplicaciones nativas para iOS y Android. En esta charla, veremos lo rápido que puedes lanzar tu aplicación con las herramientas de código abierto de Expo, Expo Application Services (EAS) y React Native. También discutiremos algunas de las mejoras recientes que hemos realizado y lo que viene a continuación.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo una aplicación móvil con Expo, EAS y React Native

This talk provides an overview of building React Native apps with Expo and Xcode. It covers Expo managed projects, XO, Turtle, customizing runtime, Expo Development Client, and EAS. The talk also mentions the advantages of Expo Updates, the focus on a customizable runtime, and adding native libraries. Favorite React Native apps and libraries are recommended, and the future goals include enhancing performance and improving the development experience through EAS.

It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Mobile App with Expo, EAS, and React Native

Brent Vatne

Aprende cómo construimos Argo, un potente marco de extensibilidad que permite a los desarrolladores ampliar sin problemas las aplicaciones de Shopify en todas las plataformas. Argo proporciona a los desarrolladores APIs para ejecutar comportamientos en la aplicación principal y una biblioteca de componentes que renderiza una interfaz de usuario nativa idéntica a los propios componentes de Shopify, ya sea en iOS, Android o Web. Detrás de escena, Argo utiliza web workers y una biblioteca de código abierto llamada remote-ui para crear un entorno de ejecución aislado para scripts externos.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Renderizado remoto con Web Workers

Today's Talk discussed the development of Argo, a framework for remote rendering of content within Shopify's apps. The core concepts include creating a JavaScript sandbox, implementing a remote procedure call layer, and using proxies. The Talk explored the end-to-end flow of rendering content, the construction of the worker script, the rendering of UI components, and the advantages of remote rendering for security and flexibility. The Talk also touched on the challenges faced and the open-source nature of the project.

Learn how we built Argo, a powerful extensibility framework that allows developers to seamlessly extend Shopify's apps on every platform. Argo provides developers with APIs to execute behaviour on the main app and a component library that renders native UI identical to Shopify's own component whether it's on iOS, Android or Web. Behind the scenes, Argo uses web workers and an open sourced library called remote-ui to create a sandboxed execution environment for external scripts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Remote Rendering with Web Workers

Trish Ta

Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gestión del estado en React con Context y Hooks

Today's workshop focuses on state management in React using the Context API and Hooks. The Context API is now a viable option for state management and provides additional features for effective state management. Custom hooks can be created to handle local state and access values from the context. Combining multiple contexts and using the useMemo hook can prevent unnecessary component rerenders. The useReducer hook allows for more complex state logic, similar to Redux. Debugging can be done by creating custom hooks and logging actions. Context can be used for global state management by separating providers into different components. The workshop includes exercises to practice using context and breakout rooms for discussion. The Q&A session covers fetching data and managing errors with context.

A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

State Management in React with Context and Hooks

Roy Derks

Charla junto al fuego con Kent C. Dodds

Kent C. Dodds discusses various topics including migrating projects to TypeScript, Next.js and Remix, testing libraries, RTL testing with React Testing Library, integration testing for component libraries, testing design systems, writing tests, communication resources, and the popularity of Hooks in React development.

Fire-Side Chat with Kent C. Dodds

Kent C. Dodds

Por más moderna que sea la web, WordPress sigue siendo el rey. No es el más escalable, pero sigue siendo convincente con su larga historia y UX. ¿Cómo podemos aprovechar Next.js para llevar WordPress a la web moderna? Recorreremos las herramientas que Next.js nos proporciona para escalar WordPress al mundo. Hablaremos sobre qué APIs podemos usar para manejar fácilmente el contenido de WordPress y cómo podemos convertir las partes dinámicas en estáticas.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Escalando WordPress con Next.js

WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scaling WordPress with Next.js

Colby Fayock

Cuando la gente me pregunta cuál es la habilidad más importante que puedo aprender para mejorar en mi trabajo y obtener ascensos, siempre les digo: El arte de la comunicación y la interacción humana. Cuando trabajamos como ingenieros, interactuamos con muchas personas a diario. Es crucial que aprendamos a negociar y persuadir a las personas. En esta charla, cubriremos 3 técnicas principales para convertirnos en mejores negociadores. Estas técnicas pueden ayudarnos a interactuar con los demás de manera más efectiva, obtener la aprobación de nuestros proyectos, ascender más fácilmente e incluso ayudarnos en nuestra vida. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Los ingenieros aprenden a negociar

During this Talk, the speaker emphasizes the importance of negotiation skills in the tech industry and how it can help grow one's career. Mirroring and labeling are discussed as effective techniques in building trust and reducing negative emotions. The concept of being a sponge is introduced, highlighting the significance of listening attentively in negotiations. The Talk concludes by emphasizing the importance of communication and negotiation skills for engineers and encourages self-reflection and improvement.

When people ask me the most important skill I can learn to become better at my job and get promotions, I always tell them: The art of communication and human interaction. When working as engineers we are interacting with many people on daily basis. It is crucial for us to learn how to negotiate and persuade people. In this talk, we will cover 3 main techniques to become a better negotiator. these techniques can help us interact with others more effectively, get our projects approved, get promoted easier and even help us in our life. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Engineers Learn to Negotiate

Naz Delam

Los usamos todo el tiempo, y creemos que sabemos cómo funcionan los state hooks (useState, useReducer). Pero bajo el capó, como era de esperar, las cosas no son como te imaginas. Esta charla trata sobre las colas de actualización, el agrupamiento, las actualizaciones ansiosas y perezosas, y algunas otras cosas interesantes aprendidas al mirar el código fuente de los Hooks. También contiene consejos prácticos que te ayudarán a comprender y depurar mejor tu código. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

No sabemos cómo funcionan los React State Hooks

This Talk provides an introduction to React Staytools, explaining how to use the state and setState function to update a counter. It also delves into the inner workings of React rendering, discussing the update queue and re-rendering conditions. The Talk concludes by mentioning the different modes of updating and triggering re-renders in React, and encourages further exploration of the source code and discussion in Discord.

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Don’t Know How React State Hooks Work 

Adam Klein

Como desarrolladores, lanzamos características a diario, pero ¿cómo aseguramos que esas características funcionen correctamente en producción antes de lanzarlas a todos los usuarios? Si me preguntas, la respuesta son los feature flags. Los feature flags son beneficiosos porque te permiten probar tu código en producción, realizar lanzamientos canarios e incluso realizar pruebas A/B. El poder de React facilita la implementación de estos flags. Te guiaremos en cómo crear fácilmente un feature flag en la interfaz de usuario, instalar dependencias con npm e implementar tu feature flag en tu aplicación de React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Configuración de Feature Flags con React

This Talk discusses setting up feature flags with React, which allows for controlled rollouts of new features. Feature flags provide more control without touching the source code and can target specific users or types of users. In React, feature flags can be created and configured using Split.io. Different treatments can be applied to determine if a feature should be shown. Feature flagging provides control and flexibility in development.

As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Setting Up Feature Flags with React

Talia Nassi

Con React 16.0, Facebook ha lanzado una actualización del algoritmo de reconciliación del núcleo de React que se llamó "Fiber". Fiber permite a React romper los límites de la pila de llamadas y pausar/iniciar el trabajo de renderizado a voluntad. En esta charla, exploraremos por qué era necesario Fiber, cubriremos algunos detalles de implementación internos de Fiber y veremos Fiber en acción con el Modo Concurrente experimental de React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Dentro de Fiber: Una Visión General del Algoritmo de Reconciliación de React

React Fiber is a reconciliation algorithm introduced in React 16 to address laggy input fields and heavy rendering. The old stack reconciler caused a laggy experience by re-rendering the entire subtree immediately. React Fiber solves this by breaking work into incremental units and assigning priorities. It introduces concurrent mode to make apps responsive and adaptable. The useDeferredValue hook is commonly used to keep the interface responsive by rendering components immediately and others at a later time.

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will. In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Inside Fiber: An Overview of React's Reconciliation Algorithm

Elad Tzemach

En esta charla discutiremos cómo combinar el poder de D3 como una biblioteca matemática con las capacidades de renderizado de React. ¿Cómo podemos encapsular la animación para reutilizarla con componentes funcionales de React? ¿Cómo podemos lidiar con las restricciones en las estructuras de datos para crear visualizaciones interesantes? ¿Cómo abordar los problemas de rendimiento cuando hay múltiples elementos animados en la pantalla? Estas son algunas de las preguntas que se abordarán a medida que profundizamos en las técnicas aplicadas a ejemplos del mundo real.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Técnicas probadas en batalla para animación y visualización de datos con React

Motion is a powerful tool in data visualization, but it must be used carefully to avoid confusion. Implementing charts with React and D3 can improve the user experience. The use of D3 scales and react-spring can enhance animations. Canvas is a better choice for rendering many elements. Accessibility considerations should be made to accommodate users who prefer reduced motion.

In this talk we will discuss how to combine the power of D3 as a math library with React's rendering capabilities. How can we encapsulate animation for reuse with React functional components? How can we deal with restrictions in data structures to create interesting visualizations? How to approach performance issues when there are multiple animated elements on the screen? These are some of the questions that will be addressed as we dig deeper into techniques applied to real-world examples. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Battle-Tested Techniques for Animation and Data Viz with React

Krystal Campioni

Si React se ejecuta en un servidor y no hay nadie alrededor para verlo, ¿aún hace algún sonido? En esta charla, Fred explora el mundo de las optimizaciones del lado del servidor: ¿qué es posible hoy y qué nos depara el futuro? Con una vista previa de un emocionante nuevo proyecto nunca antes visto del equipo de Snowpack para ayudarte a construir sitios más rápidos con React! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

¿React sin JavaScript?

This is a talk about the language of web development and how it influences what we can build. It introduces Astro, a method for building faster websites with less client-side JavaScript. Astro brings together the power of JavaScript and the speed of HTML. It explains how to mix scripting and markup using a frontmatter script. Astro allows you to use React components in an Astro application, generating server-side markup. It offers opt-in interactivity with JavaScript and an HTML-first output.

If React runs on a server and no one is around to see it, does it still make a sound? In this talk, Fred explores the world of server-side optimizations: what's possible today and what does the future hold? Featuring a sneak peek at an exciting new, never-before-seen project from the Snowpack team to help you build faster sites with React! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Without JavaScript?

Fred K. Schott

Voy a mostrar la arquitectura de React Native que utilizamos en nuestra nueva aplicación móvil en Product Hunt. Lo que aprendimos en el camino. Cómo trasladamos lo que sabemos de la web al móvil. Los temas serán el diseño de componentes reutilizables de React, GraphQL, enrutamiento en la aplicación, ciclo de vida de la aplicación, controles de teclado, mensajes de aviso y otros.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Arquitectura de React Native en Product Hunt

The speaker discusses their React Native architecture and how they structured their app, choosing React Native over native development due to limited resources and the need for UI experimentation. The architecture consists of support, components, and screens, with a focus on code organization and extensibility. The speaker explains the screen creation process, including the use of React Native Navigation and a state machine pattern. They also highlight the use of GraphQL for data retrieval and navigation between screens. The talk covers the structure of common components, utilities for styling, and support for dark mode. Overall, the speaker emphasizes the importance of isolating dependencies and utilizing a directory structure approach.

I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Native Architecture at Product Hunt

Radoslav Stankov

La mayoría de nosotros hemos escuchado que las pruebas deben ser aisladas, componibles o deterministas, pero ¿qué significa eso en la práctica? ¿Cómo se escribe una buena prueba y cómo cambia el resto de tu código una vez que lo haces? ¿Qué efecto tiene en tu experiencia como desarrollador? En esta charla, repasaré algunas propiedades que tienen las buenas pruebas, mostraré cómo podemos escribir pruebas que sigan estas pautas en JavaScript y discutiré cuándo considerar flexibilizar un poco las reglas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cocina de Pruebas: Una Receta para Buenos Tests

Iris, a software engineer, shares her cooking journey and invites others to share recipes on Twitter. She discusses testing guidelines, emphasizing the importance of automated tests that inspire confidence and run all the time. Iris provides tips for faster and more effective testing, including running tests in parallel and focusing on behavior. She also highlights the importance of making tests robust, readable, and maintainable. Finally, Iris emphasizes the value of testing, predictive tests, and audience preferences in software development.

Most of us have heard that tests should be isolated, composable, or deterministic, but what does that mean in practice? How do you write a good test and how does the rest of your codebase change once you do? What effect does it have on your developer experience? In this talk I'll walk through a hand full of properties good tests have, show how we can write tests that follow these guidelines in JavaScript, and discuss when to consider bending the rules a bit. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Test Kitchen: A Recipe for Good Tests

Iris Schaffer

TypeScript es genial, pero migrar una aplicación existente a él puede ser un dolor de cabeza. Codecademy tomó múltiples aplicaciones React existentes y las convirtió a TypeScript. Cubriremos cómo hacer que ese tipo de conversiones sean exitosas desde puntos de vista tanto culturales como técnicos. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Historias y Estrategias de la Conversión a TypeScript

This Talk discusses the process of converting to TypeScript at CodeCademy. It emphasizes the importance of encouraging adoption and knowledge sharing within the team. The Talk also highlights the seamless integration of TypeScript into the existing infrastructure and build system. The strategy for converting to TypeScript involved using dedicated pull requests and automated tools. The speaker shares tips on automating changes, setting up a styling guide, and celebrating victories. Resources for learning TypeScript are also mentioned.

TypeScript is great, but migrating an existing app to it can be a pain. Codecademy took multiple existing React apps and converted them to TypeScript. We'll cover how to make those kinds of conversions successful from both cultural and technical standpoints. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Stories and Strategies from Converting to TypeScript

Josh Goldberg

En este masterclass, veremos algunos de los enfoques y técnicas que se pueden aplicar al hacer refactorizaciones o agregar nuevas características a una base de código heredada de React para alinearlo con los enfoques más recientes. Cubriremos temas como cómo usar React Hooks para compartir la lógica de los componentes de una manera que permita reutilizar en componentes de clase; cómo introducir de forma incremental otros patrones en una aplicación de React Redux; y cómo construir componentes de interfaz de usuario flexibles a través de abstracciones donde estemos vinculados a CSS global o una biblioteca de componentes. En el camino, tocaremos muchos patrones de React y enfoques de gestión de estado con el objetivo final de poder evaluar estas opciones y permitir que nuestros requisitos impulsen la arquitectura para avanzar hacia una base de código más sólida y mantenible. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Adoptar de forma incremental los patrones modernos de React en una base de código heredada

This workshop focuses on incrementally adopting modern React patterns in a legacy codebase. It covers topics such as building reusable component logic hooks, refactoring legacy code to use hooks, and using context with hooks. The importance of refactoring class components to functional components and using hooks whenever possible is emphasized. The workshop also explores the use of Redux for centralized state management and the use of context for global state. Troubleshooting and error handling are discussed, and the workshop provides exercises for hands-on practice.

In this workshop, we’ll look at some of the approaches and techniques that can be applied when making refactors or adding new features to a legacy React codebase to bring it inline with the latest approaches. We’ll cover topics such as how to use React Hooks to share component logic in a way that will allow reuse in class components; how to incrementally introduce other patterns to a React Redux app; and how to build in flexible UI components via abstractions where we are tied to some global CSS or a component library. Along the way, we’ll touch on many React patterns and state management approaches with the ultimate aim of being able to evaluate these options and let our requirements drive the architecture in moving towards a more robust and maintainable codebase. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Incrementally Adopt Modern React Patterns in a Legacy Codebase

Richard Moss

En esta charla, Taley'a discutirá cómo el sistema de diseño permite la consistencia entre los productos, explorarás los componentes principales del sistema de diseño, junto con los principales beneficios y desafíos al construir el sistema de diseño.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Sistemas de Diseño - Renovando Productos para Interfaces Consistentes

This Talk explores the core components of design systems, their benefits and challenges, as well as the importance of having a design system for products. It also discusses the concept of a design language and its role in creating a design system. The section on building a design language and component library emphasizes the significance of selecting options for a design language and creating reusable components. The section on building and scaling design systems highlights the benefits of design systems and the challenges involved in building and scaling them. It also mentions the changing mindset towards recognizing the value of design systems in the competitive space.

In this talk, Taley'a will be discussing how design system enables the consistency among the products, you will explore the core components of the design system, along with the key benefits and challenges while building the design system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems - Revamping Products for Consistent UIs

Taley'a Mirza

Cómo construir una Interfaz de Usuario que APRENDA? Tener la capacidad de aprender y predecir el comportamiento de los usuarios tiene muchas aplicaciones poderosas, una de ellas es la oportunidad de mejorar el rendimiento de la interfaz de usuario al precargar código y recursos antes de que el usuario los alcance. En esta charla, describiremos una implementación de alto nivel de un prefetcher inteligente, utilizando ReactJS y TensorFlow.js. Utilizamos redes neuronales para aprender el comportamiento del usuario y aprovechamos la API de carga diferida de React para precargar componentes según las predicciones. Existe la oportunidad para los desarrolladores frontend de explorar la poderosa combinación de UI e IA.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construye una Interfaz de Usuario que Aprende - Prefetching Inteligente con React y TensorFlow.js

Today's talk explores intelligent prefetching in React, including code splitting, lazy loading, and prefetching to improve performance. The use of neural networks for sequence prediction and training with actual user behavior is discussed. React context is used to link UI handlers with predictions and prefetching, enabling dynamic content import and improved user experience. The combination of AI and UI development is showcased in this personal project.

How to build a UI that LEARNS? Being able to learn and predict the behavior of users has many powerful applications, one of them is the chance to boost the UI performance prefetching code &amp; resources before the user reaches them. In this talk, we describe a high-level implementation of an intelligent prefetcher, using ReactJS and TensorFlow.js. We use neural networks to learn the user's behaviour, and leverages React's lazy-loading API to prefetch components according to predictions. There is a chance for Frontend developers to explore the powerful combination of UI and AI. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build a UI that Learns - Intelligent Prefetching with React and TensorFlow.js

Eliran Natan

El CEO y cofundador de Netlify, Matt Biilmann, reflexiona sobre la historia de React, las promesas de Jamstack y la complejidad que puede surgir en los flujos de trabajo de los desarrolladores si no seguimos defendiendo la simplicidad con el tiempo. En esta charla relámpago, Matt describe los compromisos a los que se enfrentan los desarrolladores para entregar sitios grandes e introduce una nueva idea para una solución futura más escalable. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Manteniéndolo Simple

React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.

Netlify CEO and co-founder Matt Biilmann reflects on the history of React, the promises of the Jamstack, and the complexity that can creep into developer workflows if we don't continue to defend simplicity over time. In this lightning talk, Matt describes the trade-offs developers face to deliver large sites and introduces a new idea for a more scalable future solution. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition 2021

The biggest React conference in the cloud