Workshops at React Summit

LEARN FROM THE BEST TRAINERS WORLDWIDE

  • 3
    Days
  • 10
    Trainers
  • 480
    Attendees
Workshops at React Summit Amsterdam

On April 14-16, 2020, to extend your conference experience, we'll host multiple workshops targeted both at the React newcomers and hardcore fans. Take the full advantage of your conference visit and get training from our best speakers and trainers.

All trainings start at 9:00 (with doors open 8:30) and continue until 17:00 and are hosted in individual location, different from the conference venue. Please address individual workshop description for location details and follow your registered mailbox for updates.

Kitze

React Advanced (April 14)

Full-day, hands-on coding workshop to explore advanced patterns and new features in React. React may be just a simple UI library, but it involves a pretty big ecosystem around it. Explaining the basics and internals is not enough, so in this module we're going to explain the best practices, we're going to learn to "think in React", and apply solutions to real problems that you might encounter in the process of building an app.

We'll explore all the advanced techniques for making flexible and maintainable React components. We'll see how using popular patterns like Higher Order Components, Compound Components, Render Props etc. can help us in simplifying things, making our components more reusable and our apps more declarative.

React 16 comes with some major changes and an update to the core algorithm. In this module, we'll explore some practical use-cases for Hooks, Portals, Fragments, Error Boundaries etc. We'll see how the new Context API can simplify state-management and we'll play with a new feature called react-call-return.

Prerequisites

Experience with modern JavaScript features and fundamental React concepts.

Workshop level

Intermediate/Advanced JavaScript/React Developers.

Workshop schedule & location

April 14, 8:30 till 17:00. RAI

Kent C. Dodds

React Performance (April 14)

React is fast, until it isn't

In this workshop, you'll learn everything you need to diagnose, profile, and fix performance problems in your React application using the Browser Performance Profiler, React DevTools Profiler, and proven React optimization techniques.

The tools we have for profiling React Applications are extremely powerful, but they can often be really difficult to grok. Sure, starting a profiling session is simple enough, but how do you go from all the information in the flamegraph to actionable steps to improve your application's performance? And once you know what parts of your app are causing performance issues, what then? How do you optimize your React components without making the whole application a complex mess?

Oh, and don't forget that you should profile your app in production mode to make sure you get accurate measurements. Do you know how to do that?

Hi, I'm Kent C. Dodds and in my latest workshop I'll teach you the ins and outs of optimizing React applications. I will take you on a deep dive browser profiling tools, and show you what you need to know to start using them to make your applications fast right away.

Table of contents
  • - profile React components with the React DevTools profiler
  • - profile JavaScript with the Chrome DevTools profiler
  • - utilize built-in React features (like React.memo, useMemo, anduseCallback) to optimize React components
  • - know how to apply better patterns for application state management to optimize components by default
Prerequisites

Attend my Advanced React Hooks Workshop or have the equivalent experience with advanced React concepts.

Workshop level

Advanced JavaScript/React Developers.

Workshop schedule & location

April 14, 8:30 till 17:00. RAI

Vladimir Novick

Building WhatsApp in a Day with React Native (April 15)

In this full day workshop we will go through the process of creating Whatsapp app in React Native from scratch. We will talk about how to get started, structure our app and create proper navigation workflow, style our screens and create compelling animations. But we will not stop there. Not only React Native is changing mobile ecosystem nowadays, GraphQL is also an important part of how we connect to our backend.

We will go through GraphQL basics and use it in our Whatsapp app to connect to GraphQL endpoint which we will also define and create during workshop by using free and open source Hasura GraphQL engine. Workshop will give you the ultimate experience of creating React Native app from scratch with GraphQL API.

Prerequisites

Configured and running React Native Hello World application.

Workshop level

Intermediate JavaScript/React developers, beginner React Native.

Workshop schedule & location

April 15, 8:30 till 17:00. RAI

Kent C. Dodds

Testing React Applications (April 15)

