Name: React Summit Remote Edition 2021
Start: 2021-04-11T22:00:00.000Z
End: 2021-04-15T22:00:00.000Z

React Summit Remote Edition

Attend a three-day React conference gathering thousands of international Front-end and Full-stack engineers in the cloud.

To help you stay up-to-date on the latest React tech, the GitNation team is bringing you a fresh remote gig on April 14-16, 2021. Mark your calendars and join the most prominent virtual event for the React community. Each day will feature two tracks of talks: the Summit track for pro React developers and the Base Camp track with more mainstream content for all levels.

Besides the conference talks and hands-on React workshops, you can expect excellent MCs, virtual networking rooms focusing on tech topics, interactive entertainment, and engaging challenges for all participants.

React Summit Remote Edition 2021

Synchronizing multiple streams, particularly multiple live streams, and especially when the audio is critical too, can be incredibly difficult. How, then, could you build an experience where you have a few camera angles and you want a viewer to be able to seamlessly pick one? We'll walk through a hack technique that allows you to do just that without ever having to worry about synchronization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Remember CSS Sprites? Let's Do That with Video!

Matt McClure

When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

API-first Development with Headless WordPress

Matt Landers

GraphQL is being used in some really interesting ways in parts of the developer ecosystem that you may be surprised to hear about, including Ethereum as well as for building comprehensive graphs from various third party APIs. In this talk, I'll show how to use a similar approach to build a cloud programming interface into AWS with GraphQL and why using this approach makes sense coming from a front end developer looking to leverage their existing skillset. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Turning the Cloud Inside Out

Nader Dabit

Most of us have heard that tests should be isolated, composable, or deterministic, but what does that mean in practice? How do you write a good test and how does the rest of your codebase change once you do? What effect does it have on your developer experience? In this talk I'll walk through a hand full of properties good tests have, show how we can write tests that follow these guidelines in JavaScript, and discuss when to consider bending the rules a bit. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Test Kitchen: A Recipe for Good Tests

Iris Schaffer

In 2020, Rangle partnered with the Survey Monkey team to migrate a legacy codebase to React. Survey Monkey’s best-in-class digital products were being held back fragmentation and complexity, which created a lot of rework and wasted effort for their engineering teams. Working together, we implemented a number of process and architecture changes that cut the complexity and improved workflows, letting our blended team deliver results with speed and consistently, even early in the engagement. These were not one-size-fits-all solutions, but solves that were unique and fitted to the needs of the engineering and product teams. The success of the project was due to Survey Monkey’s motivated teams that were: 1) Ready to embrace change; 2) Able to keep a firm focus on the outcomes; and 3) Readily understood the complexity of the project. This allowed us to co-create some non-intuitive solutions that engineers at similar enterprise-level companies should know about. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Complex React Migration: New Solutions to Old Codebase Problems

Jason Santos

If your React project requires rich text editing functionality, there are a number of libraries to consider. In this session we'll look at the features of some of the key players so that you can help judge which is the best fit for your requirements.

Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project

Lee Rowlands

Put up your thinking caps with Suspense and Concurrent mode! In this talk, I would discuss how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines for the same. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Road to a Better UX with Suspense and Concurrent UI

Nikhil Sharma

As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Setting Up Feature Flags with React

Talia Nassi

Learn how you as a developer can use our InfluxDB Cloud web interface to ingest, explore, analyze, and understand your data. We'll highlight new capabilities and show you some tips and tricks to get the most out of the InfluxDB Cloud Platform. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Understand and Visualize your Data with InfluxDB Cloud

Kristina J. Robinson

Using Rollbar in React

Jeff Hoffer

Introduction to Remotion, a new library with which we can turn React code into MP4 videos, create our motion graphics programmatically and server-side render them. I give an overview of the priciples, the philosophy and of course we are going to code a video! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Creating Videos Programmatically in React

Jonny Burger

