Name: React Summit US 2024
Start: 2024-11-18T23:00:00.000Z
End: 2024-11-22T22:30:00.000Z

Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid &amp; Charts libraries that are packed with features and provide unbeatable performance whilst being fully customisable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid &amp; AG Charts into your React application.

Powerful Data Visualisation with AG Grid & AG Charts

Brian Love

This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Developer Platform.The workshop assumes basic knowledge of TypeScript and React — not much beyond what’s needed to build a hello world app in React using TypeScript! Knowledge of the Developer Platform is also not required as everything Cloudflare related will be introduced as part of the workshop.So if you’re interested in application development on the (fast and inexpensive!) Cloudflare platform then this workshop is for you. By the end of it you will know how to build a fully-fledged, fully-tested, full-stack web application (using React or any framework of your choice) with a comprehensive testing structure that gives you full confidence and peace of mind. AgendaThe workshop will include live coding, Q&amp;A, and interactive coding sections. The starting code, alongside instructions will be also made available for participants to revisit and dig deeper afterthe workshop.As part of the initial setup we’ll see how to use the <a href="https://developers.cloudflare.com/pages/get-started/c3/" target="_blank">C3</a> tool to easily deploy applications to Cloudflare in a matter of minutes.Afterwards, we will see how to write code that interacts with the Developer Platform specific resources and APIs, specifically, we’ll use <a href="https://developers.cloudflare.com/kv" target="_blank">KVs</a>, R2 buckets and <a href="https://developers.cloudflare.com/workers-ai" target="_blank">Workers AI</a>. We’ll also make sure to test all the code to make sure that it correctly interacts with the aforementioned APIs via the official <a href="https://developers.cloudflare.com/workers/testing/vitest-integration/" target="_blank">Workers Vitest integration</a>.We will then integrate the Workers code with our React app to build a complete full-stack application ready to be deployed to the Cloudflare edge network. We will use <a href="https://playwright.dev/" target="_blank">playwright</a> to implement an end-to-end (e2e) suite of tests to make sure that the application integrates perfectly with the Cloudflare platform. Takeaways- How to develop on the Cloudflare Workers runtime and interact with various Cloudflare resources- How to develop, comprehensively test and deploy a full-stack application on the Cloudflare Platform

Deploy and Test Full-Stack React Apps on Cloudflare

Dario Piotrowicz

Christian Sparks

Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing. Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session. You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.

Tracing: Frontend Issues With Backend Solutions

Lazar Nikolov

Sarah Guthals

Leveraging reactjs to create reusable microfrontends addressing challenges and common pitfalls.

React and Microfrontends

Harsh Maheshwari

Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications. Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints. Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic. Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

Mastering React Server Components and Server Actions in React 19

Maurice de Beijer

Learn how to handle forms in React using the latest features, such as startTransition, useTransition, useOptimistic, and useActionState, with and without React 19 server actions, alongside proper validation, error handling, and best practices.<div> </div>Overview The workshop will begin by demonstrating traditional form handling using useState and useEffect for client-side rendering. Gradually, we'll transition to using the latest React 19 features, including server-side forms and the newest hooks for managing form states and errors. By the end of the workshop, participants will understand how to create robust forms with proper validation and error handling.<div> </div>Learning Goals<ul><li>Latest React 19 Hooks — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValue</li><li>Server Actions</li><li>Revalidations</li><li>Server-side Validation</li><li>Error handling</li><li>Security practices</li></ul>

Evolution of Form Management in React 

Adrian Hajdin

Building C++ modules for React Native is easier than you might think (if you know how). In this talk I’ll be sharing the current state best practices on bootstrapping of native C++ modules for React Native!

Building C++ / JSI Native Modules for React Native in 2024

Kræn Hansen

We’re all here because we love React, and we love it because it’s a simple and intuitive system for creating beautiful, interactive websites. What if building full-stack apps could be just as simple and intuitive? Managing data and resources in your web applications doesn't have to be complex and time-consuming! Learn how to connect databases, APIs, and other services to your apps in minutes to make real-time interactive experiences for your users. In this session, you'll start with a blank page and end with a portfolio-worthy app and the skills you need to build your next app.

From Frontend to Full-Stack: Adding Features Without Adding Time

Jen Person

Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API. After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications.

Llms: What They Are and How to Leverage Them?

Nathan Marrs

