Practical

hands-on

courses

Free Workshops

These workshops are included in Full Ticket.

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.

Workshop

Building for Web & Mobile with Expo

We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.

In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!

What's included

  1. Setting up drawer and stack navigators with React Navigation, including responsiveness
  2. Configuring React Navigation with URLs
  3. Setting up React Native Paper including styling the React Navigation drawer and headers
  4. Setting up a custom color theme that supports dark mode
  5. Configuring favicons/app icons and metadata
  6. What to do when you can’t or don’t want to provide the same functionality on web and mobile

Prerequisites

  • Familiarity with building applications with either React or React Native. You do not need to know both.
  • Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/

Schedule & location

Date: December 6. Time: TBD. Remote.

Designing Effective Tests with React Testing Library

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?

In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests. Table of contents

  • The different kinds of React application tests, and where component tests fit in
  • A mental model for thinking about the inputs and outputs of the components you test
  • Options for selecting DOM elements to verify and interact with them
  • The value of mocks and why they shouldn’t be avoided
  • The challenges with asynchrony in RTL tests and how to handle them

Prerequisites

  • Familiarity with building applications with React
  • Basic experience writing automated tests with Jest or another unit testing framework
  • You do not need any experience with React Testing Library
  • Machine setup: Node LTS, Yarn

Schedule & location

Date: December 7. Time: TBD. Remote.

Best Practices and Advanced TypeScript Tips for React Developers

Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.

In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

Schedule & location

Date: December 9. Time: TBD. Remote.

End-To-End Type Safety with React, GraphQL & Prisma (from Prisma team)

In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.

What's included

  1. Welcome & kickoff
  2. Set up Prisma (lesson 1)
  3. Set up a GraphQL server (lesson 2)
  4. Build the GraphQL schema (lesson 3)
  5. GraphQL on the client (lesson 4)
  6. Bridge the gap (lesson 5)
  7. Wrap up

Prerequisites

  • Node.js installed on your machine (12.2.X / 14.X)
  • It is recommended (but not required) to use VS Code for the practical tasks
  • An IDE installed (VSCode recommended)
  • (Good to have)*A basic understanding of Node.js, React, and TypeScript

Schedule & location

Date & time: TBD. Remote.

GraphQL for React Developers

There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.

Contents:

  • Getting started with GraphQL
  • GraphQL Queries
  • Mutating Data
  • GraphQL in React
  • Using a GraphQL Client

Schedule & location

Date & time: TBD. Remote.

Build a Modern GraphQL Server Using GraphQL Yoga

In this workshop we’ll build a GraphQL Yoga server from scratch, as well as cover how you can use Yoga inside of frontend applications like Next.js. We’ll also look through the plugin ecosystem of Envelop, and what can be added to Yoga to fully customize it to your needs.

Prerequisites

Mac setup with Node, and NPM (if you wish to follow along locally). Otherwise an account with CodeSandbox would do.

Schedule & location

Date: December 8. Time: TBD. Remote.

GraphQL for React Developers

There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.

What's included

  1. Getting started with GraphQL
  2. GraphQL Queries
  3. Mutating Data
  4. GraphQL in React
  5. Using a GraphQL Client

Schedule & location

December 7, 2022, Remote, Time- TBC.

What the Heck Do "Declarative" and "Reactive" Actually Mean?

You’ve built apps with frontend frameworks before? - Then you surely came across the terms ""declarative"" and “reactive”. Since React got released in 2013, most modern UI frameworks or libraries want to be it, but what do these terms actually mean? And what’s the difference between “declarative” and “imperative” code?

It took me a long time to grasp these concepts - but when I finally did, I saw frontend frameworks in a totally new light! And I hope you will feel the same after this talk.

In this very interactive workshop, we’ll delve into a lot of code examples to deeply understand the terms - with examples using vanilla JavaScript, React and Svelte. But the learnings will be universal. After this talk you’ll be able to confidently join discussions about the ""declarative"" and ""reactive"" nature of any new package or library.

Schedule & location

Date: December 12. Time: 16-19:00 CET. Remote.

Trainers

Josh Justice
React trainer, USA

Josh Justice has worked as a developer since 2004 across frontend, mobile, and backend platforms. As a consultant he collaborates with teams to help them deliver great apps by optimizing their tech stack and development practices. He also writes, speaks, and livestreams about React and React Native, testing, and software design.

Maurice de Beijer
Independent Software Consultant and Trainer, Netherlands

Maurice de Beijer is an independent software consultant and trainer. He specializes in JavaScript, React, and ASP.NET Core. His work includes a large, global, safety application for the oil and gas industry. Maurice is also active in the open source community. He teaches ECMAScript, TypeScript, React, RxJS and ASP.NET courses. Since 2005, he has received Microsoft’s Yearly Most Valuable Professional Award. Maurice is also active in the Dutch dotNed user group and helps organize its meetings.

Sabin Adams
Prisma, USA

I'm Sabin Adams, and I've been working in web development for about ten years now. I love solving problems and making tools that make developers' lives easier, and currently, I work as a developer advocate for Prisma. Teaching, speaking, and writing about web development is my passion!

Roy Derks
StepZen, The Netherlands

Roy Derks is a developer, author and public speaker from the Netherlands. His mission is to make the world a better place through tech by training and inspiring developers worldwide. Currently he is working with StepZen on a mission to make GraphQL adoption easy and scalable.

Jamie Barton
Grafbase, UK

GraphQL, React, Serverless, and Jamstack advocate. Mostly creating videos and content on this, and more.

Andre Kovac
Software Engineer and Data Scientist, Germany

Mobile and Web Engineer (React-Native/React) Data Science (Statistical Analysis and Machine Learning) Speaker and Trainer (Interactive Workshops, Science Communication, Talks) Teaching Chinese as André China Tiger on my YouTube channel