Two full days of knowledge sharing and community with people who build and LOVE React.

This year’s conference features a mix of panels and talks set against the backdrop of beautiful Lake Las Vegas. In addition to a can’t-miss schedule, we’re organizing off-hour activities providing opportunities for relaxation, adventure, and getting to other React enthusiasts.

React Conf

Tom talks about how React provides a great Developer Experience by lowering the barrier to entry, and allowing us developers to experiment, be productive and scale our apps, easily. 

He discusses Concurrent mode and Suspense; two technologies that will allows us to improve the User Experience of our apps by making them more responsive and be more native-like. 

Finally, he emphasizes his team’s strong focus on diversity and inclusivity and talks about React’s code of conduct.

Keynote - Part A

Yuzhi takes a look back at what happened since they announced React Hooks in React Conf 2018 and how they became so popular, since they were released with React 16.8. 

Next, she talks about Accessibility and their effort to enable React apps to be more accessible by default, with better focus control and support for more input interfaces. Another area of investigation, is initial render time, better support for Server Side Rendering and the—all new—Progressive Hydration and Selective Hydration. 

Finally, she demonstrates the latest iteration of React Suspense and Concurrent Mode, which are now available as experimental features!

Keynote - Part B

Frank talks about the evolution of Facebook as a website, and the challenges that they faced as they try to extend and enhance it.

Frank talks about the evolution of Facebook as a website, and the challenges that they faced as they try to extend and enhance it. They recently rebuild the website from scratch(!), using React, GraphQL, and Relay. 

Their goal was to create a modern design system, improve accessibility, and achieve faster page loads and seamless interactions. 

In the process, they created their own CSS-In-JS library, whose features Franks presents, as he goes through the new frontend architecture.

Building the new Facebook with React and Relay - Part A

How does app performance look at scale? Ashley dives deep into the details of how they rebuilt Facebook.com and achieved super-fast rendering times and network transfers.

See the technologies and strategies powering the new Facebook.com. Their approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.

Building the new Facebook with React and Relay - Part B

Food waste is one of the biggest environmental and social challenges facing the planet. OLIO helps people connect and share surplus food. And it's built in React Native!

How our team is using React Native to save the world

A compelling, real-world, case study of how TypeScript and GraphQL helped overcome issues with legacy code, iterate faster, and provide more value to users.

As a startup that integrates with larger, often older enterprises, we have to integrate with  a number of RESTful services (against our will). This technical talk will outline how we are able to bring type-soundness, autocompletion, and powerful developer tooling to our internal workflows using hooks and TypeScript.

Using hooks and codegen

It is important to understand the abstractions that we use (watch “Requisite React”). This is a deep dive into React’s architecture. Watch Sophie build a simple version of React DOM.

There's a little-known npm package named react-reconciler that lets you build your own React renderer. React DOM and React Native themselves are built on top of it. And with it, you can build your own. In this talk, we'll build a simple version of React DOM. With any luck, you'll walk away with a better understanding of React.

Building a Custom React Renderer

Tree shaking (dead code elimination) can be an invaluable feature in modern build tools to keep bundle sizes slim. Unfortunately, it's can also be easy to ""break"" and overlook with a single import star (import *). Imagine this slips in and is overlooked for months, only to later realize it adds over 4 megabytes. But now, its implicitly relied upon in hundreds of places.

This is a story about creating a custom codemod transform to update hundreds of implicit usages to be explicit imports to ""fix"" tree shaking and remove nearly 97% of the unused code.

Codemod-ing away 4MB of JavaScript

This talk will cover how I accidentally discovered time travel in git, how to change the auto-detected language of your GitHub repositories and other Git related hacks to make working with Git and GitHub more delightful (or maybe just make your commit history less embarrassing git hooks).

Git is hard, but time travel in git is easy

Using codegen sorcery I will show you how to scaffold an entire type safe api layer, client and server, by only defining your graphql schema.

Automagic TypeScript Codegen for GraphQL

Not long ago, most companies looked down on front-end engineering. They thought the real engineers programmed the server in Java, while the script kiddies played around with it's wannabe little brother, JavaScript. 

But, in the last several years, React and its ilk have proven that sophisticated approaches to immutability and asynchrony allow for unprecedented scale and complexity in the front-end. 

Now, the tables have turned, and back-end frameworks are starting to wake up to the benefits of asynchronous processes and event sourcing patterns, following the trail that React has blazed.

Why React is eating the World

From around the world, voices sounded out in a multitude of languages: is React Translated Yet? With the efforts of hundreds of contributors, I can finally say: ¡Sí! Sim! はい 

Over the course of a month, I helped the React team kick off translations of reactjs.org into 40 languages. Join me for a behind-the-scenes look at what it takes to get the docs for a massively popular library translated. 

We'll talk about GitHub rate limits, managing a global community, amateur bot-building and more!

Is React Translated Yet?

When building a design system, many implicit choices are made in a component’s architecture that can end up crushing the dreams of a productivity-boosting frontend utility and turning a shared component library into a vessel for friction, factions, and forking. 

Join us as we take you through the journey of Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there.

Building (And Re-Building) the Airbnb Design System

Learn how to get started with accessibility, with common tools, patterns, and starter-tips.

