LEARN FROM THE BEST TRAINERS IN THE CLOUD

3 HOUR WORKSHOPS AT REACT SUMMIT

These workshops are included in Full Ticket (both in-person & remote).

All Full Ticket holders will get an email with a registration link for the workshops, as soon as the full workshops line up is published.

These workshops will be run remotely via Zoom.

Workshops are targeted both at React newbies and hardcore fans. Take full advantage of your remote conference experience and get training from our best speakers and trainers.

The recordings of most workshops will be shared with full ticket holders after the conference.

Kent C. Dodds

Remix Fundamentals (Remote)

Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems

Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?

Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?

At the end of this workshop, you'll know how to:

Create Remix Routes

Style Remix applications

Load data in Remix loaders

Mutate data with forms and actions

Workshop schedule & location

June 22, 17:00-20:00 CEST. Remote via Zoom.

Rahat Chowdhury

How to Build UI's for Smart Contracts (Remote)

There are many journeys we can take into becoming a web3 developer. Not all journeys require learning a completely new language and becoming a smart contract developer. In this workshop we will learn how to build our own React UI on top of any existing smart contracts on the Polygon Proof of Stake Blockchain. We will explore a basic overview of blockchains and learn about the advantages of building on Polygon. We will also gain an understanding of what Smart Contracts are, learn how to find existing ones, and learn tools that help us interact with them from a React application.

Table of contents
  • - Introduction to blockchains and how they work
  • - How to set up a Wallet
  • - Test networks and add test Matic Tokens
  • - How to analyze a smart contract on Polygonscan
  • - Setting up our application and connecting to our wallet
  • - How to fetch data from the Blockchain
  • - How to conduct transactions on the Blockchain
  • - Challenges and Improvements
Prerequisites

Audience should have a good understanding of React hooks.

Workshop schedule & location

June 27, 18:00-21:00 CEST. Remote via Zoom.

Sandrina Pereira

Web Accessibility in JavaScript Apps (Remote)

Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!

In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!

Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!

By the end, you will:

  • Understand WCAG principles and how they're organized
  • Know when to use accessibility audit tools
  • Quickly identify common accessibility issues
  • Integrate accessibility into your team workflow right away
  • Realize that creating accessible websites isn’t as hard as it sounds ;)
Table of contents
  • - WCAG, A11Y myths and ableism
  • - Semantics and interactive elements
  • - Appearance and motion
  • - ARIA and Screen Readers
  • - Audit tools
Workshop level

Familiar with basics of React, HTML and CSS. For those who want to learn how to get the fundamentals of accessibility covered in their websites.

Workshop schedule & location

June 28, 17:00-20:00 CEST. Remote via Zoom.

Pawel Sawicki

GraphQL - From Zero to Hero in 3 hours

How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.

All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.

In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.

If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.

Table of contents
  • - Custom React Hooks
  • - Apollo Client
  • - TypeScript (advanced)
  • - Dependency Injection with ...
  • - React Context API
  • - NestJs
  • - Apollo Server
  • - TypeORM
  • - Postgres
Workshop schedule & location

June 30, 18:00-21:00 CEST. Remote via Zoom.

Sean Landsman

Hands-on with AG Grid's React Data Grid (from AG Grid team, remote)

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.

Table of contents
  • - 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
Prerequisites

Node 14+

Workshop schedule & location

June 1, 16:00-19:00 CEST. Remote via Zoom.

Abdelrhman Adel

Build a knowledge base with Gatsby, Contentful and AWS (from Rangle team, remote)

In this workshop, we will go over how to build a knowledge base using Gatsby, a static site generator Framework that uses React and graphQL, Contentful, a Headless CMS to drive the content and deploy it to AWS S3.

Table of contents
  • - Intro into static site generators
  • - Get started with Gatsby
  • - Use contentful as the backend content source
  • - Deploy it to AWS s3 and setup the CI web-hooks
Prerequisites

  • Hands on experience with Modern Javascript
  • Basic knowledge of React
  • A free contentful account

Workshop schedule & location

June 8, 16:00-19:00 CEST. Remote via Zoom.

Michele Riva

High-performance Next.js

Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

Table of contents
  • - A brief introduction to Next.js
  • - Different rendering strategies and use cases
  • - How to analyze Next.js performances
  • - Stress testing Next.js
  • - Caching mechanisms
  • - Next.js architectural strategies to improve and maintain high performances
