THE BIGGEST REACT CONFERENCE WORLDWIDE

Getting that senior title is easy. Just stick around. Being a true senior takes a new way of thinking.

You're a great engineer. You can code anything you need, solve every problem, google any solution. Your code is flying.

But somehow you're ... stuck. Interviewing feels rough, you pass the coding and fail the real stuff. Culture and system. At work they keep giving you stupid little problems with no growth. You crave challenge and keep tweaking CSS instead. You want some responsibility, damn it! What's that coworker got that you don't? Most of all you crave autonomy. The freedom to tackle big challenges and help the company with your brilliance. They don't even see all the bad code you see! How can they live like this?? Instead of autonomy, you're getting babysat. Managers asking what you're up to, daily standups that feel like a drag, pushback and 'maybe someday' on every idea that you give. I was like that a few years ago. A totally senior engineer who keeps running into walls and getting stuck. Now even bigger companies trust me with designing systems and leading teams on projects that could make or break the company. In this workshop you'll learn what changed and how to apply the Senior Mindset to your work and career:

• How to gain autonomy
• Inspire trust
• Own large projects
• Get freedom to experiment
• Have your ideas heard
• Think like an expert
• Become a decision-making peer, not a pair of hands

You'll work on case studies, analyze anecdotes, discuss insightful books, and look at your work and career in a new light.

In this workshop, we'll start with the basics of TypeScript for beginners, and then progress through advanced patterns such as discriminated unions, generics, and advanced inference.

To finish, we will port an existing JavaScript codebase (https://github.com/tupuio/tupuapp) to TypeScript and learn along the way.

React 18 was a long-awaited release. New APIs were introduced and certain behaviour changed. Some of these changes have quite an impact on your daily development, while others rarely affect you. Nevertheless, only by knowing your tools can you best decide when to use which of them.

In order to get a deep understanding of these new APIs and behaviour changes we will explore the following topics (see table of content).

The workshop is split into several modules. Each of them starts with a 20 min presentation, 30-50 min coding session and is followed by a 10 min retrospective. The final topic about what's coming after React 18 is only covered as a presentation.

By the end of the workshop you will be able to leverage the new features of React 18 and be able to use them in production ready applications.

If you don't already have a solid computer science background, most of the typical algorithms used in industry-wide job interviews can be intimidating. Moreover, even experienced engineers sometimes struggle to apply proper algorithmic thinking in their production code. This workshop starts at a basic problem/solution, and layers up to complex algorithms for a variety of challenging tasks. Whether attendees have computer science education or not, they will leave this workshop with practical algorithms knowledge, prepared to tackle problems by first thinking algorithmically and then translating that into efficient code.

Now that you're on your feet with the basics of Remix, we can do some really exciting things. The cool thing about Remix is that you can start and ship the simple implementation and then incrementally add more complexity to it over time without completely rearchitecting your solution or changing your mental model. And that's what we'll be doing in this workshop. All while keep your app fast and bug-free–just the way your users like it.

At the end of this workshop, you'll know how to:

Eliminate busy indicators with Optimistic UI (while still handling errors)

Optimize Remix's automatic data revalidation after mutations

Fetch data outside of navigations for data driven components like Combobox/Autocomplete

Build global, animated navigation indicators, aware of submissions, revalidation, and redirects

Step up your app's accessibility with focus management

Make imperative data mutations (for things like mutations on keyboard shortcuts)

and more!

Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems

Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?

Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?

At the end of this workshop, you'll know how to:

Create Remix Routes

Style Remix applications

Load data in Remix loaders

Mutate data with forms and actions

There are many journeys we can take into becoming a web3 developer. Not all journeys require learning a completely new language and becoming a smart contract developer. In this workshop we will learn how to build our own React UI on top of any existing smart contracts on the Polygon Proof of Stake Blockchain. We will explore a basic overview of blockchains and learn about the advantages of building on Polygon. We will also gain an understanding of what Smart Contracts are, learn how to find existing ones, and learn tools that help us interact with them from a React application.

Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!

In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!

Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!

By the end, you will:

• Understand WCAG principles and how they're organized
• Know when to use accessibility audit tools
• Quickly identify common accessibility issues
• Integrate accessibility into your team workflow right away
• Realize that creating accessible websites isn’t as hard as it sounds ;)

Come to the workshop with some basic knowledge in React (with hooks) and we'll teach you some of the most reliable and resilient patterns for creating advanced React code that can be re-used in your applications. This workshop will be ideal for those creating "library code". In other words, highly composable and reusable code to be shared across an organization or a large project.

How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.

All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.

In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.

If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.

Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.

This workshop will focus on automating software composition analysis, static application security testing and dynamic application security testing using GitHub Actions. After a brief introduction covering the different types of application security and the importance of finding security vulnerabilities before they hit production, we'll dive into a hands-on session where users will add three different security testing tool to their build pipelines.

In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:

• Generate strongly typed models and structure for the fetched content.
• Use the content in components
• Resolve content from rich text fields into React components
• Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production

You will learn:

• How to work with content from headless CMS
• How content model can be leveraged to generate TS types and what benefits it brings to your project
• How not to use string literals for content in code anymore
• How to do rich text resolution into React components
• How to minimize or avoid content-related issues before hitting production

The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”

Learn more about the Hyperverse here.

We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.

In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

Join our Vodafone Engineering teams from around the world to see how we apply React technology at scale and with complimentary frameworks.

This session will cover both Web and Mobile application:

Our MyVodafone app provides a primary digital touchpoint for our customers across all of our markets. Our ambition is to grow the relevance of the app for our customers, aligning to other channels and establishing a common platform for markets to experiment and contribute through innersource working practices. Starting from a diverse landscape, hear why we have chosen to use React Native to aide our transition and establish a foundation that offers choice for any market regardless of their app implementation. Understand some of the challenges we faced and how we overcame these.