Accessibility is no longer an option; it’s a mandatory requirement for successful product launches. While we can implement basic accessibility features using ARIA roles and properties in React components, real-world scenarios present additional complexities. When focusing on elements like the Contrast setting slider, how do we read menu names, selected values, and hints in TV interfaces? How do we read only changed values afterward? In this talk, I’ll share practical insights from our experience in making React components accessible for tens of millions of webOS TVs annually.

React UI Accessibility on TV - Practical Case Study in Real Production

Seungho Park

Vite is an essential tool for modern front-end development. We use it daily, but we know little about its inner workings. We write  .jsx or .vue files, but how do they get transpiled into .js files? There's likely some magic behind Vite's plugins, but how do they work? In this talk, we'll start by creating a simple plugin and progress to more advanced ones. After this session, you'll understand how Vite plugins work and the overall flow, even without prior knowledge of Vite plugins. With this new knowledge, you can perform computations during the build process that don't necessarily occur at runtime. This can naturally result in faster runtime performance. In some cases, the computation results are included directly in the bundle output, reducing the final bundle size (as you don't need to include the data or logic for the computation). Additionally, you can improve the developer experience by automating certain manual tasks. This talk will introduce you to something you hadn't considered learning before. It will make you realize that it's not as difficult as you might have thought, and hopefully, this talk will boost your confidence in learning.

Writing Your First Vite Plugin

Eunjae Lee

“Alright I’ll just upgrade Typescript, aaaaaand everything is broken now” Building a complex JavaScript project can feel like a tangled mess of yarn. Fear not, fellow developer! This talk will provide you with the tools and techniques to gently untangle your dependencies and knit a well-structured, maintainable codebase. Our basket of tools include using npm why as our yarn needle, breaking down tasks into manageable stitches, strategically upgrading for progress, utilising branching techniques to keep your project from unraveling, and much more! Join us as we unravel the secrets of dependency management, leaving you with a project that’s not only functional but beautifully maintainable, stitch by stitch.

Untangling Your Dependencies: A Pattern for a Well-Knit React Project

Carmen Huidobro

We will go over the unique challenges, solutions, and down right weird things we encountered while integrating React into the Ibotta Chrome extension! Learn about optimizing content-script performance, managing state, and overcoming issues with build tools!

Making React Work in Chrome Extensions

Sriram Hariharan

Darshan Bhatta

This presentation provides a practical overview of developing a Progressive Web App (PWA) within the scope of the BelIS project (Lighting Information System) with an emphasis on offline availability. This project, initiated by the city of Wuppertal, serves as a response to the demands of urban lighting management and is used daily by the City's Department 104, the Wuppertal Municipal Services and the current contract partner, SPIE AG.

Shining Offline: The Mobile BelIS-Online Wuppertal Experience

Thorsten Hell

If you had the same goals as React Compiler, what kind of React component would you write? In this talk Tony and the audience imagine they are React Compiler, rewriting a React component in the exact same way the compiler does. Along the way, we'll gain a deeper insight into React internals, to fully grasp how the compiler works, why it works that way, and how to decide if you should use it.

If You Were a React Compiler

Tony Alicea

Creating accessible React components is essential yet challenging, especially when retrofitting existing codebases. This talk will explore how Test-Driven Development (TDD) can streamline the process, reduce development costs, and ensure high accessibility standards from the start. Attendees will learn practical strategies for integrating accessibility into their development workflow and discover tools to test UI components directly in the IDE.

Accessibility Granted: Building Inclusive Components One Test at a Time

Daniel Goren

We make websites with React. We make apps with React. But how do we make games with React? In this presentation I will build up show you how to build up a React game engine tecstack using Poimandres libraries, explain the core concepts and, yes, even build a game.

How to Make a Game With React

Kristopher  Baumgartner

Ada Lovelace, Hedy Lamarr, the 'ENIAC Girls,' Grace Hopper, Joan Clarke... Stemming from the role of a calculator, the profession of a developer was initially considered a women's job, while hardware design was seen as a man's job. However, who are these women who have shaped the world of tech? Why don't we hear more about them? With Laura Durieux, you'll attempt to set the record straight bit by bit and provide role models in tech that you've always needed.

Where Have the Women of Tech History Gone?

Laura Durieux

At Knock we power real-time in-app messaging experiences via our React SDK, enabling product teams to drop in components and have fully featured in-app notification feeds, modals, banners, and more instantly available. In this talk, we'll take a look at how we structured our React library in a composable way, giving teams the power to use our components out of the box, override styling with their own tokens, or bring their own UI components via hooks. We'll dive into how we structured our SDK to provide maximum flexibility for engineering teams, while preserving ease of maintenance.