React provides a great ecosystem for React developers, but challenges often arise for multi-team organizations who get to pick the technology of their choice. As teams and projects scale, and technologies change over time, being able to provide a universal component library as a design system for an entire organization proves to be difficult. Stencil was created to help address this issue, most notably for Ionic, which is a UI library for mobile app development using web-technologies. In this talk we’ll walk through how Ionic is able to create an Ionic React library, using custom elements (web components) as the lowest level. Using the Stencil compiler, the Ionic team is able to generate various bindings for each of the frameworks, such as React, Angular, and Vue. The benefit of this allows the design team to focus on maintaining one codebase, while the Stencil compiler does the heavy lifting to generate the various output targets. Additionally, end-users of each framework binding get to interact with their traditional component model they’re familiar with. React developers use @ionic/react no differently than any other React component, and the same goes for Angular and Vue. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scaling Components Across Multiple Frameworks

Adam Bradley

Learning 100 different languages is challenging, but architecting your React app to support 100 languages doesn't have to be. As your web application grows to a global audience, multilingual functionality becomes increasingly essential. So, how do you design your code such that it is flexible enough to include all of your international users? In this talk, we will explore what it means and what it looks like to build a React app that supports internationalization (i18n). You will learn several different strategies for locale-proofing your application with React contexts and custom hooks. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Internationalizing React

Daria Caraway

When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Lessons Learnt from Building Interactive React Applications

Siddharth Kshetrapal

Learn how we built Argo, a powerful extensibility framework that allows developers to seamlessly extend Shopify's apps on every platform. Argo provides developers with APIs to execute behaviour on the main app and a component library that renders native UI identical to Shopify's own component whether it's on iOS, Android or Web. Behind the scenes, Argo uses web workers and an open sourced library called remote-ui to create a sandboxed execution environment for external scripts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Remote Rendering with Web Workers

Trish Ta

With the growing community and great tutorials, it's fairly easy nowadays to start building web applications with React. However, the vital aspect of accessibility is often missing which leads to web applications creating exclusions. Nothing in React prevents us from building accessible web experiences, but we need to learn to harness its power in the right way while dealing with some unique challenges caused creating web pages with JavaScript. This talk will focus on how to solve these issues in the context of React. It'll also emphasis why it is important to build accessible web apps. In the end, I will also share some cool stuff and tools in order to make your web app more accessible. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Accessible React Components

Manjula Dube

Blockchain is arguably a future technology that can be somewhat confusing to get started. Even though there are plenty of resources scattered across the web, but to get started developing distributed apps in React on the blockchain can sound intimidating. In this talk, Vladimir Novick will share how we can get started and what you should know about blockchain architecture. If you always wanted to get into Blockchain development and didn't know where to start, this talk is for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React on the Blockchain - the Missing Getting Started Guide

Vladimir Novick

In 2019, our frontend engineers were asking hard questions about the future of our frontend build system. As new engineering teams continued to spin up new frontend microservices, our custom-built platform grew increasingly fragmented. This led to more headaches for our teams, who were struggling to keep up with maintenance patches and security updates. What could we do to get ourselves out of this mess? Come join us as we discuss how we built a new platform with Next.js at its core to solve the challenges we faced. With the momentum of the Next.js community, we were able to extend this framework with a unique plugin architecture that allowed our engineers to hot-swap new packages and tools while allowing us to upgrade entire swaths of the stack at once. At the same time, we've multiplied the productivity (and happiness) of every frontend engineer at Lyft. We'll end with some great things to share that can be taken with you to address the challenges you face scaling your own frontend platforms! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀

Andrew Hao

React helped popularize the use of components to develop websites and apps. It’s a fantastic philosophy, but while components have made our websites better, the workflow for creating components hasn’t improved much. Let’s get rid of the tedious parts like wiring your components to your CMS, and let developers focus on the important parts. With Prismic Slice Machine, we’re giving developers the best workflow for creating components. In only a few minutes we’ll create a React component, wire it to our CMS, add it to Storybook, and push the component live on our site! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Streamlining the Component Creation Process

Alex Trost

Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React

Lee Robinson

Fabulous secret powers were revealed to me the day I discovered Jamstack and said "By the power of Headless, I have the power!" Find out the key features of any CMS and why the headless is the new buzzword, which everybody wants to use. I will take you on the journey through the land of headless CMS and show you why you should consider headless CMS for your next project. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

By the Power of Headless!

Samuel Snopko