Accessibility standards are often first on the chopping block in the face of deadlines. We've all been on projects where we write that dreaded TODO comment leaving an accessibility audit for later. Let's unpack why that is and start changing it! 

We'll look at common tools, patterns and starter-tips that can help us shed light on accessibility in a new, less daunting way. 

In this talk we'll discuss how to get started with accessibility—the metaphorical salad and power walking of a11y that can prepare us to run an accessibility marathon, if you will.

Accessibility is a marathon, not a sprint

Redux? Render props? Context? Apollo? And what are these hooks that everyone is talking about? If you have ever gotten lost in the multitude of ways to manage state in your React application in 2019, you’re not alone. 

Let’s compare the options, and talk about the state of state management today.

The state of React State in 2019

As the web turns 30, Lee takes us back to its inflection point in 1999, with PHP and the LAMP stack, followed by a journey of the abstractions, syntax, and mental models that brought us here.

The mental model for building for the web largely hasn’t changed in the last 20 years, but we’ve incorporated complexity, richness, grown our community a thousand fold, and scaled to billions. 

This year the web turns 30, and we look back at the steady march forward of better abstractions, better syntax, and better mental models that brought us here.

Let's Program Like It's 1999

Brian introduces Fast Refresh for React; a superior alternative to Hot Reloading. Fast Refresh updates your app while you make changes to the code, and it also maintains state _and_ works with hooks. 

He then presents the revamped React developer tools and all the cool new features they bring to the table. 

Finally, he demonstrates React Codemods; an automated way to update legacy React code.

React Developer Tooling

After a short introduction to Relay and Suspense, Joe talks about building an app with these two technologies and what are the best practices.

Data Fetching With Suspense In Relay

Visualization isn't just for charts. Developers spend most of their time trying to understand existing code, which often lacks documentation about design-level concepts. Handcrafted diagrams are useful but get out of date, and traditional code search only helps if you know what words to look for. 

We don't navigate the real world by examining every sector of a geographic map, so why should we scan code line-by-line? 

This talk will showcase the past, present, and future of visual tools for automatically generating maps of code, using inspiration from older typed languages and HCI research.

Automatic Visualizations of the Frontend

How many times have we used a design pattern, just because we’ve been conditioned to use it? Jenn gives a thought-provoking, interdisciplinary talk that questions our assumptions and challenges us to break the rules.

You don't know it but you are an author. You write stories every day. You build narratives, characters and plots — but you aren’t writing a novel, you’re writing components. 

I came to engineering from the world of creative writing and what surprised me the most is how similar code is to fiction. React itself follows tenants of creative writing and when you lean into those rules, you create solid component architecture. 

In this talk you’ll learn how to write React like its fiction and what you can gain by doing so.

React is Fiction

Learn how to create smooth, performant animations and interactions, that look and feel native-like.

As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience. 

However, one barrier to feature parity is the difficulty of creating a native-like UI transition and interaction experience on the mobile web, especially on lower-end devices. 

I’ll be discussing various considerations, tips and techniques to create a web app in React that looks, moves, and feels as close to a native mobile app as possible.

Building mobile-first web animations in React

As a multi-platinum selling music producer, recording artist, songwriter and award-winning film composer, I have seen the inner-working of the entertainment industry from several perspectives. Alternatively, as a lead software engineer with over 12 years experience, I have helped companies increase sales, conversion rate, customer lifetime value and develop efficiency all over the stack. There are several binds that tie the two seemingly opposite industries together. Let's take a few minutes and talk about them!

React and the Music Industry

Terms like Monad or Comonad might sound like alien abstractions for every day when using React. However, these abstractions are more common than we might have previously thought. State on our UIs and environmental requirements for computations like calculating a Virtual DOM or how our components should look like can be "intuitively" modeled with a Comonad. Join me on a short journey to demystify these concepts and get to know them a bit more

Comonads on your everyday UI tools

Always test your project with users, even if they’re 4 years old. We built the Wick Editor, a free, open-source, Mozilla supported tool for creating games, animations and interactive projects, using React.js. 

Over three years, we transformed our student project into a tool used by over 10,000 beginner animators and game designers a month. Getting to this point took dozens of workshops, after school sessions, game jams, and professional development sessions. 

Learn how we refined our design and development approach, and stayed motivated, by working with students and teachers of all ages.

Making games, animations and interactions with the Wick Editor: A UX talk

How I accidentally built the most popular React component, experienced death by a hundred props, got buried under hundreds of PRs, invented a component extension API, learned that styles are also a function of state, influenced some major design systems and finally got some sleep.

Building React-Select

Learn about the role of React in fulfilling the Digital Accountability and Transparency Act (DATA Act), which makes federal spending data publicly accessible, searchable, and more reliable. 

As the basis for the frontend of USAspending.gov, React has shown that a combination of modern web technologies, open source, and agile practices can not only be successful, but transformative in the government IT sphere.

Promoting Transparency in Government Spending with React

Have you ever wanted to soar the stars? Have you ever gazed into the sky and wondered what was up there? Well now you can know, with Thorium - a first of its kind open-source starship bridge simulator, built entirely with React and web technologies. 

Thorium is the product of wonder-driven development, or making something because you wonder if you can. Let me tell you about some of the things I wondered and how you can use this attitude in your own code.

Distinctive event

React Conf 2019

Oct 24 - Oct 25 | Nevada, USA