LEARN FROM THE BEST TRAINERS IN THE CLOUD

  • 9
    Days
  • 9
    Trainers
  • 300
    Attendees

Workshops at React Summit

Hands-on 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.

Max Stoiber

Modern React

After some years of silence, React team had recently landed a number of new additions to its library enabling application developers to optimize their code both for better performance and maintainability.

Max will guide you through emerging patterns and show you by example how you can start applying the new best practices in your production apps.

Table of contents
  • - Quick intro to React Hooks
  • - Using Suspense in production right now with React.lazy
  • - Getting started with Concurrent React (previously “Async React”)
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

October 5-6, 16:00-20:00 CET. Remote.

Matteo Collina

Broken Promises

In our experience, if you are using promises, you are likely using them wrong (and nearly everybody else is too). This is most often due to misunderstandings about how Promises work, choices that were made by TC39 when designing the promises API, inconsistencies in how Promises are used, or failure to account for the cost of using Promises in an application, and ultimately how the event loop works. In this workshop, we aim to help developers do the right thing with Promises. Through a series of hands on exercises and puzzles, developers will learn the ins and outs of developing with Promises in Node.js, learning everything they should do, and most importantly what they shouldn't do, in order to maximize the effectiveness of their code and avoid common performance pitfalls.

Table of contents
  • - How Promises and async/await "work"
  • - How the Node.js event loop interact with Promises
  • - How to use Promises correctly
  • - The most common pitfalls when using Promises and async/await
  • - How to use Promises efficiently
Workshop schedule & location

October 5-6, 15:00-19:00 CET. Remote.

Siddharth Kshetrapal

Design Systems for React Developers

Development of digital products is a complex process that involves multiple stakeholders and roles: managers, designers, engineers, QA, and customers. This increases the communication overhead, slows down the process, and oftentimes results and less than ideal user experience.

  • How to communicate design ideas between different stakeholders effectively?
  • How to deliver consistent UI without constant supervising?
  • How to ensure same problems not being solved multiple times?

Design systems offer a systematic approach to the process of product creation. This approach establishes an organization-wide design language that can be backed into a UI library and the styleguide and becomes the single source of truth for the entire organization. Component libraries and living styleguides encourage reuse, promote consistency, improve team productivity, help to identify common patterns and solve similar problems only once.

Design systems help teams to stay focused on things that matter and ship higher quality products in less time and effort.

Table of contents
  • - Understand what a design system is and how to start thinking in design constraints
  • - Analyze and split your UI into small reusable components
  • - Setup an environment to create components in isolation
  • - Create a living style guide and start building a component library
  • - Structure your application around components
  • - Write maintainable styles for your components based on the design system
  • - 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 schedule & location

October 7-8, 15:00-19:00 CET. Remote.

Vladimir Novick

Building WhatsApp in a Day with React Native

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

October 7-8, 16:00-20:00 CET. Remote.

Nader Dabit

Building Full Stack Cloud Applications with React, GraphQL, & AWS Amplify

In this workshop we'll learn how to build cloud-enabled web applications with React & AWS Amplify.

Workshop schedule & location

October 7-8, 16:00-20:00 CET. Remote.

Alex Lobera

Advanced React Workshop

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

October 12-13, 16:00-20:00 CET. Remote.

Michel Weststrate

Advanced, Fancy TypeScript

More and more projects are using TypeScript. This workshop will provide a deep dive into the language, and basic TypeScript knowledge is assumed. We will briefly discuss the design philosophy of TypeScript, and then cover all the lesser-known or harder features. That is: do all the cool and weird meta programming stuff (TS is turing complete!) and learn the tricks you won't find in the handbook.

So join if you feel like you're writing too much type annotations to make TypeScript happy! We'll dive deep into how type inference and control flows works, and how you can make the compiler work for you. We'll discuss all the fancier language constructs like:

    • ReturnType<>, Parameters<>
    • typeof, keyof
    • Mapped types
    • ConditionalTypes
    • Function overloading
    • Discrimination unions
    • Type guards and type assertions
    • (Variadic) tuple types
Workshop schedule & location

October 12, 15:00-19:00 CET. Remote.

Vladimir Novick

React Native Animations

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

October 13-14, 15:00-19:00 CET. Remote.

Michel Weststrate

Introduction to MobX for React

MobX is now five years old and still one of the most popular state management solutions in React (used by for example Microsoft Outlook, the Battlefield games, Amazon and Netflix). With the (almost) recently released version 6 MobX has been modernized and is more accessible than ever.

In this brand new workshop we will discuss the philosophy of MobX, and cover all the basics of building a MobX managed application, using observables, Context and hooks. We will also discuss how MobX works behind the scenes and why MobX applications typically don't need any further manual optimizations. Basic JavaScript and React knowledge is required for this workshop.

Workshop schedule & location

October 14, 16:00-20:00 CET. Remote.

Kitze

GraphQL Workshop

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

October 19-20, 16:00-20:00 CET. Remote.

Kent C. Dodds

React Performance

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

October 21-22, 17:00-21:00 CET. Remote.

Kent C. Dodds

Testing React Applications

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

October 26-27, 17:00-21:00 CET. Remote.

Max Stoiber

Styled Components

Workshop schedule & location

October 28-29, 16:00-20:00 CET. Remote.

Speakers & Instructors

Max Stoiber
Summit Track
Max Stoiber
Gatsby, Austria

Max Stoiber is a Staff Software Engineer at Gatsby, inventing the future of web development. Previously he worked at GitHub, who acquired the startup he co-founded, Spectrum. He is well known for making styled-components, react-boilerplate, and a wide variety of other open source projects in the React ecosystem.

Matteo Collina
Matteo Collina
NearForm, Italy

Node.js TSC member, PhD, Technical Director @ NearForm, IoT Expert, Consultant, author of Pino and Fastify. Co-author of the book "Node.js Cookbook, Third Edition" edited by Packt.

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.

Vladimir Novick
Base Camp Track
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.

Nader Dabit
Nader Dabit
Amazon AWS, USA

Nader has been developing with React Native for over 2.5 years. He has worked with and trained developers from fortune 500 companies like Amazon, Visa, American Express, and Microsoft, helping them to get up to speed with React Native as quickly as possible.

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
Summit Track
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.

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
Summit Track
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.

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 and 3-hour 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 JS 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 your 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!