October 14 - 15, 2020
React Summit
Online

React Summit 2020

The biggest React conference worldwide



This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Rethinking Server State with React Query
96 min
Rethinking Server State with React Query
Top Content
Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Getting Started with Suspense and Concurrent Rendering in React
125 min
Getting Started with Suspense and Concurrent Rendering in React
Workshop
Maurice de Beijer
Maurice de Beijer
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `<Suspense />` component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using <Suspense />, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the <SuspenseList /> component.
TypeScript + React = ❤️
30 min
TypeScript + React = ❤️
Welcome to TypeScript plus React equals love. TypeScript features can prevent bugs in React apps. TypeScript gives confidence to remove unused props. TypeScript ensures accurate prop definitions and prevents laziness. TypeScript provides type safety and advanced patterns for better developer experience. TypeScript is a good candidate for projects, especially larger ones.
Nx + Next.js = ❤
9 min
Nx + Next.js = ❤
Hey everybody, my name is Adam Ellibert, aka Big AB, and I am a core contributor on a project called NX. Today, I'm going to go through a whirlwind tour of a really cool way to do web development using NX. NX is a suite of dev tools to improve developer experience, and it's extensible, plugin-based, and open-source. I'll show you some of the commands that NX provides, such as creating an NX workspace, generating schematics, serving as a dev server, building applications, and running tests. NX also has a variety of plugins, including the Next.js plugin. And if you're not comfortable with command-line interfaces, there's a GUI available for you. I'm going to create an NX workspace and choose Next.js as my first application. Then I'll create another app called Uber for Star and add a dashboard page. I'll also create a shared components library and configure storybook for it. Finally, I'll use NxServe to serve my Uber 4 app. This setup includes a splash page, a dashboard page, and a design system using storybook. We've got shared components for our marketing website and Uber 4 app. We also have end-to-end directories for Cypress tests and jest for unit tests. Our Uber 4 app is similar to any other Next.js app with pages and a nested dashboard page. We import shared components by prefixing them with the org name and library name. NX handles dependencies, ensuring everyone is on the same version and allows scoping imports to the org. Computation caching optimizes test and build runs by caching results that are unaffected by code changes. NX brings easy application creation with consistent commands and shared library extraction. Generators save time and enforce best practices. NX provides modern tools like Cypress, Storybook, Prettier, ESLint, and Next.js. The Next.js plugin creates and configures Next.js applications, serving them in dev mode and building production-ready and static apps. Visit nx.dev for more information.
Visualising Front-End Performance Bottlenecks
34 min
Visualising Front-End Performance Bottlenecks
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK
25 min
Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK
This Talk provides an introduction to JavaScript and React, as well as insights into building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. It covers the concepts of GraphQL schema, data sources, and resolvers, as well as the use of GraphQL subscriptions for real-time communication. The Talk also highlights the features of AppSync and CDK for building APIs and infrastructure. It concludes with a demonstration of creating an API with CDK and AppSync, including the creation of Lambda functions and DynamoDB tables.
Zero to Production with Fullstack GraphQL and React with Hasura team
162 min
Zero to Production with Fullstack GraphQL and React with Hasura team
Workshop
Allison Kunz
Allison Kunz
Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover:
- A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless.
Blitz.js - The Fullstack React Framework
32 min
Blitz.js - The Fullstack React Framework
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
Getting Weird with Video Manipulation and HTML5 Canvas
16 min
Getting Weird with Video Manipulation and HTML5 Canvas
Today's Talk at React Summit focused on the Canvas and HTML5 video APIs, showcasing the capabilities and possibilities they offer for video manipulation and interactivity. The speaker demonstrated how to use the HTML5 video element and canvas to manipulate and draw images, apply filters, and add real-time text overlays. They also showcased real-time object detection on video frames using machine learning. The Talk concluded with an example of enhancing a marketing website with interactive video using the canvas element. Overall, the Talk highlighted the power and potential of these APIs for video development.
The Psycological Effects of useEffect
26 min
The Psycological Effects of useEffect
The Talk at React Summit explores the use of useEffect in React and its psychological effects. It delves into the concept of component life cycles and the flexibility of useEffect. The Talk also discusses the use of refs for mounting and unmounting components, as well as the cleanup effects of the return function. It highlights the importance of understanding when and how useEffect runs, and provides examples of using useEffect in different scenarios.
Flipper: The Extensible DevTool Platform for React Native
32 min
Flipper: The Extensible DevTool Platform for React Native
Flipper is an extensible dev tool platform for React Native, developed at Facebook, that allows inspection of the React development tree and native elements. It offers plugins for image cache inspection, preference modification, and network requests. Flipper can be used to build application-specific plugins and integrates with Redux and ReactorTron. The tool is undergoing a major redesign with new features like dark mode and a standardized component library. Maintainers can debug plugins within plugins and there are plans to integrate with GraphQL.
Consume ➡️ Build ➡️ Teach
29 min
Consume ➡️ Build ➡️ Teach
Kent C. Dodds discusses the consume, build, and teach approach to learning and upgrading oneself in a software development career. He emphasizes the importance of consuming curated content, learning from others, and applying different learning methods. Kent shares his experiences in creating personal projects, building projects to understand technologies, and learning through projects. He highlights the power of teaching, the benefits of learning clubs, and the importance of balancing personal life and learning. Kent also introduces Epic React, his workshop-focused approach to teaching React.
Making Your React Apps Perform At Scale
21 min
Making Your React Apps Perform At Scale
This Talk discusses making React apps more performant by analyzing their complexity, running performance tests, using tools like Lighthouse and the Profiler, and optimizing components and API calls. It also covers techniques for cleaning up existing apps, such as code splitting and tree-shaking. The main focus is on improving app performance by virtualizing lists, lazy loading, caching data, minimizing code and assets, and handling rendering errors.
The Language of Shapes: Understanding the SVG Path
32 min
The Language of Shapes: Understanding the SVG Path
This Talk introduces the SVG Path element, exploring its commands and potential. The speaker simplifies the language of shapes by grouping commands together and finding alternative ways to define arcs. They also present a path editing tool that allows for easy manipulation and visualization of path data. The Talk concludes with discussions on performance, limitations, recommended resources, SVG morphing, and the FlubberJS library for path interpolation.
Fantastic Bugs and Where to Find Them
34 min
Fantastic Bugs and Where to Find Them
TypeScript is a JavaScript-based language used for mobile apps. Testing rules include ensuring tests fail when something goes wrong and only fail when necessary. Integration testing can be done using tools like Cypress and Netflix PolyJS. Visual regression testing compares screenshots of changes and helps prevent visual bugs. Starting with end-to-end tests and writing tests for bugs encountered are recommended for beginners.
Build Full Featured Frontend App with Svelte
192 min
Build Full Featured Frontend App with Svelte
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte. 
Accessibility as a First Class Citizen
24 min
Accessibility as a First Class Citizen
TypeScript and React are popular languages for software development. Accessibility is important for inclusivity and preventing lawsuits. Building accessibility from the start is crucial, considering design and engineering aspects. Tooling for React Native accessibility is limited. Setting the accessible prop and role in components is essential for screen reader users. The React Native documentation is helpful, but some accessibility needs may require additional attention.
GraphQL and React - Two Great Tastes that Taste Great Together
9 min
GraphQL and React - Two Great Tastes that Taste Great Together
React's JavaScript extension allows you to write JavaScript in the JavaScript editor, providing flexibility for any type of application. The use of React and GraphQL in enterprise applications resulted in improved code maintenance, design acumen, and code reuse. Building teams of passionate individuals interested in React and GraphQL solidified the argument for using these libraries. The integration of React and GraphQL with modern development paradigms like Reactive and event-based programming was seamless. Existing reference materials and community-based resources facilitated the quick onboarding of new team members.
React Accessibility: Beyond the Basics
32 min
React Accessibility: Beyond the Basics
Today's Talk on React Accessibility covers the importance of manual testing, the challenges faced in addressing accessibility, the impact of accessibility on user experience, and the use of subtitles and user settings for accessibility. It emphasizes the need for manual testing in addition to automated testing, the role of empathy training in understanding accessibility challenges, and the significance of addressing accessibility issues for all users. The Talk also highlights the benefits of implementing accessibility features, such as increasing website accessibility for disabled markets and improving user experience for all.
Introducing React View
30 min
Introducing React View
ReactJS is a JavaScript-based framework that emphasizes the importance of building amazing documentation to reduce questions. The speaker discusses the custom website built using Next.js and MDX, and the challenges of dealing with JSX and the compilation process. The talk also covers interacting with NAPs, extracting information from code using AST, and the benefits of using Babel and AST Explorer. The process of building and generating code with AST is explained, along with the importance of documentation and ReactVue. The speaker also provides insights on getting started with documentation, building custom documentation, and keeping it in sync with the code.
Let the Main Thread Breathe!
35 min
Let the Main Thread Breathe!
Let's explore how to improve web application performance by offloading tasks from the main thread to other threads. We need to ensure compatibility with all devices and users to avoid frustrating experiences. Web Workers and Web Assembly can help improve performance by offloading tasks, but there are trade-offs to consider. Converting existing codebases to WebAssembly can be done gradually, and it's important to measure performance before making the conversion.
React Components and How To Style Them
8 min
React Components and How To Style Them
This lightning talk explores different methods of styling React components, including inline styling, CSS stylesheets, and CSS in JS. The speaker highlights the benefits of using Style Components and Emotion, such as access to pseudo selectors, global styling, and themed elements. They also discuss the concept of polymorphism in Style Components. The speaker recommends using style components for their power and accessibility. The choice of styling method depends on project scale and personal preference.
The X in MDX
9 min
The X in MDX
Markdown is extended by MDX to support more content and layouts. MDX allows for customization of rendering and extraction of data. It is often used for embedding interactive components. MDX can be used to create custom layouts and synchronize steps with media. Codehike is a project focused on code wall tools and explaining code.
Games Are Smarter Than Us
26 min
Games Are Smarter Than Us
Today's Talk explores game development using JavaScript, including building games in the browser, using game engines, and utilizing the BitMellow framework. It also delves into the concept of using AI to make computers play games, discussing reinforcement learning and implementing it in games like Flappy Bird. The Talk highlights the process of teaching the agent to learn, modifying rewards to improve performance, and the journey of game development from initial stages to advanced AI integration.
Why Paid UI Components Aren’t Evil
8 min
Why Paid UI Components Aren’t Evil
Paid UI components are not evil and offer benefits such as guaranteed support and long-term peace of mind. They solve harder problems and provide features and guarantees that free controls may not have. Paid components also establish a direct financial relationship with the authors, eliminating the need for sponsorship or donation models.
Improve Your SEO
8 min
Improve Your SEO
We're introducing our new release and livestream, explaining mobile-first indexing and its impact on SEO. Teachers Pay Teachers faced challenges with Google's move to mobile-first indexing, prompting them to optimize their mobile pages. They combined teams, tested performance, increased page speed, fixed structured data issues, and showed hidden content to improve search ranking. To optimize mobile pages for Googlebot, it is important to update mobile content, increase page speed, and test performance and SEO.
Using React Hooks + Capacitor to Access Native Mobile APIs
7 min
Using React Hooks + Capacitor to Access Native Mobile APIs
Capacitor is a powerful tool built by Ionic that allows web applications to be compiled into native iOS and Android projects. It comes with a set of plugins, including the camera plugin, and has a React hooks package for seamless integration with React applications. The Talk includes a demo showcasing the camera hook button and the rendering of selected photos. The presenter emphasizes the use of useEffect and useState for additional functionality. The Talk concludes with a mention of the Capacitor community and gratitude for attending.
We Are All Hemingway
22 min
We Are All Hemingway
This Talk covers important tips for software development, focusing on React. Starting with what you know and building on it is emphasized. Asking the right questions and simplifying components demonstrates seniority. Reading code and asking questions are crucial for finding better solutions. The connect function in React Red Hook's library and the function-as-child component pattern are highlighted. Writing code that is easy for others to understand and maintain is emphasized. The importance of retrying on the server and refactoring for the ecosystem is mentioned.
Smoothly Inclusive Component Library Documentation
18 min
Smoothly Inclusive Component Library Documentation
This Talk discusses how Gatsby and MDX can improve component library documentation. The speaker shares their experience with a previous design system and the challenges they faced with documentation. They explain how Gatsby was chosen as a solution and the benefits it provided. The use of MDX is highlighted as a way to enhance component documentation. The addition of editable code blocks is also mentioned as a means to make the documentation more interactive and intuitive.
Create Collaborative VR Environment in the Browser with React and GraphQL
26 min
Create Collaborative VR Environment in the Browser with React and GraphQL
This Talk explores creating VR experiences with A-Frame and React 360, using coordinate systems and rendering different surfaces. It also discusses bringing data into VR with GraphQL and architecting collaborative systems with Hasura. The Talk demonstrates how to add VR and A-Frame to React 360, and concludes with a focus on rendering and wrapping components. Overall, the Talk encourages exploration and experimentation in VR and AR development.
Theming Gatsby Apps with Theme UI
6 min
Theming Gatsby Apps with Theme UI
Welcome to Theming Gatsby apps with Theme UI. Gatsby is a React-based framework for building static websites and applications. Theme UI is a styling library that allows developers to configure designs for components using predefined values. In Theme UI, you can easily refer to your theme object throughout your project. Variants allow you to define styles for common components like buttons.