Learn about state modeling with state machines and statecharts can improve the way you develop your React applications, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level.

XState: the Visual Future of State Management

David Khourshid

When we started building the Cleo app, we noticed that a lot of functionality, design and types were shared between web (React) &amp; mobile (React Native). We investigated whether these could be shared within the codebase too… join me to find out what we discovered. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Sharing a Codebase with React & React Native: The Holy Grail?

Oli Bates

There was a time before React, and there will be life after. If you tie yourself too closely to any technology, you might trap yourself and miss the next wave. Let's zoom out from the state management library du jour — what timeless lessons can we learn from React? In the talk I'll discuss lessons I've learned from studying React that I will take with me for the rest of my career.

Lessons To Outlive React

Shawn Swyx Wang

Applying the React principle of “UI is a function of state” to SVGs and Graphic Design. We will talk about using systems of componentization and state management to create and manage SVGs. Viewers will leave the session with a firm understanding of creative coding practices and a new viewpoint for building systems in JavaScript. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Graphics, as a Function of State / Graphic = fn(state)

Romello Goodman

Improve the development process of React applications applying BDD &amp; TDD methodologies. These testing methodologies make you be confident when refactoring a codebase and improving existing code while avoiding side effects and shipping faster. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

BDD & TDD in React

Laura Beatris

Netlify CEO and co-founder Matt Biilmann reflects on the history of React, the promises of the Jamstack, and the complexity that can creep into developer workflows if we don't continue to defend simplicity over time. In this lightning talk, Matt describes the trade-offs developers face to deliver large sites and introduces a new idea for a more scalable future solution. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Keeping It Simple

Mathias Biilmann Christensen

In this talk, we’ll see how to build a user authentication system in react using magic, where magic provides a key-based identity solution built on top of the Decentralized Identity (DID) standard, where users’ identities are self-sovereign leveraging blockchain public-private key pairs. These key pairs are used to generate zero-knowledge proofs to authenticate users instead of having to rely on users providing passwords to Magic or any identity provider. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React User Authentication for Self-Sovereign Identity with Magic

Mohammad Shahbaz Alam

I'm going to showcase the React Native architecture we use in our new mobile app at Product Hunt. What we learned, among the way. How we moved what we know from web to mobile. Topics will be designing reusable React components, GraphQL, routing in the app, application lifecycle, keyboard controls, toast messages, and others. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Native Architecture at Product Hunt

Radoslav Stankov

In this talk, I will show you how to avoid a monolithic codebase, how to modularize your React app and how that might even help you speed up your CI builds: thus help you scale development as your team grows. We'll be doing this in a very concrete and practical way, using Nx as our toolkit. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scaling React Development with Nx

Juri Strumpflohner

How to build a UI that LEARNS? Being able to learn and predict the behavior of users has many powerful applications, one of them is the chance to boost the UI performance prefetching code &amp; resources before the user reaches them. In this talk, we describe a high-level implementation of an intelligent prefetcher, using ReactJS and TensorFlow.js. We use neural networks to learn the user's behaviour, and leverages React's lazy-loading API to prefetch components according to predictions. There is a chance for Frontend developers to explore the powerful combination of UI and AI. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build a UI that Learns - Intelligent Prefetching with React and TensorFlow.js

Eliran Natan

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scaling WordPress with Next.js

Colby Fayock

You want to know if your RN app has the best performance? Check out the slow rendering UI stat on the play store, if your numbers are not so good, come to this talk! I will present Systrace, a tool that can be daunting to use at first glance, but a fantastic tool, once you learn how to master it. I will show how it helped us detect and solve performance issues in our app. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging RN Android Performance

Alexandre Moureaux

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Don’t Know How React State Hooks Work 

Adam Klein

Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Tom Preston-Werner

When people ask me the most important skill I can learn to become better at my job and get promotions, I always tell them: The art of communication and human interaction. When working as engineers we are interacting with many people on daily basis. It is crucial for us to learn how to negotiate and persuade people. In this talk, we will cover 3 main techniques to become a better negotiator. these techniques can help us interact with others more effectively, get our projects approved, get promoted easier and even help us in our life. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Engineers Learn to Negotiate

Naz Delam