Building React Primitives to Power In-App Messaging

Chris Bell

Join me for a 4-year retrospective as we explore the lessons learned from building a video player from scratch with React Native. I'll share insights, pitfalls, and key takeaways from this development journey. We'll explore essential considerations before diving into custom video player development with React Native, including challenges like background audio management, platform nuances between Android and iOS, subtitles implementation and custom controls. Whether you're a seasoned developer or new to React Native, this retrospective will help you navigate the challenges we faced when developing a video player, ensuring a smoother development process for your own projects.

A 4-Year Retrospective : Lessons Learned From Building a Video Player From Scratch With React Native

Omar Diop

The network that stands between our server and the client is what causes the most complexity in our development process. Whether it be the initial UI we generate on the server, the API calls we make as the user navigates around, or the form submissions our user makes, keeping the application responsive and up-to-date is a massive chore. What would it be like if all of that complexity just disappeared? Freaking great, that's what it would be like. And React Server Components and Actions are what's making that possible. In this talk we'll look into how that's happening and how we can take advantage of this amazing developer experience to deliver even better user experiences.

Abracadabra: The Vanishing Network

Kent C. Dodds

Everyone has heard of feature flags: boolean switches in your code that you can flip at runtime for different users, environments, etc. But they are just one part of a much broader best practice called “application configuration”. Big tech companies like Meta and Google have internal tools for structured, type-safe app configuration that help them accelerate development of products and backend services. This talk dives into what app configuration is and how it can empower your whole team to move faster, including your nontechnical colleagues.

Type-Safe App Configuration: A Powerful, Emerging Way to Accelerate Product Development

Miraan Tabrez

Feature flagging is a great way to reduce risk by separating code deployments from feature releases, but with React Server Components present some unique challenges and complexities. In this talk, you will learn about these challenges and how to overcome them.  I will also give a live demo that will illustrate step-by-step implementation, showcasing how to dynamically render components based on feature flags using a variety of rendering strategies.

Feature Flagging with React Server Components

Graham McNicoll

Think of the times when you have to collaborate with business units, cross-departmental teams, and other functions. Too often, complex ideas and jargon can impact cross-departmental communication and collaboration effectiveness and efficiency. In this session, I will share practical tools you can implement to explain, communicate, and include non-technical team members in a technical conversation. Whether you are collaborating with a nontechnical team, presenting ideas to a business or nontechnical audience, or troubleshooting problems where you need to communicate technical jargon - in this session, you will learn how to quickly and effectively communicate complex ideas through stories, data, and experiences for a more productive conversation.

How to Communicate Technical Ideas to Non Technical Audiences

Amber Vanderburg

Yay you just launched v1.0 of your design system but now what? Launching a design system can seem like an easy task but maintaining it is what will get you. In this talk we'll discuss how your design system should mature with your company by building an extensible documentation site, thinking beyond the code, collecting component usage statistics, and much more!

Beyond 1.0 - Lessons Learned and Things to Do After 1.0 Release of a Design System

Ameer Sami

AI Will Revolutionize UI

Jack Herrington

In today’s digital landscape, multi-tenancy has become a critical architecture for SaaS platforms, marketplaces, and enterprise solutions. Next.js has continuously evolved, making it an increasingly popular choice for building full-stack applications. With each iteration, it has become even easier to develop scalable multi-tenant applications. Let’s talk about why multi-tenancy is vital, and how Next.js features such as dynamic routing, enhanced middleware, and edge functions simplify the process of building and scaling multi-tenant applications. We will talk about best practices, discuss real-world scenarios, and see a few examples in action. Join to see how you can leverage Next.js to create secure, performant, and scalable multi-tenant applications.

Building Scalable Multi-Tenant Applications With Next.js

Chakit Arora

Maintaining a unified design language contract between Figma and code is crucial in today's fast-paced product development environment. Without this alignment, the disconnect between designers and developers can lead to inconsistencies in product design, failing to achieve pixel-perfect precision.

The Cohesive Workflow for Creating a Wysiwyg Design System

Kamlesh Chandnani

We'll be discussing mainly the industry shift towards build time and why you'll be lacking behind if you don't learn about the intricacies of build time optimizations and modern architectures, and how you can leverage this new trending architecture to boost your product's performance many times.