Prerequisites

  • Node.js 14.X / 16.X
  • Basic Next.js knowledge
  • Clinic.js installed (https://clinicjs.org)
  • Docker installed

Workshop level

Advanced

Workshop schedule & location

June 29, 17:00-20:00 CEST. Remote via Zoom.

Brandon Ward

JS Security Testing in GitHub Actions (from StackHawk team, remote)

This workshop will focus on automating software composition analysis, static application security testing and dynamic application security testing using GitHub Actions. After a brief introduction covering the different types of application security and the importance of finding security vulnerabilities before they hit production, we'll dive into a hands-on session where users will add three different security testing tool to their build pipelines.

Workshop schedule & location

June 1, 19:00-21:00 CEST. Remote via Zoom.

Ondrej Polesny

Crash Course into TypeScript for content from headless CMS (from Kontent by Kentico team, remote)

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
Workshop level

Beginner with basic React/TypeScript knowledge.

Workshop schedule & location

June 2, 16:00-18:00 CEST. Remote via Zoom.

Shain Dholakiya

Build Web3 apps with React (from Decentology team, Remote)

The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”

Learn more about the Hyperverse here.

We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.

Workshop schedule & location

June 2, 18:00-21:00 CEST. Remote via Zoom.

Kellen Mace

Build a Headless WordPress App with Next.js and WPGraphQL (from WP Engine team, remote)

In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

Table of contents
  • - Welcome and introduction
  • - When to consider a headless WordPress architecture
  • - Tour of the finished app we will build
  • - Turn a WordPress site into a GraphQL server with the WPGraphQL plugin
  • - Clone app repo and get set up for local development
  • - Configure Apollo Client to point to WordPress’ GraphQL endpoint
  • - Compose a GraphQL query using the GraphiQL IDE
  • - Implement blog index page
  • - Implement single blog post page
  • - Implement single category page
  • - Implement search page
  • - Leverage GraphQL Fragments
Prerequisites

Basic familiarity with JavaScript and React.

Workshop schedule & location

June 3, 16:00-19:00 CEST. Remote via Zoom.

Mike Hartington

Bringing your React Web App to native with Capacitor (from Ionic team, remote)

So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!

This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:

  • What is Capacitor
  • How does it compare to other cross-platform solutions
  • Using Capacitor to build a native application using your existing web code
  • Tidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.
Workshop schedule & location

June 7, 18:00-21:00 CEST. Remote via zoom.

Shane Ketterman

How To Design A Sustainable Freelance/Contracting Career + Speedcoding Challenge (from Toptal team, remote)

Ready to kickstart your freelance career or just getting started on your freelance journey? You’re in the right spot. Learn from the world’s largest fully distributed workforce in the world.

The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.

This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.

At the end of the workshop there will be a Q&A session with a Freelance Developer who can answer your questions and provide insights and tips into their own success.

During the Workshop break, we will be running a speed-coding challenge! At the end of the workshop, we will award a prize for the winner and display the leaderboard.

We will have you login to our portal and complete the challenge as fast as you can to earn points. Points are assigned based on difficulty and the speed at which you solve the tasks. In case you complete all tasks, you get extra points for the remaining time. You’ll see your score, ranking, and the leaderboard once you complete the challenge.

We will be giving away three Amazon Gift Cards ($200, $100, $75) for the top three winners.

Workshop schedule & location

June 7, 16:00-18:00 CEST. Remote via Zoom.

Yevheniia Hlovatska

Detox 101: How to write stable end-to-end tests for your React Native application (from Wix team, remote)

Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.

Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.

Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.

Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.

Table of contents
  • - Learn what gray-box testing is
  • - Setup Detox for a React Native App
  • - Write several end-to-end tests using Detox API
  • - Run our tests
  • - Learn how to prevent flakiness in your tests using Detox
Prerequisites

  • iOS/Android: MacOS Catalina or newer
  • Android only: Linux
  • Installations (follow Step 1 fully including Android and iOS setup)

Workshop level

Beginner/Intermediate with TS knowledge and basic experience in React Native.

Workshop schedule & location

June 9, 16:00-19:00 CEST. Remote via Zoom.

Isaac Mann, Zack DeRose

React at Scale with Nx (from Nrwl team, remote)

The larger a codebase grows, the more difficult it becomes to maintain. All the informal processes of a small team need to be systematized and supported with tooling as the team grows. Come learn how Nx allows developers to focus their attention more on application code and less on tooling.

We’ll build up a monorepo from scratch, creating a client app and server app that share an API type library. We’ll learn how Nx uses executors and generators to make the developer experience more consistent across projects. We’ll then make our own executors and generators for processes that are unique to our organization. We’ll also explore the growing ecosystem of plugins that allow for the smooth integration of frameworks and libraries.

Workshop schedule & location

June 14, 18:00-21:00 CEST. Remote via Zoom.

Abe Haskins, Megan Majewski

Building custom storefronts on Shopify with Hydrogen (from Shopify team, remote)

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Workshop schedule & location

June 9, 19:00-20:30 CEST. Remote via Zoom.

Jennifer Gray, Megan Majewski

Building a Shopify app w React & Node.js (from Shopify team, remote)

Building an app can be tough work but Shopify has created a set of tools and resources to help you build a seamless app experience within the React & Express ecosystem. Get hands-on experience building a Shopify app using the Shopify App CLI, the Shopify App Bridge library, and our design system, Polaris. We’ll show you how to create an app that accesses information from a Shopify store and can run in your local environment. We’ll walk you through how to:

  • Create a Shopify app using the Shopify App CLI
  • Build a user interface with Polaris React components
  • Integrate your app with Shopify using Shopify App Bridge components
Workshop schedule & location

June 6, 19:00-20:30 CEST. Remote via Zoom.

Pedro Galan

React at scale with Vodafone

Join our Vodafone Engineering teams from around the world to see how we apply React technology at scale and with complimentary frameworks.

This session will cover both Web and Mobile application:

Our MyVodafone app provides a primary digital touchpoint for our customers across all of our markets. Our ambition is to grow the relevance of the app for our customers, aligning to other channels and establishing a common platform for markets to experiment and contribute through innersource working practices. Starting from a diverse landscape, hear why we have chosen to use React Native to aide our transition and establish a foundation that offers choice for any market regardless of their app implementation. Understand some of the challenges we faced and how we overcame these.

For Web application, our ambition is to set the proper foundations and enablers to boost cocreation and reuse among all markets looking for efficiency, quality and a best in class user experience. Our main pillars are our web manifesto and our development community.

In the workshop speakers will cover:

  • 1 A quick overview of Vodafone

  • 2 Focus on our My Vodafone App:

  • 2.1 Overview & Why React

  • 2.2 Setting the foundation

  • 2.3 Bridging as a cornerstone

  • 2.4 Migrating from Native to React Native in Vodafone Ireland

  • 2.5 Driving re-use beyond the My Vodafone App

  • 3 Focus on web application:

  • 3.1 Overview

  • 3.2 Technical Challenges & Why React

  • 3.3 Technical Building Blocks

  • 3.4 React in real live

  • 3.5 Marketplace in Vodafone Turkey

  • 3.6 SME Portal in Vodafone Spain

  • 3.7 New Web Architecture in Vodafone Italy

  • 3.8 Retail 10 in Vodafone Digital Channels

  • 3.9 Source web

  • 3.10 Marketing pages on headless CMS in Vodafone UK

Pedro Galán, Andrew Ferguson + their teams will talk through the detail.

Workshop schedule & location

June 6, 16:00-19:00 CEST. Remote via Zoom.

Hidde de Vries

How to create editor experiences your team will love

React is renowned for its developer experience. What if you could use it to improve the experience of editors and content creators too? In this workshop, you’ll learn how to use Sanity.io for structured content modeling. Find out how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. This workshop is intended for web developers who want to deliver better content experiences for their content teams and clients.

Prerequisites

Basic knowledge of React.

Workshop level

All.

Workshop schedule & location

Date & time: TBC. Remote via Zoom.

Trainers

Kent C. Dodds
Remix Workshops
Full Info
Kent C. Dodds
Remix, USA

Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and React.

Rahat Chowdhury
Polygon, USA

Rahat is a hip hop artist turned web developer, indie hacker, and web3 enthusiast. Rahat's passions include advocating for mental health in tech, music, gaming, and mentoring new developers especially in the web3 space.

Sandrina Pereira
a11y workshop
Full Info
Sandrina Pereira
Remote, Portugal

Sandrina is a Frontend Engineer who helps turn ideas into accessible experiences. Within the React ecosystem, she’s been shrinking the gap between Engineering and Product design. Currently she’s doing that at Remote as a Team Leader. Along the journey, she’s has been raising awareness of why Web Accessibility is part of our duties as web creators.

Pawel Sawicki
Workshops.de, Germany

Pawel Sawicki is a freelance consultant and lecturer with a focus on distributed systems, and related areas such as software security and software architecture, especially in the context of mobile applications. On this way he discovered React and React Native several years ago and used them in a variety of professional projects for leading German companies, from small startups to large corporations. Pawel always strives to share the practical knowledge he has acquired in a didactically valuable way for the benefit of his clients and students.

Sean Landsman
Sean Landsman
AG Grid, UK
Abdelrhman Adel
Rangle, Netherlands

Abdelrhman Adel is an Amsterdam-based Solution Architect at Rangle.io, helping clients build better software experiences using technologies such as Angular, React, and Typescript. Once a Petroleum Engineer, he switched career paths to follow his passion for technology and improving user experiences. When he’s not working, you can find him gaming or binge-watching a new TV series.

Michele Riva
Next.js
Full Info
Michele Riva
NearForm, Italy

I'm a passionate and experienced software architect from Milan, Italy. I've been working as a software engineer and architect for almost ten years in product and consultancy companies, taking the best from both worlds. I'm currently working as a Senior Software Architect in NearForm while contributing to many open-source projects in different languages (TypeScript, Haskell, Golang), writing books and technical articles.

Brandon Ward
StackHawk, USA

Brandon is a full stack engineer who finds enjoyment working with Kotlin. When not working, he frequently gets outside to snowboard or mountain bike. He also enjoys tinkering with smart home technology.

Ondrej Polesny
Kontent by Kentico, Czech Republic

Ondrej is a Jamstack enthusiast focused mostly on React and Vue-based tools. As a Developer Evangelist at Kontent by Kentico, he constantly stays connected with in-house and partner developers, which brings him closer to many interesting digital projects built with various tools. Always interested in problems that everyone claims have no solution, Ondrej enjoys building the architecture of components or applications and figuring out how all parts fit together. He also creates videos and speaks at conferences and podcasts.

Shain Dholakiya
Decentology, USA

Shain is a Developer Advocate at Decentology, where he teaches about topics in Web3 and how to build in Web3. He previously worked at NASA, The Boring Company, Microsoft, and Amazon, focusing mainly on web and mobile development. Shain spends most of his time building side projects, engaging with the Web3 community, playing poker, and working out!

Kellen Mace
WP Engine, USA

Kellen Mace works on the Developer Relations team at WP Engine. He and his team produce content on how to build modern JavaScript apps powered by headless WordPress backends at developers.wpengine.com. He is a contributor to WPGraphQL and the creator of the WPGraphQL for Gravity Forms plugin. He has been building and launching production headless WordPress applications for a number of years, and loves teaching others how to do the same.

Mike Hartington
Ionic, USA

Mike Hartington is a developer working at Ionic. As a speaker, Mike aims to help developers through empowerment and education. He will also try to talk your ear off about music, guitar, and making furniture.

Shane Ketterman
Shane Ketterman
Toptal, USA
Yevheniia Hlovatska
Wix, Ukraine 🇺🇦

Yevheniia is from Ukraine, she is a QA Manager at Wixm an Authorized ICAgile Instructor in Agile Testing and automated testing courses author. Her main focus is on building the test automation strategy and best practices for web and mobile applications testing at Wix. She believes in balanced test automation as a tool to support the development velocity, shares her knowledge at conferences and workshops and promotes collaboration between developers and QAs around test automation.

Isaac Mann
Isaac Mann
Nx, USA
Zack DeRose
Nx, USA

Senior Engineer at Nx

Abe Haskins
Shopify, USA

Abe is a Developer Advocate at Shopify focused on bringing the next generation of ecommerce to developers. Previously he spent 9 years working at Google on Firebase/Cloud where he focused on JavaScript/Typescript.

Megan Majewski
USA, Shopify

Megan is a Developer Advocate at Shopify, focusing on our and Apps and Hydrogen. She is new to Shopify, but brings over 6 years of experience building software; anything from NLP to iOS AR apps she’s tried it. Now she’s found a home in the JS web app space.

Jennifer Gray
Shopify, Canada

Jennifer is a front end developer on the Docs and API Libraries team at Shopify where our goal is to make it easier for developers to build on Shopify’s platform by creating and curating technical resources. Jennifer has spent the last two years working on shopify.dev, Shopify’s home for developer documentation.

Pedro Galan
Vodafone, Spain

Digital Engineering Manager for Web, CMS and Vodafone Business in Vodafone Spain.

More than 20 years working in systems departments and software engineering for Telco companies, I joined Vodafone in 2017 as a Technical Lead for My Vodafone app.

Since 2019 I’m the manager responsible for web development and CMS in Vodafone Spain having the purpose of boosting our developers community and ways of working looking for efficiency, quality, reuse, high performance and an excellent user experience. I’m also part of our Global Web Chapter in Vodafone Group where we work in common initiatives to leverage our digital assets on a global scale.

Hidde de Vries
Sanity, Netherlands

Hidde is a web developer from Rotterdam, The Netherlands. He is excited about web standards, HTML, CSS, JavaScript, and accessibility. Hidde writes about these things and more on hidde.blog.