Use jest, jest-dom, and React Testing Library to write unit and integration tests for React Components Writing React applications is pretty easy, but shipping those applications with confidence is an entirely different story. How do you know that your changes work? How do you know those changes aren’t going to break other parts of your application? Do you have to manually walk through your whole application to make certain everything’s still working? No thank you! The more your tests resemble the way your software is used, the more confidence they can give you. Let’s learn how to write tests that make us confident.

In this hands-on workshop we’ll work on adding tests to existing components as well as use our tests to speed up our workflow building new components. We’ll work with everything from simple components and JavaScript functions to complex components with asynchronous logic.

Table of contents
  • - Install jest-dom and React Testing Library and configure them to work well with Jest
  • - Test a simple component
  • - Test function logic with jest-in-case
  • - Test components that make HTTP requests
  • - Test a form
  • - Test driven development
  • - Write a custom render function for testing components that rely on context providers (like @reach/router and redux)
Prerequisites

Workshop level

Intermediate JavaScript/React developers.

Workshop schedule & location

April 15, 8:30 till 17:00. RAI

Siddharth Kshetrapal

Building your first Design System: from scratch to production (April 15)

This is a hands-on workshop for React developers in which you will learn how to define a common language for collaboration and iterate on products faster.

Learn the best practices of component driven design and how to standardize your design patterns. Leverage React to build design tokens and a component library that can be used in products and can evolve as teams use it. At the end of the day, you will have a small but complete Design system implementation that will cover the full product lifecycle.

Table of contents
  • - What are the moving pieces of a design system
  • - How to define a design system for your company
  • - Balancing flexibility and consistency across your components
  • - Design concepts
  • - Design concepts
  • - Collaboration
Prerequisites

Working knowledge of React would go a long way.

Workshop level

Intermediate/Advanced JavaScript/React developers.

Workshop schedule & location

April 15, 8:30 till 17:00. RAI

Sid Chatterjee, Aisha Black

Building Commercial Gatsby Websites with Gatsby Engineers (April 15)

You’ve probably seen hundreds of beautiful blogs made with Gatsby but have you considered it as a tool for building robust web applications? Specifically, Gatsby can be an excellent choice for e-commerce sites. In this hands-on workshop, you’ll learn to use it to build fast, secure, and delightful experiences for your customers (or your clients’ customers)! We’ll break the process of building an accessible, highly customizable e-commerce site into digestible steps. Throughout, we’ll follow two case studies, migrating a Shopify store selling physical goods and integrating ticket sales into a conference website. You may even walk away with a brand new side hustle.

Table of contents
  • - Setting up a basic Gatsby site
  • - Tour of important Gatsby files
  • - Gatsby server-side rendering APIs
  • - Building accessible single-page applications
  • - Stripe Payments API
  • - Processing recurring payments
  • - Managing customers
Prerequisites

  • Familiarity with React/JavaScript and ES2015 features
  • A Stripe account
  • Ideally, attendees will have a shop they’d like to migrate to Gatsby or products they would like to sell on a new site. A Gatsby starter and product data will be available for attendees who don’t have a project in mind!

Workshop level

Intermediate JavaScript/React developers, beginner Gatsby developers

Workshop schedule & location

April 15, 8:30 till 17:00. RAI

Max Stoiber

Modern React (April 15)

One of the most popular workshops from React Amsterdam 2019.

After some years of silence, React team had recently landed a number of new additions to it's library enabling application developers to optimize their code both for better performance and maintainability. Max will guide your through emerging patterns and show you by example how you can start applying the new best practices in your production apps.

Table of contents
  • - Using React Hooks
  • - Getting started Concurrent React (Suspense and Time Slicing, previously called "Async React")
  • - Why do React.lazy and React.memo exist?
  • - Utilising Compound Components
  • - Render Props
  • - Performance Profiling with the new React DevTools
  • - and more...
Prerequisites

To attend this workshop you need to be familiar with the basics of React, as well as most of the new features in ES2015.

Workshop level

Intermediate/advanced JavaScript/React developers.