Gain Performance! Take Your Run Time to Build Time

Rohit Singh

As the pendulum of web development swings back towards the server, streaming has become increasingly popular. Specifically, out-of-order streaming through features like React Suspense, the magical powers behind Server Components. Let's build our very own simplified version to explore how it works, what problems we are trying to solve, and what this future of web development looks like.

Let's Build Suspense 🥁

Julian Burr

Did you know that micro frontends can be much faster than their monolithic counter parts? How about rollbacks of specific features? In this talk you will hear and see 8 examples of things that will not only teach you a bit about micro frontends, but also in what cases they are most useful.

8 Things You Did Now Know Micro Frontends Can Do

Florian Rappl

Explore Server Components through the lens of reusable UI Component, where everything "depends" on the individual requirements of the use-case and individual application needs. Instead of fighting over 'server' vs 'client' - let's have the best of both worlds.

Polymorphic React Components for Both the Client and the Server

Kiril Peyanski

Build AI Apps in 5 Minutes: Live Demo with Vercel AI SDK, v0.dev, and RAG! Dive into the future of AI development with a live demonstration on building an AI-powered app in just 5 minutes using Vercel’s AI SDK, v0.dev, and Retrieval-Augmented Generation (RAG). Learn the secrets of fine-tuning models and seamlessly integrating cutting-edge tools to create powerful, responsive applications. Whether you're an AI novice or a seasoned pro, this talk will provide you with the practical knowledge and skills to rapidly develop and deploy innovative AI solutions.2

Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!

Tracy Lee

Join us for a fast paced introduction to TanStack’s full stack client-side first React framework. Based on TanStack Router, it’s jam packed with Type Safety, server functions, SSR, powerful URL state management and couple more awesome surprise features that make building apps easy, fast and fun again!

Tanstack Start - A Client-Side First Full-Stack React Framework

Tanner Linsley

Get ready for an exciting journey through the latest in Chrome DevTools and React DevTools as we dive into the State of the Union for 2024. We'll explore the powerful tools and features that continue to empower developers to craft high-performance web experiences. We’ll also touch on the latest in React debugging including updates like React Compiler support. Whether you're a veteran user or new to the DevTools magic, this session will equip you with actionable tips and insights to level up your development process.

Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

Addy Osmani

Ever wonder how React can "update" a page while it's still loading? We've gotten so lost in the discussion of things like Next.js, Suspense, Signals, Server Components, and Server Actions, that most React devs have totally missed one of React's most recent pieces of magic: Out Of Order Streaming.

Out Of Order Streaming (The Secret Powering Modern React)

Theo Browne

While Refs are considered an escape hatch there are times when you might just need to use them.In this talk, with the help of real world examples, we will look at what Refs can do for us in terms of code clarity and also performance gains. Think along the lines of minimising renders and avoiding flickering UIs. We will cover the restrictions for safe usage and for those of you already using these patterns make sure you are prepared for the changes coming in React 19.

What Refs Can Do for You

Stephen Cooper

Performance plays a crucial role in ensuring the responsiveness and functionalities of an application. A deeper knowledge on prefetching, preemptive search, faster caching and frontend optimisations and many other performance initiatives will be learnt.

Speed Search: Making Expedia Flights Faster

Heena Gupta

As React developers we spend countless hours creating pages and components to bring our applications to life. It's an exhilarating journey, but have you ever wondered what happens when you're faced with the challenge of not knowing the components your page application will have? Join me in this talk where we'll dive into the realm of TypeScript duck typing. Discover how this powerful technique can transform your React development mindset, and effortlessly construct a generic application that can serve an unlimited number of pages.

Unleashing the Power of Duck-Typing in React: Crafting a Generic Application

David Villamarin

Remember that time a simple XSS vulnerability exposed millions of user records? Or when a misconfigured environment variable led to full database compromise? It's a frontend developer's nightmare, and it happens more often than you think. React gives you some security tools out of the box, but let's face it – they're not enough. If you're building anything beyond a basic app, you need to step up your security game. This session will reveal 7 powerful techniques to fortify your frontend applications against the most common attacks.

Security Matters for Frontend Too! 7 Steps to More Secure React Apps

David Mytton

React functional components don't actually exist, and this makes them deceptively difficult to reason about. Come to this explainer to understand the problem the React 19 compiler is attempting to solve.