In this talk, Taley'a will be discussing how design system enables the consistency among the products, you will explore the core components of the design system, along with the key benefits and challenges while building the design system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems - Revamping Products for Consistent UIs

Taley'a Mirza

Fire-side chat on Recoil

David McCabe

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will. In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Inside Fiber: An Overview of React's Reconciliation Algorithm

Elad Tzemach

Are dev blogs dying out? No, they're not! Blogs are making a comeback. But sadly, most of them are lacking personal style. So, what can developers do to make their blogs unique and prettier? In this talk, I’ll show you how SVGs (as React Components) can help you take your blog from dull to awesome. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

SVGs to Make Your Blog Stand Out

Elizabet Oliveira

Have you heard about Atomic Design? How about Extreme Programming and Test Driven Development? For sure you have heard about React - a few things, I bet. In this talk you will get some insight on leveraging the power of Atomic Design to build the right product (using React, duh!) and capitalize on Extreme Programming and Test Driven Development to build it right ( exploring the React Testing Library). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building the Right Product and Building It Right: Extreme Programming and Atomic Design

Rita Castro

If React runs on a server and no one is around to see it, does it still make a sound? In this talk, Fred explores the world of server-side optimizations: what's possible today and what does the future hold? Featuring a sneak peek at an exciting new, never-before-seen project from the Snowpack team to help you build faster sites with React! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Without JavaScript?

Fred K. Schott

Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!

Building Better Websites with Remix

Michael Jackson

In this talk we will discuss how to combine the power of D3 as a math library with React's rendering capabilities. How can we encapsulate animation for reuse with React functional components? How can we deal with restrictions in data structures to create interesting visualizations? How to approach performance issues when there are multiple animated elements on the screen? These are some of the questions that will be addressed as we dig deeper into techniques applied to real-world examples. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Battle-Tested Techniques for Animation and Data Viz with React

Krystal Campioni

Since React Summit last year, React Query has already become one of the most popular and powerful data fetching libraries for React. To celebrate, we'll be going behind the scenes to see how React Query actually works and even build our own useQuery hook in just 150 lines of code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's Build React Query in 150 Lines of Code!

Tanner Linsley

Introducing Spectate, an open source library that generates your React state logic using the tests you write. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Write Tests. Generate UI. Profit!

Ed Bentley

It has never been easier for React developers to build native iOS and Android apps. In this talk, we'll see how quickly you can ship your app with Expo open source tools, Expo Application Services (EAS), and React Native. We'll also discuss some of the recent improvements we've made and what's coming up next. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Mobile App with Expo, EAS, and React Native

Brent Vatne

TypeScript is great, but migrating an existing app to it can be a pain. Codecademy took multiple existing React apps and converted them to TypeScript. We'll cover how to make those kinds of conversions successful from both cultural and technical standpoints. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Stories and Strategies from Converting to TypeScript

Josh Goldberg

New fullstack frameworks like Blitz.js and RedwoodJS are ushering us into a new era for fullstack development. They are mixing old concepts and ideas with cutting edge technologies to make fullstack developers more productive than ever. Watch this talk to go on a journey through time and get excited about what lies ahead. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Dawning of a New Age for Fullstack React

Brandon Bayer

In this talk we’ll explore a variety of techniques one can employ to ensure that their apps are running at peak performance. With a couple of small tweaks, you can make perf a built-in. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Doing the Least Amount of Work Possible: An Intro to Runtime Performance

Ken Wheeler

Fire-Side Chat with Kent C. Dodds

Kent C. Dodds

You'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.   <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Hybrid Cloud Development with Next.js, AWS, and Tailwind

In this workshop, we’ll look at some of the approaches and techniques that can be applied when making refactors or adding new features to a legacy React codebase to bring it inline with the latest approaches. We’ll cover topics such as how to use React Hooks to share component logic in a way that will allow reuse in class components; how to incrementally introduce other patterns to a React Redux app; and how to build in flexible UI components via abstractions where we are tied to some global CSS or a component library. Along the way, we’ll touch on many React patterns and state management approaches with the ultimate aim of being able to evaluate these options and let our requirements drive the architecture in moving towards a more robust and maintainable codebase. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Incrementally Adopt Modern React Patterns in a Legacy Codebase

