THE BIGGEST REACT CONFERENCE WORLDWIDE

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.

More and more projects are using TypeScript. This workshop will provide a deep dive into the language, and basic TypeScript knowledge is assumed. We will briefly discuss the design philosophy of TypeScript, and then cover all the lesser-known or harder features. That is: do all the cool and weird meta programming stuff (TS is turing complete!) and learn the tricks you won't find in the handbook.

So join if you feel like you're writing too much type annotations to make TypeScript happy! We'll dive deep into how type inference and control flows works, and how you can make the compiler work for you. We'll discuss all the fancier language constructs like:

• ReturnType<>, Parameters<>
• typeof, keyof
• Mapped types
• ConditionalTypes
• Function overloading
• Discrimination unions
• Type guards and type assertions
• String template types
• (Variadic) tuple types

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:

• new concurrent rendering APIs: useTransition, startTransition, useDeferredValue
• new Hooks: useId, useSyncExternalStore, useInsertionEffect
• strict effects in the new Strict Mode and revisiting useEffect
• automatic batching and flushSync
• sneak peek into what's coming after React 18 including a brief introduction into and for data fetching

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.

The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?

In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.

Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).

Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.

Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.

(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)

In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.

We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.

By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!

Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.

Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.

In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.

Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.