Everything You Thought You Knew About React Functional Components Is Wrong

Amy Blankenship

In the rapidly evolving landscape of technology, Artificial Intelligence (AI) stands out as a game-changer our industry. But what are the implications for accessibility and building compliant and inclusive experiences? In this talk, we will discuss AI and accessibility in all its nuances. From significant advancements that improve experiences for all users to major concerns around the ethics and organizational investments in accessibility, we will cover it all. Either way, AI is here and we got a lot to talk about to ensure accessibility remains at the forefront of our work.

AI and Accessibility: We Got a Lot to Talk About

Cat Johnson

As React continues to dominate the web development landscape, securing the vast ecosystem of open source dependencies has never been more critical. In 2024, the challenges around React and JavaScript security have evolved, and the risks associated with software supply chain attacks are more pronounced than ever. In this talk, we’ll explore the current state of JavaScript security, highlighting recent high-profile supply chain attacks and their impact on the development community. We’ll discuss the latest trends, tools, and best practices for managing and securing your JavaScript dependencies. Key topics will include: •        An overview of recent supply chain attacks and lessons learned •        Effective strategies for mitigating risks from malicious dependencies •        How modern tools and standards are improving the security landscape •        The role of developers and organizations in fostering a secure open source ecosystem Join Feross Aboukhadijeh, a seasoned open source maintainer and security expert, as he shares insights and practical advice on navigating the complex world of JavaScript security in 2024. This session is essential for developers, security professionals, and anyone invested in maintaining a secure and resilient software supply chain.

The State of JavaScript Security in 2024

Feross Aboukhadijeh

React Actions - Converting a React 18 Form to React 19 Form or React Compiler?

Shruti Kapoor

React Server Components offer an effective method for improving web app performance by rendering components on the server and streaming them to the client in real time. This session will cover the functionality and benefits of React Server Components, showing how they can increase application speed and responsiveness. We will examine the role of asynchronous components, efficient data management, and the strategic use of modern React features to optimize load times and interactivity. With real-world examples and practical advice, you'll learn how to integrate these components to enhance your web app’s performance and provide a better user experience.

React Server Components: Elevating Speed, Interactivity, and User Experience

Aurora Scharff

How I Support More Than 100 Languages in My React app...and You Can Too!

Richard Carrigan

Influence isn't tied to having "Manager" in your job title; it's about the connections you build and the legacy you leave. This session will teach you the skills necessary to build influence within your organization whether you're an IC or EM.

Influence Without Authority: Making an Impact in Your Organization Regardless of Job Title

Kelly Vaughn

Anyone can publish a library to NPM. But what happens when that library is used by millions of developers? How do you juggle the complexities of publishing one of the most widely used packages in the ecosystem, and also deal with supporting and maintaining a community? We'll look at the mindset and and approach to dealing with these challenges and what it means to be a "maintainer" today, including practices for providing user support across platforms, keeping a "devrel" mindset, designing documentation, designing features and APIs, how to consider package versioning and compatibility, when to ship breaking changes, technical challenges with publishing packages, and keeping up with the ever-evolving ecosystem.

Maintaining a Library and a Community

Mark Erikson

From bridgeful, to bridgeless, to Expo Modules and Static Hermes, the landscape of native modules in React Native is ever-evolving. Cross-pollination, however, has always been limited – it is rare for React Native to use native modules from other ecosystems, and vice versa. In this talk, we introduce Node-API, a popular standard for exposing native APIs to JavaScript in an ABI-stable manner, no matter the engine. Used in Node.js and most other major JavaScript runtimes, it is the ideal technology for sharing native modules cross- ecosystem. We'll show how it's being used by Microsoft in React Native Windows already, and what it may mean for the future of React Native!

React Native, Meet node.js Native Addons

Jamie Birch

React Summit US

React Summit US 2024

Tiny

Storyblok

Ag Grid

Sentry

Handsontable

Contentful

Replay.io

Cloudflare

Convex

EdgeDB

Stytch

HubSpot

Choreo

Knock

Asgardeo

Storyblok is a CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Kickstart a new CMS project with your favorite technology in a matter of minutes, and for free.

Storyblok is a Headless CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Get started in a matter of minutes!

Get 14 days of Storyblok for Free

A front-end component that combines data grid features with spreadsheet UX/UI. Professional support included. Works with React, Angular, Vue, and plain JavaScript.

React Summit US 2024

The biggest React conference in the US