Richard Moss

The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Hooks Tips Only the Pros Know

Maurice de Beijer

In this workshop we will go over the basics of streaming video over the internet including technologies like HLS and WebRTC. We will then build our own React app to play live streams and recordings of live streams. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Your Own Live Streaming Platform

Dylan Jhaveri

- Intro - Cleo &amp; our mission- What we want to build, how it fits into our product &amp; purpose, run through designs- Getting started with environment set up &amp; “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Build an Interactive “Wheel of Fortune” Animation with React Native

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Shopify App with React & Node

Jennifer Gray

Hanna Chen

A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

State Management in React with Context and Hooks

Roy Derks

Essential topics covered:- Setting up and developing a react project using create-react-app- Basic JSX syntax- The declarative philosophy, what props and state are- Function components <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Intro to React

Will Voelker

You may read already about the Jamstack. You probably already used Next.js, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why the Storyblok in combination with Next.js is the best combo for your next project. Stop and try it yourself! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Crash Course into the Jamstack with Next.js & Storyblok

Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

E-commerce on the Jamstack with NextJS and Netlify

Nick DeJesus

Renaud Bressant (Head of Product), Nathanael Lamellière (Head of Customer Success and Solution Engineer), Nouha Chhih (Developer Experience Manager) will be looking at the different developer jobs that you can accounter when looking for your next developer role. We'll be explaining the specifics of each role, to help you identify which one could be your next move. We'll also be sharing tips to help you navigate the recruitment process, based on the different roles we interviewed for as recruiters, but also as candidates. This will be more of an Ask Us Anything session, so don't hesitate to share your thoughts and questions during the session. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Landing Your Next Developer Job

Sadek Drobi

Nouha Chhih

Francois Bohyn

The way you observe your Web App’s performance over time can make or break the experience of your users. Fortunately, you can continually stay informed about the health of every delta in your UX using Real User Monitoring, and immediately identify any issues that are holding your current users back. With it, you can manage optimizing how long it takes for users to load your App on mobile, round trip times for asset fetching, the average latency between user actions and component updates, and more ( adding a small block of code in the right place). In this workshop you’ll learn how to leverage Real User Monitoring in order to track and resolve the issues that prevent your App’s greater adoption, and retention. We’ll discuss how to think about performance from the user perspective, gauge what metrics are important to monitor continuously, and define a good strategy for alleviating the latencies and issues that affect your users most. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Shipping High Performance React Apps with Datadog and Real User Monitoring

Ben Michel

React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Creating Accessible React Native Apps

Scott Vinkle

As eCommerce all around the world has shifted to a predominantly online-first platform the need to provide a high performance website to your users has significantly increased. And on top of that, google has announced that as of May 2021 Core Web Vitals will have a direct impact on page rankings and SEO making web performance even more significant. Come learn the basics of web performance and how it relates to media. Using a simple React based ecommerce app in conjunction with a media optimizing product, you can learn how to deliver the optimal format and fidelity, potentially improving your page rankings. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Faster media = faster websites

Marissa Masangcay

Pramod Shenoy

Akshay Ranganath

Every business today is a software business. Software is made of code. And code is meant to be improved. Yet developers get stuck reactively monitoring, investigating, and debugging code to fix issues. They lose too much time manually searching through logs, APM, and observability tools. Instead, they could be using that time to innovate. In this workshop, the participants will be introduced to the continuous code improvement platform that can help them see errors in real-time and gives them the tools needed to automate how they respond. Participants will learn how to instrument Rollbar's lightweight SDKs into their applications to capture uncaught exception errors as they happen along with the surrounding context and details. Participants will walk away with complete visibility on every error in their application, coupled with all the important data needed to make resolution painless. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Crash Course for Continuous Code Improvement 

David Woller

When working with Headless WordPress it can be daunting having to setup an e-commerce site. This workshop will take you through connecting a Shopify app with your WordPress site, linking your WordPress content to your Shopify products, building a React and NextJS frontend to show your products and posts, using Yoast SEO, and deploying your site to WP Engine’s Atlas platform. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition 2021

The biggest React conference in the cloud