LEARN FROM THE BEST TRAINERS IN THE CLOUD

  • 3
    Days
  • 6
    Trainers
  • 300
    Attendees
3 HOUR WORKSHOPS AT REACT SUMMIT

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.

Paul Everitt

React+TypeScript+TDD in WebStorm

React is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported. The two together? Not as much. Combine them with test-driven development (TDD)? Harder still.

In this webinar we show a little about a lot. Meaning, the key steps to getting productive, in WebStorm, for React projects using TypeScript. Along the way we’ll show test-driven development and emphasize tips-and-tricks in the IDE to help you stay in the TDD flow.

Table of contents
  • - Project Setup
  • - Project Cleanup
  • - Testing
  • - Debugging During Testing with NodeJS
  • - Debugging During Testing with Chrome
  • - TSX and ES6
  • - Functional React Components in TypeScript
  • - Functional React Components in TypeScript
  • - Sharing Props Using Type Information
  • - Class Components With Props
  • - Model Class State With TypeScript Interfaces
  • - Rich Events and Testing
  • - Presentation and Container Components
Prerequisites

Some experience with React.

If you don’t have an active WebStorm license, we’ll provide you with it.

Workshop level

Intermediate.

Workshop schedule & location

October 12, 17:00-20:00 CET. The workshop will be recorded.

Tanner Linsley

Rethinking Server State with React Query

The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications by surprise like:

  • Sharing Data across apps
  • Caching & Persistence
  • Deduping Requests
  • Background Updates
  • Managing “Stale” Data
  • Pagination & Incremental fetching
  • Memory & Garbage Collection
  • Optimistic Updates

Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.

In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features by using a library designed for managing server-state called React Query.

By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.

Prerequisites

To get the most out of this workshop, it’s recommended that you understand the basics of the following concepts:

  • React Context
  • React Hooks
  • useState
  • useReducer
  • useContext
  • Basic data fetching with the “fetch” API or similar tools

Workshop schedule & location

October 12, 19:00-20:30 CET. The workshop will be recorded.

Ben Ilegbodu

Migrating to React Hooks

React is continually improving and evolving. React Hooks are a leap forward in how we develop components and manage state in our React applications. Now you can use state and other React features without having to write a class!

Many React developers have switched from classes to React Hooks and are realizing the benefits of understanding their apps better because:

  1. Related logic is now located together;

  2. Less code is needed compared to the equivalent class;

  3. Function components better align with React’s mental model;

  4. Hooks are just awesome! 🎉

Do you have a codebase filled with class components? You could leave it that way, but it will become increasingly more “legacy” as time continues to pass by. Why not change now?

Is your team still not developing with React hooks? The longer you stick with the “old way,” the harder it will be to change when you need to. Why not change now?

In this workshop, not only will you learn the ins and outs of React Hooks, but also how to switch to React Hooks from class lifecycle methods, bringing your codebase and your team into the modern React era.

Get ready to…

  1. Switch from setState to the useState hook;

  2. Make API calls with the useEffect hook instead of the componentDidMount, componentDidUpdate & componentWillUnmount lifecycle class methods;

  3. Create custom hooks to reuse and compose logic;

  4. Use function closures instead of this & .bind for callbacks and event handlers;

  5. …and many other features to help you write modern React code.

Prerequisites

You’ll need to have…

  1. Prior experience building React applications, specifically using classes;

  2. Experience with modern JavaScript syntax and asynchronous patterns like Promise & async/await.

This minishop may not be for you if you…

  1. Are still new to React;

  2. Already have dabbled with React Hooks.

Workshop schedule & location

October 13, 18:00-21:30 CET. The workshop will not be recorded.

Mikhail Kuznetcov

Build Full Featured Frontend App with Svelte

Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building a real-time chat UI - participants will be able to follow along and exchange messages. Will start developing from simple front end components, later we'll connect it to a real backend and then test it and optimise for production. Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.

Table of contents
  • - Introduction
  • - Why Svelte?
  • - Setup the app
  • - Create first Components
  • - Make App Modular with Routing
  • - Connect to Real Data
  • - Introduce State Management
  • - Add Tests
Prerequisites

Installed software – NPM, git, VSCode (or other IDE of choice).

Workshop level

Junior/medior level of frontend knowledge.

Workshop schedule & location

October 14, 15:00-18:00 CET. The workshop will be recorded.

Maurice de Beijer

Getting Started with Suspense and Concurrent Rendering in React

React keeps on evolving and making hard things easier for the average developer.

One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier.

Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.

You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.

Workshop schedule & location

October 14, 18:00-21:00 CET. The workshop will be recorded.

Rick Vink

Automated Tagging System with TensorflowJS

Natural languages play an important role on the web in the form of content and comments. Texts hold information that can be quite hard to extract but can enable you to further automate your website. In this workshop we will use Machine Learning to create an automated text tagging system. With this tool we can suggest tags for the comments/blogs of your visitors on your website.

Prerequisites

Experience with JavaScript and NodeJS. NodeJS installed on your laptop. You do not need experience with Machine Learning.

Workshop level

Intermediate/Advanced.

Workshop schedule & location

October 14, 18:00-21:00 CET. The workshop will be recorded.

Trainers

Paul Everitt
Paul Everitt
JetBrains, USA

Paul is a PyCharm and WebStorm Developer Advocate at JetBrains. Before that, Paul was a co-founder of Zope Corporation, taking the first open source application server through $14M of funding. Paul has bootstrapped both the Python Software Foundation and the Plone Foundation. Prior to that, Paul was an officer in the US Navy, starting navy.mil in 1993.

Tanner Linsley
Tanner Linsley
Nozzle.io, USA

Tanner Linsley is an entrepreneur and open source creator who loves React and JavaScript. He has built and still maintain several well-known open source libraries like React Query, React Table, React Virtual, React Form, React Charts, React Static, and even Chart.js He co-founded Nozzle.io 6 years ago and is currently helping it grow as VP of UI and UX.

When not programming, Tanner spends his free time traveling, recording music, film-making, and vacationing with his wife and children.

Ben Ilegbodu
Ben Ilegbodu
Stitch Fix, USA

Ben is a Christian, husband, and father of 3, with 15 years of professional experience developing user interfaces for the Web. He currently is a Principal Frontend Engineer at Stitch Fix on their Frontend Platform team, helping architect their Design System. Ben also is a Google Developer Expert, Microsoft MVP, and enjoys playing basketball, DIY, watching movies, and tweeting (@benmvp) / blogging (benmvp.com) about his experiences with new web technologies.

Mikhail Kuznetcov
Mikhail Kuznetcov
ING, Netherlands

Mikhail is a developer with 10 years of expertise building web applications. He used a variety of frameworks, throughout his career starting with jQuery , AngularJS and Polymer; then he discovered VueJS and used it for several projects. Since 2019 he became a happy user of Svelte v3. Besides fullstack development for enterprise companies Mikhail is doing open source projects and speaks on meetups and conferences about various topics in modern web development. Mikhail runs a local ​Svelte meetup group in Amsterdam​.

 Maurice de Beijer
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.

Rick Vink
Rick Vink
School of Data Science, Netherlands

Rick has a master's degree in Physics at TU Delft. Rick gives courses and workshops at school of data science in the fields of data science, machine learning and deep learning to companies and consumers. Additionally, Rick co-founded a company Mech Punk in which they make VR controlled robots that can be controlled from any place of the world.