Workshop schedule & location

April 15, 8:30 till 17:00. RAI

Kitze

GraphQL Workshop (April 15)

This one-day workshop will teach you everything you need to know to incorporate GraphQL into your application. During the first half of the workshop, we'll explain the basics of a GraphQL and we’re gonna build a GraphQL server, covering best practices for architecting your schema, error handling, authentication, and permission layers. In the second half of the workshop, we’ll connect our GraphQL server to a React application with Apollo Client. We’ll break down the modular architecture of the client and teach you how to set everything up and use queries and mutations. We’ll show a few different approaches for working with Apollo: Higher Order Components, Render Props, and hooks. Throughout the course of the workshop, you’ll learn practical tips for using GraphQL in production.

Table of contents
  • - Basics of GraphQL
  • - Set up a GraphQL backend
  • - Setup authentication and permissions layers to secure your GraphQL APIs
  • - Using GraphiQL to explore and test your GraphQL API
  • - Setting up a GraphQL client with Apollo
  • - Fetching and rendering data in your react app with GraphQL queries (using HOCs, render props, hooks)
  • - Inserting data with GraphQL mutations
  • - Updating and deleting data with GraphQL mutations
  • - Updating the store after a mutation
  • - Optimistic updates
Prerequisites

To attend this workshop you need to be familiar with the basics of React, as well as most of the new features in ES2015.

Workshop schedule & location

April 15, 8:30 till 17:00. RAI

Vladimir Novick

React Native Animations (April 16)

Everything in the world is animated and animating our apps is a key to make them look compelling, "telling a story" of your app as well as reducing cognitive load for your users. Animations can be as simple as bouncing buttons or complex like full screen transitions, gesture based animations and multi layered animations. Not only animations sometimes are not that straightforward to implement, they have to look "realistic" as well as to be performant.

In this workshop we will get from the very basics of creating compelling animations in React Native to complex gesture animations, custom transitions, purely native animations and so on. We will discuss performance bottlenecks and work around them to get 60FPS animations. This workshop is targeted towards developers already familiar with the basics of React Native and want to level up their knowledge understanding all the intricacies of animating in React Native.

Prerequisites

Configured and running React Native Hello World application.

Workshop level

Intermediate.

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Oleg Isonen

CSS-in-JS - from “why” to “how” (April 16)

CSS-in-JS is a largely misunderstood approach to styling web applications due to the history of the web and a variety of use cases. After it’s early adoption in 2014, the community is widely using it for real-world high scale projects today and is still exploring the impact and improving the tech.

We are going to learn foundational ideas behind it by building our own CSS-in-JS library. We will explore the downsides and benefits of certain design decisions we will make on the way. Then we will dive into some advanced concepts and implementation details using popular libraries like Styled Components and JSS.

Table of contents
  • - Introduction
  • - CSS rendering strategies
  • - Building own CSS-in-JS library
  • - Separation of Concerns
  • - Reusing CSS
  • - Extracting Critical CSS
  • - Advanced styling with Styled Components
  • - Advanced styling with JSS
  • - And more
Prerequisites

Experience with modern JavaScript features and fundamental React concepts, basic CSS concepts.

Workshop level

Intermediate/Advanced JavaScript/React developers, beginner CSS developers.

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Alex Lobera

Advanced React Workshop (April 16)

React keeps innovating and bringing new and better features. Despite this constant change, the principles of React remain the same: composition, immutability, purity... in other words, functional programming principles. In this advanced workshop, you will learn how to implement advanced features in React applying functional programming in JavaScript without using any other libraries.

