React Summit

React Summit 2024

The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there’s a lot more that goes into it!Let’s zoom in on one component from GitHub (one that you’ve probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

Case Study: Building Accessible Reusable React Components at GitHub

Siddharth Kshetrapal

React Summit US

React Summit US 2023

Guild is a platform that needs to exist on all platforms, using React Native to orchestrate them. React Native and Expo provide components that work across platforms. Building applications with React Native involves composing components and using a design system. Choosing the right server-side rendering solution is important for unifying mobile and web codebases. Embedding React Native allows for optimization and embedding in any application. Bridging the gap between UI and API with embeddable experiences is key to supporting communities on every platform.

This talk focuses on building a production-grade consumer social application - https://guild.host . If you visit that site, would you be able to tell it's built using React Native just by looking and using it? At a high level, Taz talks about what makes that possible and how the audience should consider application architecture. At a lower level, Taz focuses on: - How React's component composition model makes accommodating multiple platforms easy - How large applications should use a Design System, and the Tamagui Design System comes with an optimizing compiler that outputs straight platform-specific code while the developer still writes high-level UI that happens to utilize React Native's components - How to Server-Side Render a React Native Web application, and what considerations Guild made when choosing to create a custom SSR engine on top of Cloudflare Workers - In order for Guild to exist anywhere, they need to embed themselves into other experiences. This involves Third-Party React Native on the Web and other platforms - The future of this architecture, where Third-Party UI is the same as First-Party UI

Wait, You're Shipping React Native to the Web?!

Taz Singh

This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.

We spend a lot of time discussing which state library we should use, and fair. There are quite a few, from the common one everyone uses and loves to hate on, to that one quirky alternative, to several up and comers. However, discussing which library is best puts the cart before the horse. When figuring out how to handle state, we should first ask ourselves: what different categories of state do we need? What are the constraints of each category? How do they relate to each other? How do they relate to the outside world? How do we keep them from becoming a giant, brittle ball of yarn? And more. This might sound overwhelming, but never fear! In this talk, I'll walk you through how to answer these questions, and how craft an approachable, maintainable, and scalable state system. And yes, I will talk about how to pick a state management library too.

Taming the State Management Dragon

Bryan Hughes

The speaker works on the Atlas Device SDKs, which allows testing code across multiple platforms and has support for multiple programming languages. They also built Mocha Remote CLI, a tool for running tests on Node.js and in a browser. The speaker mentions the popularity of Jest and the alternative Vitest for running tests on platforms like Android and iOS.

Running tests on Node.js is common practice for app and library developers. But when your library is integrating more deeply with the platform, operating system or JS engine, you need to run tests “on device” increases. The Realm JS team at MongoDB is faced with this challenge, as we’re maintaining a React Native library with native modules. In this talk I’ll share the “mocha-remote” package which we’ve built to help us run tests “on device” while getting reporting and remaining in control from the comfort of our terminals.

How Realm by MongoDB is Testing Native Modules “on device”

Kræn Hansen

This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.

In this talk, we will explore how Valtio can simplify your React state management by providing a minimalist and performant solution. We will cover the basics of Valtio, including how to create and update a store and how to access and modify the store from your components. We will also dive into some advanced Valtio features, such as subscribing to changes in the store, andusing memoization to optimize your components' performanc. By the end of this talk, you will have a solid understanding of how Valtio can make your state management more efficient and effective, allowing you to create scalable and maintainable applications.

React State Management with Valtio 

Niya Panamdanam

Redwood is a full stack web app framework built with React, GraphQL, and Prisma. It prioritizes conventions and maintainability, and collaborates closely with the React team. Redwood offers full-stack features, including real-time functionality without WebSockets. The Bighorn Epoch is a new phase in Redwood's roadmap. Redwood is excited about the possibilities of React Server Components and wants to collaborate with the community.

Redwood, an open source full-stack app framework, has gone all-in on React and React Server Components. Why? Despite RSC’s early stage and complex implementation, Redwood is uniquely positioned to capitalize on RSC capabilities, enabling exciting new features, possibilities, and DX.

Why Redwood Adopted React Server Components

David S. Price

TS Congress

TypeScript Congress 2023

This Workshop covers a variety of TypeScript techniques, including type checking, compiling code, using operator satisfies, creating type mappings, manipulating types with template literal strings, and using opaque types for type safety. It also introduces Next.js and React Server Components for server-side rendering and direct data fetching. The importance of type checking and CI setup is emphasized, along with the use of satisfies and pick operators. Custom type mappings and their applications are explored, as well as the use of opaque types and type assertions for better type checking. The workshop also highlights the benefits of preventing undefined errors and using strict options in TypeScript.

In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.   During the workshop, you will: - Maximize code maintainability and scalability with advanced TypeScript practices - Unleash the performance benefits of React Server Components, surpassing traditional approaches - Turbocharge your TypeScript with the power of Mapped Types - Make your TypeScript types more secure with Opaque Types - Explore the power of Template Literal Types when using Mapped Types   Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.   Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.

Practice TypeScript Techniques Building React Server Components App 

Maurice de Beijer

React Summit 2023

Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.

Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components. We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.

Off with Their Heads: Rise of the Headless Components

Omry Nachman

Wix has a cool team working on developer toolings, with main products being Stylable and CodeX. CodeX is a visual IDE for React that helps with code understanding, changing, and validation. It supports CSS, CSS modules, Sass, Sass models, and Styleable for styling. Codex allows for easy navigation, editing, and rendering of components, and can connect to external data sources. It can be installed by downloading from codex.com and requires a Wix account.

Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code. Table of the contents: - Download &amp; Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&amp;A

From Idea to Production: React Development with a Visual Twist

Omer Kenet

React Day Berlin

React Day Berlin 2022

Ilya, a Staff Engineer in ArtSecurity, gives a talk on using generic components with React and TypeScript. He demonstrates how to pass generics to React components and addresses syntax limitations. Generics allow components to operate on data without a defined shape and are commonly used in form field components and component libraries.

What is a generic component? How to write them? When to use it?

Generic Components with TS and React

Illia Kibalnyi

TestJS Summit

TestJS Summit 2022

Cypress component test-driven design can take front-end engineers to the next level by covering TDD examples, component testing, endpoint testing, and recommended best practices. The TDD flow involves starting with failing tests, making them work, and then improving them. Component tests can be written incrementally, using custom wrappers and props. The differences between React Testing Library and Cypress Component Test lie in the API style. Code coverage can be achieved with Cypress component tests, and the Pack.js Cypress Adapter can be used to avoid test duplication between the backend and frontend.

The first part of the talk will focus on a variety of patterns when using Cypress Component Testing and TDD to create React components. The code samples will be from Angular's Tour of Heroes to make the content relatable to a wider community. Currently I am working on a GitBook rewriting it in React using Cypress Component Tests, there should be plenty of content to distill into the talk.The second part of the talk will focus on test strategies, types of testing and where to apply them, and finally compare &amp; contrast them to the familiar industry approaches.We will finish with key takeaways, sample application repos to help with learning, and rollout strategies.

CCTDD: Cypress Component Test Driven Design

Murat K Ozcan

React Advanced

React Advanced Conference 2022

Siddharth discusses the design of good component APIs, focusing on intuitive, accessible, and consistent user interfaces. He demonstrates the creation of various components, such as the action menu, menu button, navigation list, and navigation group. Siddharth also addresses challenges like rendering on the server, setting default values, and optimizing component rendering. He emphasizes the acceptable use of code hacks within reasonable constraints and the importance of considering code readability. Additionally, he highlights the role of feedback from developers in shaping design systems.

When working on component library for a specific company, you want to make it easy as possible for developers to follow the recommended path quickly. Sometimes, that’s not easy. But, when there’s a way, there’s a will! Come see some hacks I have added to our codebase to enable a good API

Code Crimes For Good Component API

React Summit 2022

Let's start with the workshop, importing content into a new project, working on the content, and spending most of the time in code. We'll discuss the content model and component limitations, generating TypeScript models, fetching content, and adjusting components. We'll also cover creating slug pages, implementing getStaticPaths, rendering landing pages, and resolving content items as React components. Additionally, we'll address the implementation of the nav component and deployment pipelines for tracking content model changes.

In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production

Crash Course into TypeScript for content from headless CMS

Ondrej Polesny

The Workshop covered various topics related to AG Grid and React. It included installing dependencies, pulling data from remote sources, adding sorting and filtering capabilities, exploring grid properties and events, using Aggrid Enterprise for advanced functionality, and creating custom renderers and filters. The Workshop also discussed TypeScript support, server-side row model, and applying filters. Overall, the Workshop provided a comprehensive overview of AG Grid and React integration with a focus on practical usage and customization.

Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components

Hands-on with AG Grid's React Data Grid

Sean Landsman

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Thomas Findlay

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

In this talk, the speaker discusses the creation of a component library that prioritizes accessibility and privacy. They highlight the importance of building applications that cater to users' devices and network limitations. The speaker shares their experience of solving performance issues with a YouTube iframe and introduces Light YouTube, a performance-focused web component. They emphasize the need to prioritize accessibility and privacy in applications and provide insights on how to address common problems. The talk concludes with a call to prioritize accessibility and create sensible defaults in libraries to improve user experiences.

In React, Lifting State Up is a core concept. The aim of this talk is address two very important concerns in our landscape: privacy and accessibility and how we can achieve it and built in right from the components. This talk will show my work with a little open source component ad its evolution to address privacy and accessibility with the help of community and how we as developers need to care and ship the best for our people using our tools down to the most simple component.

Lifting Privacy and Accessibility Up

Ibrahim Cesar Bevilacqua

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.

How to achieve layout composition in React

Travis Waith-Mair

This Talk explores the impact of UI testing on applications and the web, highlighting the need for comprehensive testing strategies. It discusses the complexities of the UI multiverse and the challenges in managing UI states. The suitability of different testing strategies across the testing continuum is examined, along with the importance of addressing the weight of UI testing challenges. The role of tools like Storybook and Chromatic in automated testing and collaboration is emphasized. Ultimately, the Talk emphasizes the love for the web and the need for strategies to manage the UI multiverse.

Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component is a multitude of challenges. How do you actually manage it? Disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development is a multiverse where dimensions like time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, document our work and tame the multiverse of our components.

Tame the Component Multiverse

Michael Chan

Today's Talk introduces AG Grid's new React rendering engine, highlighting its features and benefits. The difference between AG Grid and React table is explained, emphasizing AG Grid's powerful UI and enterprise capabilities. The integration of AG Grid and React is discussed, showcasing how React is used throughout the grid and its customizations.

AG Grid is the industry standard JavaScript datagrid for building data centric Business Applications. Recently the AG Grid team redesigned the grid to implement the React Rendering Engine in 100% React code. Given the complexity of a datagrid, this was a very challenging task. Hear from Niall, the founder of AG Grid, about the journey of this migration including how this was achieved, lessons learned along the way, and how it will impact your React applications using AG Grid.

AG Grid's New React Rendering Engine

Niall Crosby

React Advanced Conference 2021

React was built for component-driven development. Challenges of component sharing include the inability to easily share components across applications. Monorepos have benefits but can also present challenges such as slow IDE performance and merge conflicts. Onboarding developers and the deployment process can be time-consuming. Bit solves these challenges by allowing isolated and versioned components in a monorepo, providing easy component search, filtering, and versioning, and enabling component-driven development.

Let's face it React is a way of building component driven applications. So technically we are all doing component driven development. But are we. Are our components really isolated, composed and tested in isolation or are they still coupled together just a little bit!! Let's take a look at how you can really be component driven so you can build, scale and reuse React components across all your React applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Taking Component Driven One Step Further

Debbie O'Brien

Today's Talk discusses expensive React components and API design, with a focus on the cost of coordination and overcoming imposter syndrome. The speaker shares a story about a cat trying to fix salted coffee, highlighting the importance of finding simple solutions. The billion dollar component on ReactJS.org is examined as an example of an expensive component. Techniques for customizing messages, improving accessibility, and using polymorphic props are discussed. The Talk concludes by emphasizing the cost of communication and the need to evaluate if props and components are the right tools for the job.

We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Worlds Most Expensive React Component and How to Stop Writing It

This Talk explores the evolution of React components, starting from version .12. It discusses the introduction of class components and the deprecation of mixins. It highlights the emergence of higher-order components as a better option for code reuse. It also covers the introduction of hooks in React 16.8 and mentions potential future branches of evolution, such as server components and function components in hooks.

This talk looks at how components in React have evolved. We'll look back at previous versions of React, the headlining features, and how milestones like Fiber and Concurrent changed how we wrote React components. Some more details: I want to give attendees a glimpse of how React components looked at different major points in the history of React. Components written in 2013 don't look like components written in 2015 or today. This is a history of React that for some will be a walk down memory lane and for others, completely new information. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

On the Origin of React

Jenn Creighton

This Talk discusses modular architectures, patterns, and components in software development. It explores the concept of creating components and pattern libraries, as well as the challenges and benefits they present. The Talk also delves into managing code for flexible pattern usage and the responsibility of modules. It addresses issues such as class name injection, specialized patterns, and modifying components. Additionally, it emphasizes the importance of communication and collaboration with designers, testing UI complexity, and organizational responsibility for UI.

Everyone has a pattern library or dreams about having one. We went through conversations and the codification of our visual dictionary and then we ended up with a beautiful living document.But what happens when we need to re-use our components and they don’t fit in the design? How do we re-use our patterns in slightly different use cases?We have all the tech to make a front end really modular, we have techniques and methodologies which enabled us avoiding the bad parts of the languages we use. Every part of the puzzle seems to be falling in the right place.Yet, sometimes we are struggling in handling the variations of our patterns in a reliable and maintainable way. Our codebase is getting filled with exceptions and overrides and refactoring of base patterns becomes impossible.Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and re-discuss the way we approach componentisation. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Components, Patterns and sh*t it’s Hard to Deal with

Marco Cedaro

React Finland

React Finland 2021

I'll present a practical approach to styling react components, a folder structure and documentation structure that's very easy to follow (for onboarding members) + other insights I got while using this approach. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to structure, style and document your components for maximum effectiveness

Dragos Bilaniuc

The final stage of a react component is when it is being published and distributed. How can I ensure my packages won’t crash in production? This talk will help you to test your React components publishing them to a private registry and running End-to-End tests against them. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Testing the integrity of your React components by publishing in a private registry

Juan Picado

Headless CMSs are great for developers, but not for content creators. React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Bricks: a CMS with visual editing based on React components

Matteo Frana

React Summit 2020

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.

A comparative analysis between four methods of styling React components from inline styling to Styled-Components. This talk is best suited to beginner developers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Components and How To Style Them

Jemima Abu

React Summit Remote Edition

React Summit Remote Edition 2021

Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.

Are dev blogs dying out? No, they're not! Blogs are making a comeback. But sadly, most of them are lacking personal style. So, what can developers do to make their blogs unique and prettier? In this talk, I’ll show you how SVGs (as React Components) can help you take your blog from dull to awesome. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

SVGs to Make Your Blog Stand Out

Elizabet Oliveira

Slice Machine is a development workflow that allows for the creation of reusable sections of a website. The Talk covers the process of adding a map slice to an existing Next.js website and building the component. It also discusses styling the map slice, publishing changes, and triggering a rebuild. The summary highlights the key points of the Talk in a concise manner.

React helped popularize the use of components to develop websites and apps. It’s a fantastic philosophy, but while components have made our websites better, the workflow for creating components hasn’t improved much. Let’s get rid of the tedious parts like wiring your components to your CMS, and let developers focus on the important parts. With Prismic Slice Machine, we’re giving developers the best workflow for creating components. In only a few minutes we’ll create a React component, wire it to our CMS, add it to Storybook, and push the component live on our site! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#react components