Workshops at React Summit

LEARN FROM THE BEST TRAINERS WORLDWIDE

  • 2
    Days
  • 7
    Trainers
  • 480
    Attendees
Workshops at React Amsterdam Conference

On April 15 and 16th, 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 locations, different from the conference venue. Please address individual workshop description for location details and follow your registered mailbox for updates.

Vladimir Novick

Building Whatsapp in a day with React Native and GraphQL (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

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

Workshop schedule & location

April 15, 8:30 till 17:00

Kent C. Dodds

Test 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 schedule & location

April 15, 8:30 till 17:00

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

React Native (April 15)

Workshop schedule & location

April 15, 8:30 till 17:00

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

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 schedule & location

April 16, 8:30 till 17:00

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

Basic experience with React and React Native.

Workshop level

Intermediate.

Workshop schedule & location

April 16, 8:30 till 17:00

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

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
  • - useCallback
  • - 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
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 schedule & location

April 16, 8:30 till 17:00

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

Trainers

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.

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.

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.

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.

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!