Table of contents
  • - Functional Programming (FP) for React developers:
  • - Closure
  • - Memoization
  • - Composition
  • - React Hooks for advanced use cases:
  • - Hooks Composition Model (custom Hooks)
  • - useContext
  • - useReducer
  • - useMemo
  • - Use cases: You will build a GraphQL client with cache for React (you don't need to know GraphQL) using all the Hooks and FP concepts from the workshop syllabus
  • - and more...
Prerequisites

To attend this workshop you need to be familiar with the basics of React and basic Hooks like useState and useEffect, as well as most of the new features in ES2015

Want to know more about the trainer? Check reactgraphql.academy.

Workshop level

Intermediate JavaScript/React developers.

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Michel Weststrate

TypeScript for React Devs (April 16)

The JavaScript Eco System is moving to TypeScript. Fast. TypeScript has some unique, very powerful features that fit very well with the dynamic nature of the JavaScript language. This workshop will get you up and running with all the basics and the most important advanced patterns of TypeScript.

But beyond that, this is a workshop for React devs! So we will discuss extensively how to combine TypeScript with a React code base. To practice the theory, during the hands-on parts of this workshop we will be migrating an application from plain JavaScript to TypeScript.

Read more details on the agenda on Michels website.

Table of contents
  • - Project setup and migration strategies
  • - The basics: Primitives, interfaces, classes, generics
  • - Control flow and type inference
  • - "any", "never", and "unknown". Your buddies for life!
  • - "type", type operators and modifiers: "private", "readonly", "&", "|", "infer", "this", "typeof", "is", "?" and "!"
  • - Typing complex functions and objects: Tuples, index signatures, mapped types, conditional types, variadic arguments, overloading, declaration merging
  • - Namespaces and typing external packages
Prerequisites

Familiarity with React, JavaScript and modern syntax features (ES2015).

Workshop level

All JavaScript/React developers.

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Advanced Next.js with Core Members (April 16)

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Kitze

GraphQL Workshop (April 16)

This one-day workshop will teach you everything you need to know to incorporate GraphQL into your application. During the first half of the workshop, we'll explain the basics of a GraphQL and we’re gonna build a GraphQL server, covering best practices for architecting your schema, error handling, authentication, and permission layers. In the second half of the workshop, we’ll connect our GraphQL server to a React application with Apollo Client. We’ll break down the modular architecture of the client and teach you how to set everything up and use queries and mutations. We’ll show a few different approaches for working with Apollo: Higher Order Components, Render Props, and hooks. Throughout the course of the workshop, you’ll learn practical tips for using GraphQL in production.

Table of contents
  • - Basics of GraphQL
  • - Set up a GraphQL backend
  • - Setup authentication and permissions layers to secure your GraphQL APIs
  • - Using GraphiQL to explore and test your GraphQL API
  • - Setting up a GraphQL client with Apollo
  • - Fetching and rendering data in your react app with GraphQL queries (using HOCs, render props, hooks)
  • - Inserting data with GraphQL mutations
  • - Updating and deleting data with GraphQL mutations
  • - Updating the store after a mutation
  • - Optimistic updates
Prerequisites

To attend this workshop you need to be familiar with the basics of React, as well as most of the new features in ES2015.

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Kent C. Dodds

React Performance (April 16)

React is fast, until it isn't

In this workshop, you'll learn everything you need to diagnose, profile, and fix performance problems in your React application using the Browser Performance Profiler, React DevTools Profiler, and proven React optimization techniques.

The tools we have for profiling React Applications are extremely powerful, but they can often be really difficult to grok. Sure, starting a profiling session is simple enough, but how do you go from all the information in the flamegraph to actionable steps to improve your application's performance? And once you know what parts of your app are causing performance issues, what then? How do you optimize your React components without making the whole application a complex mess?

Oh, and don't forget that you should profile your app in production mode to make sure you get accurate measurements. Do you know how to do that?

Hi, I'm Kent C. Dodds and in my latest workshop I'll teach you the ins and outs of optimizing React applications. I will take you on a deep dive browser profiling tools, and show you what you need to know to start using them to make your applications fast right away.

Table of contents
  • - profile React components with the React DevTools profiler
  • - profile JavaScript with the Chrome DevTools profiler
  • - utilize built-in React features (like React.memo, useMemo, anduseCallback) to optimize React components
  • - know how to apply better patterns for application state management to optimize components by default
Prerequisites

Attend my Advanced React Hooks Workshop or have the equivalent experience with advanced React concepts.

Workshop level

Advanced JavaScript/React Developers.

Workshop schedule & location

April 16, 8:30 till 17:00. RAI

Trainers

Kitze
Kitze
React Academy, Poland

Kitze founded React Academy to teach React and GraphQL around the world. He's the maker of Sizzy - the browser for designers and developers. He's documenting his journey on YouTube. He made products like JSUI, Twizzy, Lucky Retweet, OK Google, etc.

Kent C. Dodds
Kent C. Dodds
Trainer, 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 the creator of TestingJavaScript.com and 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.

Vladimir Novick
Vladimir Novick
Independent Consultant, Engineer & Trainer, Israel

Independent Consultant, engineer and trainer, Google Developer Expert, worldwide speaker and published author. Vladimir works mostly in Web and Mobile fields advocating usage of React, React Native, GraphQL as well serverless architectures and functional languages such as ReasonML.

Siddharth Kshetrapal
Siddharth Kshetrapal
CodeSandbox, Netherlands

Sid builds tools for developers. In the past, he worked on Design Systems at Auth0 and as the frontend architect at Practo. He loves talking about design, performance and open source.

Aisha Blake
Aisha Blake
Gatsby, USA

Aisha Blake is a Senior Software Engineer at Gatsby, currently building < title of conf >, a musical tech conference. She also supports community by co-organizing self.conference and Detroit Speakers in Tech. A theatre kid turned tech community leader, she approaches speaking and teaching as a way to give others the tools to shine as brightly as they can. In her spare time, she sings karaoke and pets dogs. Aisha is a champion of feedback, fierce accessibility advocate, and a steward of strong teams.

Sid Chatterjee
Sid Chatterjee
Gatsby, India

Core team at Gatsby. When he isn't writing code, Sid enjoys scuba diving, reading and lazing with his dogs. He lives in Mumbai, India and writes at sidhartha.dev.

Max Stoiber
Max Stoiber
GitHub, Austria

Max is the technical cofounder of Spectrum.chat, the community platform of the future. He also makes styled-components, react-boilerplate, micro-analytics and a bunch of other open source projects and he co-organises the ReactVienna meetup. He loves to travel, to brew rad coffee and to ski beautiful mountains.

Oleg Isonen
Oleg Isonen
Webflow, Germany

Oleg is an author of JSS and an architect with a focus on scalable web front-end applications. At React Day Berlin Oleg will share the insights on building complex applications with real-world examples.

Alex Lobera
Alex Lobera
React GraphQL Academy, UK

Founder at React GraphQL Academy and LeanJS. Developer and Coach passionate about JavaScript, React and GraphQL. Organizer of the JavaScript London Meetup and other popular meetups in the EU.

Michel Weststrate
Michel Weststrate
Facebook, UK

Open source fanatic, speaker and trainer. Author of MobX, MobX-State-Tree, Immer and a plethora of smaller packages. On a continuous quest to make programming as natural as possible. React, JavaScript and TypeScript fan. Working at Facebook on dev tooling for mobile developers.

We guarantee
  • Modern training course from the first class industry experts
  • Small sized groups for maximum individual reach
  • A focus on practical exercises, so you'll learn by doing
  • Our friendly team on hand to answer your questions
If you are a developer

Whether you're looking for skills to help you level up at work, get a promotion, or make yourself more competitive on the job market, our full-day workshops taught by the industry experts are tailored to get you there. Skyrocketing JavaScript frameworks will make you a developer in demand. Release full potential of React and React Native to discover new exciting career opportunities!

If you are a business owner

Investing just 8 hours into your employees’ development can result in a sufficient performance improvement. Let’s say, 10 of you engineers attend a full- day workshop. In the next year, they will put in approximately 20,000 hours of work for your company. If after the workshop their performance improves by only 1%, your organization in return will gain 200 hours of work. Impressive outcome after one training day only!