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: 16:00-19:00 CET. 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: 16:00-19:00 CET. 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: 16:00-20:00 CET. 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: November 22, 18:00-21:00 CET. 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: December 7. Time: 16:00-20:00 CET. Remote.

Building GraphQL Backends with SDL

In this workshop we'll cover the basics of GraphQL, and then use that knowledge to build a backend using SDL. Once we've created our schema, we'll run it locally, deploy to production, and create deployment branches for any changes to our schema. We'll finish the workshop by fetching data from our backend from the frontend, as well as adding authentication to lock down data access!

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 12. Time: 16:00-19:00 CET. 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

Date - December 7. Time: 16:00-20:00 CET. Remote.

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.

Build Your Own (Simple) React From Scratch! (from Babbel team)

Have you ever wondered how React works?

What would it feel like to create the magical lines that make up the tool we all grew to learn and love?

Come along on our journey to implement React from scratch, making a simple React project work with your own my-react.js library.

What's included

  1. Introduction
  2. Rendering our first component
  3. Update cycle and the VDOM
  4. Meet the hooks

Prerequisites

Some knowledge of React.

Schedule & location

Date & time: November 28, 16:00-19:00 CET. Remote.

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete (from Shopify team)

Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?

In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.

What's included

  1. Why CodeMirror and how to choose a library
  2. Basic setup for CodeMirror
  3. Adding out of the box themes and custom ones
  4. Adding your own linting
  5. Adding general autocomplete
  6. Adding more complex autocomplete
  7. Adding completely custom autocomplete

Prerequisites

Some knowledge of React, a React environment of your own or a React environment on https://stackblitz.com/

Schedule & location

Date & time: November 30, 18:00-21:00 CET. Remote.

Crash Course into the Jamstack with Next.js & Storyblok (from Storyblok team)

You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!

  • In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.
  • How Next.js serves content, and how content is served with Static Site Generation (SSG).
  • Atomic design methodology, and how this is applied to the content management system.
  • Hands-on project experience by building a Jamstack project with Next.js and Storyblok.

What's included

  1. Introduction and overview of the workshop
  2. Introduction to Jamstack
  3. Introduction to Atomic Design
  4. Overview of Headless CMS
  5. Introduction to Storyblok
  6. Next.js app creation
  7. Storyblok space creation
  8. Next.js and Storyblok connection
  9. Custom components creation
  10. First-page creation
  11. Introduction to Visual Editor
  12. Dynamic pages addition
  13. Blog section creation
  14. Deployment on Vercel

Prerequisites

Schedule & location

Date & time: November 28, 11:00-14:00 CET. Remote.

Innovate with React (from Torii team)

In this workshop, you will learn how to create a Custom Component System from scratch in React, and take it to the next level.

You will learn best practices when building a Component System, as well as the tools that you can use to be a more effective collaborator with other cross-functional teams.

What's included

  1. Introduction
  2. Learn the fundamentals of a Component System
  3. Setting up the development environment
  4. Importing fonts
  5. Choosing a base React Component Library
  6. Writing our first components
  7. Setting up a centralized theme
  8. Writing custom styles to inject to our components
  9. Injecting icons to our components
  10. Adding hooks
  11. Making components responsive
  12. Adding dark mode
  13. Deploying your Component System
  14. Exporting your Component System to a design tool
  15. Prototyping with your production components

Schedule & location

Date & time: November 29, 15:00-18:00 CET. Remote.

Next.js 13: data fetching strategies (from Vercel team)

The workshop from the Vercel team.

What's included

  1. Introduction
  2. Prerequisites for the workshop
  3. Fetching strategies: fundamentals
  4. Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)
  5. Test your build and serve it on Vercel
  6. Future: Server components VS Client components
  7. Workshop easter egg (unrelated to the topic, calling out accessibility)
  8. Wrapping up

Schedule & location

Date & time: December 12, 15:00-16: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

Jean Duthon
Babbel, Germany

Jean grew up in France, where he studied computer science and got his master’s degree from the Université de Technology de Compiègne, where he grew fond of web technologies. He moved to Berlin in 2016 and started working with vanilla JavaScript, jQuery, and Angular1 until he discovered React and thought, “Wow, this is how web apps should be built.”

Those days he worked mainly with React at Babbel (the best learning language app! 😜)and loves creating enticing user experiences on the web, he has a soft spot for animations and delightful interactivity.

In his free time, he loves to cook, make cocktails (ask for advice at your own risk), and play escape/board games.

Sean Blundell
Babbel, UK

5+ years experience building React/ React Native applications. Currently a Front End Engineer part of the team responsible for Babbel's lesson trainers and interactions. Cofounder of the charity Little World.

Hussien Khayoon
Shopify, Canada

Hussien is a Staff Developer at Shopify. He has over 10 year of Fullstack experience with a particular soft spot for React. He also mentors for a coding bootcamp and loves helping beginners break into tech.

Kahvi Patel
Shopify, Canada

Victoria based developer, loves rock climbing and running and playing piano.

Arisa Fukuzaki
Storyblok, Germany

Arisa is a Frontend Developer who became a DevRel Engineer. She works at Storyblok to share and improve better DX through talks, maintaining SDKs, and tutorials. Her mission is to learn, speak, connect and help. In her private time, she is a GDE, an Aikido fighter, a GirlCode ambassador, and a longboarder.

Chakit Arora
Storyblok, India

Chakit is a Full Stack Developer based in India, he is passionate about the web and likes to be involved in the community.

He is a Twitter space host, who likes to talk and write about technology. He is always excited to try out new technologies and frameworks.

He works as a Developer Relations Engineer at Storyblok.

Torii
Cristobal Chao
Torii, USA

Cristobal Chao is a software engineer, UX specialist and founder of Torii Studio, a studio that helps small to large companies implement front-end processes and systems that are easier to scale efficiently while building beautiful UI/UX products. Prior to forming Torii Studio, Mr. Chao worked as a Software Engineer in companies like Google and Oracle. Also, he worked as the first software engineer for Hattery Labs, a front-end consultancy acquired by Google in 2013. At Google, he worked as part of the Material Design team building the first two versions of Material Design, as well as evangelizing the systems across Google Search, Maps and Google for Work.

Alice De Mauro
Vercel, Netherlands

Software Engineer for more than 15 years, UX designer and programming languages instructor, I've worked in many types of product, from commodities to retail, from media to eSports. At Vercel, I help pre-sales to architect the best technical solution for our future customers.