React Summit US 2024

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.

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!

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

GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks and understand how they differ from traditional use of LLMs.We will understand prompting techniques for LLM agents and specifically the React prompting technique for AI agents (not to be confused with React the programming language). We will build, from scratch, our own GenAI agent that can interact with the user, perform web searches and code and execute in Javascript.Table of contents:- Introduction to GenAI agents- Understanding the React framework- Hands-on Building of simple GenAI agent- Deployment of the Agent with streamlit- Tips, and frameworks for developing GenAI agents

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&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 C3 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 KVs, R2 buckets and Workers AI. We’ll also make sure to test all the code to make sure that it correctly interacts with the aforementioned APIs via the official Workers Vitest integration.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 playwright 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

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.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.Learning GoalsLatest React 19 Hooks — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValueServer ActionsRevalidationsServer-side ValidationError handlingSecurity practices

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 & 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 & AG Charts into your React application.

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.

Join Nathan and Alexa 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.

Take your existing React skills to the next level by learning how to create 3D, spatialized applications directly in the browser using WebXR on Meta Horizon OS with React Three Fiber and React Three XR. Building for mixed reality has never been easier. WebXR allows any React app to be transformed into an immersive experience using the same business logic, web standards, and tools you're already familiar with. In the first half of the workshop, you'll learn how to build 3D React apps using React Three Fiber, extend those apps into mixed reality with React Three XR and try them out using the provided Meta Quest headsets. In the second half, you will put your skills into practice by building a mixed reality app in one of two tracks:Business TrackBuild a mixed reality product configurator by going in depth on 3D UI, routing and multiple product variations directly in the user’s room with proper scaling.Game TrackBuild a mixed reality physics game where you throw digital objects at everything from the physical wall to other digital objects precariously stacked. We will cover game development basic, physics and advanced mixed reality features.