For Web application, our ambition is to set the proper foundations and enablers to boost cocreation and reuse among all markets looking for efficiency, quality and a best in class user experience. Our main pillars are our web manifesto and our development community.

In the workshop speakers will cover:

• 1 A quick overview of Vodafone

• 2 Focus on our My Vodafone App:

• 2.1 Overview & Why React

• 2.2 Setting the foundation

• 2.3 Bridging as a cornerstone

• 2.4 Migrating from Native to React Native in Vodafone Ireland

• 2.5 Driving re-use beyond the My Vodafone App

• 3 Focus on web application:

• 3.1 Overview

• 3.2 Technical Challenges & Why React

• 3.3 Technical Building Blocks

• 3.4 React in real life

• 3.5 Marketplace in Vodafone Turkey

• 3.6 SME Portal in Vodafone Spain

• 3.7 New Web Architecture in Vodafone Italy

• 3.8 Retail 10 in Vodafone Digital Channels

• 3.9 Source web

• 3.10 Marketing pages on headless CMS in Vodafone UK

Pedro Galán, Andrew Ferguson + their teams will talk through the detail.

Building an app can be tough work but Shopify has created a set of tools and resources to help you build a seamless app experience within the React & Express ecosystem. Get hands-on experience building a Shopify app using the Shopify App CLI, the Shopify App Bridge library, and our design system, Polaris. We’ll show you how to create an app that accesses information from a Shopify store and can run in your local environment. We’ll walk you through how to:

• Create a Shopify app using the Shopify App CLI
• Build a user interface with Polaris React components
• Integrate your app with Shopify using Shopify App Bridge components

Ready to kickstart your freelance career or just getting started on your freelance journey? You’re in the right spot. Learn from the world’s largest fully distributed workforce in the world.

The independent talent movement is the future of work. If you’re considering leaving full-time employment for a career as a freelancer, now is the time to find your successful space in the independent talent workforce. More people are working freelance today than ever before, with the freelance marketplace now contributing $1.2 trillion to the US economy. Some of the most in-demand roles for freelancers right now are senior developers with professional experience in React, Python, Blockchain, QA, and Node.js.

This workshop will help you design a sustainable and profitable full-time (or part-time) freelancing/contracting career. We will give you tools, tips, best practices, and help you avoid common pitfalls.

At the end of the workshop there will be a Q&A session with a Freelance Developer who can answer your questions and provide insights and tips into their own success.

During the Workshop break, we will be running a speed-coding challenge! At the end of the workshop, we will award a prize for the winner and display the leaderboard.

We will have you login to our portal and complete the challenge as fast as you can to earn points. Points are assigned based on difficulty and the speed at which you solve the tasks. In case you complete all tasks, you get extra points for the remaining time. You’ll see your score, ranking, and the leaderboard once you complete the challenge.

We will be giving away three Amazon Gift Cards ($200, $100, $75) for the top three winners.

So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!

This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:

• What is Capacitor
• How does it compare to other cross-platform solutions
• Using Capacitor to build a native application using your existing web code
• Tidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.

In this workshop, we will go over how to build a knowledge base using Gatsby, a static site generator Framework that uses React and graphQL, Contentful, a Headless CMS to drive the content and deploy it to AWS S3.

The agenda:

• Intro to serverless
• Prior Art: Docker, Containers, and Kubernetes
• Activity: Build a Dockerized application and deploy it to a cloud provider
• Analysis: What is good/bad about this approach?
• Why Serverless is Needed/Better
• Activity: Build the same application with serverless
• Analysis: What is good/bad about this approach?
• Q&A

Expected attendance experience: React, Next.js, some Node.js.

Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.

Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.

Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.

Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Software Containers are quickly becoming an essential tool in every developer's toolbelt. They make it easy to share, run, and scale code. In this talk you'll learn how to use Docker to write better, more sharable software. In this workshop Sr. Developer Advocate at Docker, Shy Ruparel, will walk you through getting started with Docker. He'll covers setting up Docker, running your first container, creating a basic web application with Python and Docker, and how to push the Docker Image to DockerHub. He'll share why you'd even want to use containers in the first place and how they enable a developer to write better, more shareable software.

• npm and security, how much do you know about your dependencies?
• Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.
• Fixing the issues and an introduction to Snyk with a demo.
• Open questions.

React is renowned for its developer experience. What if you could use it to improve the experience of editors and content creators too? In this workshop, you’ll learn how to use Sanity.io for structured content modeling. Find out how to build, iterate, and configure your own CMS to unify data models with efficient and delightful editor experiences. This workshop is intended for web developers who want to deliver better content experiences for their content teams and clients.

The React Patterns Workshop is a step-by-step guide to discovering React’s real world usage patterns. By solving a series of challenges and inspiring from the provided solutions, you will discover ways to use React to solve real problems by implementing custom Hooks, using Context to share data within an application, optimize performance and other intermediate to advanced scenarios which will allow you to get the most out of React, and take you to the next level in your journey as a React developer.

The larger a codebase grows, the more difficult it becomes to maintain. All the informal processes of a small team need to be systematized and supported with tooling as the team grows. Come learn how Nx allows developers to focus their attention more on application code and less on tooling.

We’ll build up a monorepo from scratch, creating a client app and server app that share an API type library. We’ll learn how Nx uses executors and generators to make the developer experience more consistent across projects. We’ll then make our own executors and generators for processes that are unique to our organization. We’ll also explore the growing ecosystem of plugins that allow for the smooth integration of frameworks and libraries.