LEARN FROM THE BEST TRAINERS IN THE CLOUD

  • 4
    Days
  • 13
    Trainers
  • 480
    Attendees
Workshops at React Summit Remote Edition

Workshops will be run remotely on their original dates on April 14–16, 2020.

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

We will ensure that all trainers will be properly equipped and trained to adjust to the new format, but most of them have solid experience running online courses, anyway.

We trust that a remote workshop can deliver even more value by allowing you to engage with our trainers from the comfort of your home/office. In addition to the originally planned experience, we expect you will receive more individual trainer attention and a bonus home work content with code review performed by the trainers.

Dylan Jhaveri & Phil Cluff

Build Your Own Live Streaming Platform – 3h workshop (April 16)

In this workshop by Phil and Dylan from Mux you will learn how to build your own live streaming platform (think of products like: Twitch, Youtube Live, Facebook Live). No video experience is required, we’ll use create-react-app for the frontend and Mux.com for the live streaming APIs.

Note

The workshop is available for full tickets holders for free!

Prerequisites

  • Download OBS
  • Create a free mux account

Workshop schedule & location

April 16, 16:00 till 19:00 CEST. The workshop will be run remotely. It's available for full tickets holders only.

JJ Kasper & Luis Alvarez

Learn Advanced Next.js from the Creators – 3h workshop (April 16)

  • Introduce Next.js (what is it, what values it provides)
  • Explain Next.js' Router (pages/ or src/pages)
  • Explain and Demo Dynamic Routing
  • Showcase automatic prefetching for fast performance (and how to disable for seldom-visited pages)
  • Introduce API Routes, showcase hot reloading
  • Introduce TypeScript Support
  • Fetching Data in your Pages (with shared API type shapes)
  • Heavy CMS or Static content example
  • Showcase AMP support
  • Showcase client-side only rendering technique
  • Show how to leverage Next.js' built-in CSS/SCSS support
Workshop schedule & location

April 16, 17:00 till 20:00 CEST. The workshop will be run remotely. It's available for full tickets holders only.

Tanmai Gopal

Zero to Production with Fullstack GraphQL and React – 3h workshop (April 17)

Hasura is a free and open source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one.

  • Using GraphQL to make CRUD operations from a React application
  • Setting up access controls to data
  • Building realtime components in React using GraphQL Subscriptions
  • Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas
  • Triggering serverless functions on database events

This workshop will teach you how to build a production ready, fullstack React app using GraphQL & Hasura.

Workshop schedule & location

April 17, 11:00 till 14:00 CEST. The workshop will be run remotely. It's available for full tickets holders only.

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, 15:00 till 22:00 CEST. The workshop will be run remotely.

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, 10:00 till 18:00 CEST. The workshop will be run remotely.

Max Stoiber

Modern React (April 15)

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

April 15, 13:00 till 20:00 CEST. The workshop will be run remotely.

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, 10:00 till 18:00 CEST. The workshop will be run remotely.

Andrey Okonetchnikov

Design Systems for React Developers (April 15)

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

April 15, 9:00 till 17:00 CEST. The workshop will be run remotely.

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, 14:00 till 21:00 CEST. The workshop will be run remotely.

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, 15:00 till 22:00 CEST. The workshop will be run remotely.

Max Stoiber

Modern React (April 16)

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

April 16, 10:00 till 18:00 CEST. The workshop will be run remotely.

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, 14:00 till 21:00 CEST. The workshop will be run remotely.

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, 15:00 till 22:00 CEST. The workshop will be run remotely.

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, 12:00 till 19:00 CEST. The workshop will be run remotely.

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, 11:00 till 19:00 CEST. The workshop will be run remotely.

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, 11:00 till 19:00 CEST. The workshop will be run remotely.

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, 13:00 till 20:00 CEST. The workshop will be run remotely.

Trainers

Full-access tickets include interactive chat with speakers via their personal video rooms and Slack channels.

Phil Cluff
Phil Cluff
Streaming Architect @Mux, USA

Phil is a seasoned online video specialist, with experience building video products which power some of the biggest SVOD, AVOD and public service supported streaming platforms in the world. With 10 years experience, Phil has designed, built, and scaled software for the BBC, Brightcove, and most recently the San Francisco startup, Mux.

Dylan Jhaveri
Dylan Jhaveri
Software Engineer @Mux, USA

Dylan is a Software Engineer at Mux, a startup building online video infrastructure for developers. Dylan works on the DevEx team to help developers deliver smooth video to their users. Previously he co-founded Crowdcast, a live video streaming platform.

JJ Kasper
JJ Kasper
Software Engineer on Next.js Core Team @Zeit, USA

JJ is a Software Engineer at ZEIT on the Next.js core team. He is passionate about building great development and user experiences by leveraging open-source technology. He really enjoys getting to learn about the latest developments in tech and finding ways to apply these developments throughout his work.

Luis Alvarez
Luis Alvarez
Next.js Developer @Zeit, Colombia

After his brother taught him to program at a young age, Luis worked on high school projects as a self-taught developer. He then started his own company with his brother and friends. Passionate about open source, technology, and video games, Luis has loved Next.js since the beginning. He joined ZEIT to improve the framework and be part of the amazing community.

Tanmai Gopal
Tanmai Gopal
Hasura, India

Tanmai Gopal is the CEO, co-founder of Hasura. He is a StackOverflow powered fullstack developer whose areas of interest and work span React, GraphQL, Nodejs, Haskell, Docker, Postgres & Kubernetes. He is passionate about making it easy to build complex things and is the instructor of India's largest MOOC imad.tech with over 250,000 students.

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.

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.

Max Stoiber
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.

Andrey Okonetchnikov
Andrey Okonetchnikov
Component-driven.io, Austria

Andrey is a frontend engineer and an interaction designer, specializing in UX, design systems and modern frontend architecture.

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.

Oleg Isonen
Oleg Isonen
Webflow, Germany

Oleg is an author of JSS and an architect with a focus on scalable web front-end applications.

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!