Make sure to get in early.

Learn from the best with a 2-day workshop this May 15th and 16th from 8:45am to 5:30pm. This is not a repeat of last year’s workshop but a totally new workshop. This workshop will focus on helping you build more advanced and professional apps with a real native like experience. Core React Native contributor Brent Vatne and the expo team will guide you through this workshop on how to build great React Native apps. This workshop requires an intermediary level in React Native. Here are the full details:

Day 1

• Animated: Review basics, native driver, and tracking.
• Gestures: react-native-gesture-handler, integration with Animated.
• Universal components: react-native-web, share code between iOS/Android/web.
• Camera: take photos, save to disk, upload. Read from photos already on disk.
• OpenGL: how to use shaders on React Native views.
• Offline support: keeping your app useful without connectivity.

Day 2

• Start from a simple template, review it.
• Build the camera screen.
• Apply image filters.
• Add stickers on top of the filters (drag, scale, rotate).
• Build list screen.
• Make list screen work on web.
• Support offline usage.

In this workshop we will dive into the basics and more advanced usage patterns of mobx-state-tree. It is a tool that helps you to model complex problem domains and combines the best features of the modern state technologies out there.

Click here to see covered subjects

1. The state tree philosophy.
2. Modelling your data structures and state
3. Views & actions
4. Asynchronous processes
5. Composing trees and types
6. Connecting to GraphQL
7. Writing your own middleware

This workshop requires an intermediary level in React.js.

This 2-day workshop will skip the basics and get straight to teaching patterns and techniques that apply directly to developing professionally with React. Using real-world examples, we will cover how to take advantage of React and some of its community packages’ features to build maintainable, performant applications.

Click here to see covered subjects

• Project Architecture
• Component Design
• Patterns for Props
• setState Master Class
• Using Context Responsibly
• HoC’s
• Routing
• Redux Patterns
• Forms
• SSR
• Perf & Optimization
• Scalable CSS-in-JS
• Testing
• Render Props
• Static Typing with Flow
• Universal Components
• Error Boundaries
• Portals
• Utilizing Developer Tools

Make sure to get in early.

Learn from the best with a 2-day workshop this May 15th and 16th from 8:45am to 5:30pm. This is not a repeat of last year’s workshop but a totally new workshop. This workshop will focus on helping you build more advanced and professional apps with a real native like experience. Core React Native contributor Brent Vatne and the expo team will guide you through this workshop on how to build great React Native apps. This workshop requires an intermediary level in React Native. Here are the full details:

Day 1

• Animated: Review basics, native driver, and tracking.
• Gestures: react-native-gesture-handler, integration with Animated.
• Universal components: react-native-web, share code between iOS/Android/web.
• Camera: take photos, save to disk, upload. Read from photos already on disk.
• OpenGL: how to use shaders on React Native views.
• Offline support: keeping your app useful without connectivity.

Day 2

• Start from a simple template, review it.
• Build the camera screen.
• Apply image filters.
• Add stickers on top of the filters (drag, scale, rotate).
• Build list screen.
• Make list screen work on web.
• Support offline usage.

This one-day workshop will teach you everything you need to know to incorporate GraphQL into your application. First, we’ll start by building a GraphQL server, covering best practices for architecting your schema, error handling, and caching. You’ll also be exposed to some advanced backend topics such as schema stitching.

Next, 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 customize your own network interface through Apollo Link. We’ll also dive into server-side rendering and building query components with React Apollo. Throughout the course of the workshop, you’ll learn practical tips for using GraphQL in production from the engineers at Formidable Labs.

This workshop assumes participants have basic knowledge of GraphQL and intermediate knowledge of React.

This workshop requires an intermediary level in React.js.

This 2-day workshop will skip the basics and get straight to teaching patterns and techniques that apply directly to developing professionally with React. Using real-world examples, we will cover how to take advantage of React and some of its community packages’ features to build maintainable, performant applications.

Click here to see covered subjects

• Project Architecture
• Component Design
• Patterns for Props
• setState Master Class
• Using Context Responsibly
• HoC’s
• Routing
• Redux Patterns
• Forms
• SSR
• Perf & Optimization
• Scalable CSS-in-JS
• Testing
• Render Props
• Static Typing with Flow
• Universal Components
• Error Boundaries
• Portals
• Utilizing Developer Tools

Make sure to get in early at 323bis Rue de Charenton, 75012 Paris https://goo.gl/maps/t4FKT93C25u

Your typical French breakfast with croissants, coffee and more.

More details coming soon

I’m a sucker for web apps that make me smile.

This talk explores various ways that we, as front-end developers, can make our products more delightful to use. While it’s design’s job to give us static mock-ups, it’s our job to bring those designs to life.

For example, at Khan Academy, we fill the user’s screen with confetti rain when they get 100% correct on an exercise. I’ll talk about how we drew on 2D physics to make the confetti feel real.

Make no mistake; while this talk straddles the line between engineering and UX design, this is very much a React talk. I’ll show how to abstract motion and whimsical behaviour into reusable components, and how to do SVG/canvas animation in a React-friendly way. I’ll tear down some of my favourite examples from across the web, and show how to implement them in React.

Socialize, have some coffee or other drinks.

Let’s play a game. What’s the biggest difference between type systems for JavaScript and an ML inspired language like OCaml or Haskell? Subtyping! Subtyping allows runtime values of some type to be used as a different type, and how a language designer chooses to address subtyping deeply affects every other design decision in the language. From the way values are represented in the runtime, to how effective type inference algorithms are, to the supported polymorphic code patterns. Implicit runtime subtyping is common in today’s most popular languages like JavaScript, Java, C#, and Ruby but the tradeoffs aren’t well understood. Subtyping is useful, but in today’s programming environment subtyping is overrated.

For the past year Krzysztof has been working on react-native-gesture-handler – a library that exposes low level platform native capabilities related to gesture and touch handling to React Native. This library made it possible to recreate lots of interesting components like swipeable rows, drawer or image gallery by only writing Javascript code. In his talk will to highlight the differences between three possible approaches of building interactable components. He will also show where it makes sense to design pure JS APIs (for customizability ease) and where it is needed for platform native mechanisms to be used. He will show where are the limits of what can be implemented in pure JS.

Lunch time! Socialize while eating at our delicious buffet.

nc

Redux’s reified events, serializable actions and state, middleware, side effect free functional reducers and time travel super powers make it well suited for building simple, networked, testable decoupled simulations. This talk shows how to put those pieces together to build networked ReactVR applications and how it might be useful in a wide variety of other domains.

Socialize, have some coffee or other drinks.

React Native has come a long way since its announcement 3 years ago, but what if its future meant looking even further into its past?

nc

Socialize, have some coffee or other drinks.

The React prop-types package is a simple runtime type system that is used for property validation. But runtime type systems can do many more things than just data validation. Because they are very flexible (as you can basically reuse the entire hosting language to express your types) it will be much less likely that you will run into structures that cannot be expressed in the type system. You can generate runtime types on the fly from other sources (json-schema, graphql etc) or compose them together.

In this talk I will walk you through some runtime type systems, like prop-types, tcomb and mobx-state-tree. But also show you how runtime- and compile-time typesystems like TypeScript or Flow can co-exist and leverage each other.

If you thought so far Higher Order Components or render callbacks where cool, in this talk I will show you that these patterns can be applied in general to any datastructure you have.

Creating universal components isn’t just about reusability. Its about creating a development strategy. Without careful planning, your team can quickly end up in some pretty nasty spots. Join Samantha and Kurt as they walk through what universal components are, some best practices, and most importantly, some pitfalls to avoid!

• Declarative Data Fetching in React by Charles Mangwa
• React Interface for Ledger Hardware Wallets by Anastasia Poupeney
• Web performance - All in one by David Boyne
• Building high performance app with React by Sanket Sahu
• React-admin, build an admin like you play Legos by Francois Zaninotto
• Introducing Backstage: deploy individual branches of your front-end app by Jesse Pinho

Drinks, food, socializing, music.

Make sure to get in early.

Your typical French breakfast with croissants, coffee and more.

nc

Navigation works in a wildly different way on Mobile apps than it does on the web. Why is that? We will explore how navigation state and URL handling tends to vary between the environments, and introduce a model that manages the complexity of both use-cases. Then, we will dive into the API of React Navigation to see how easy it can be to implement an app with fully-featured navigation on iOS, Android, browser apps, and server-rendered React sites!

Socialize, have some coffee or other drinks.

There will be two lightning talks at the end of this break at 11:20am:

• Running JS on Paper + A Programming atelier by Sam Gwilym
• GraphQL API stitching with Apollo by Christoffer Niska

CodeSandbox recently turned one year old, I will tell about what happened along the way and what I’ve learned from building CodeSandbox.

• Refactor. The hard part by Kasia Jastrzebska
• redux without boilerplate Jan-Jan Van Der Vyver
• React in Battlefield 1 by Markus Thurlin
• GatsbyJS — building fast modern websites with React Kyle Mathews
• Powerful declarative apps with State Machines Bhargav Ponnapalli
• React: smiling while you’re styling! by Bruce Lawson

Lunch time! Socialize while eating at our delicious buffet.

Now that I have your attention, don’t miss this sequel-in-spirit to my 2015 talk about Immutable.js where I dig up yet another 20-year-old idea that’s frustratingly absent from the modern product development tool-belt: Generative Property Tests. Come for the memes, gifs and over-eager ravings of a bowtie-wearing know-it-all; stay for the deep-dive on interesting exotic data-structures and algorithms; leave with another tool for building high quality apps.

WebAssembly is still very young but is very promising. It outperforms the current web in many ways. Some says that it will replace JavaScript, but don’t worry it will not happen.

Socialize, have some coffee or other drinks.

There will be two lightning talks at the end of this break at 3:20pm:

• Funny code and how to write it by Charlie Jackson
• Redux over the wire by Nicolas Barray

React fundamentally changed how we build UI in JavaScript, yet the principles behind React are equally powerful outside the JavaScript ecosystem. What if we could build a design tool based on these principles, allowing us to design flexible, composable component systems? What if we could transpile these components into any language on any platform, such as a Swift components on iOS, or Kotlin components on Android?

In this talk, he ll demonstrate how React could fundamentally alter design and native development, just like it did for JavaScript.

nc

Socialize, have some coffee or other drinks.

There will be one lightning talk at the end of this break at 4:55pm:

• Static Analysis Tools for Components Era by Andrey Okonetchnikov

In this expo symposium (exposium) 🎙 we shall cordially discuss the usage of recreational cyber-gaming frameworks and their place in the native development environment.📱👾

Two months ago, I was working on a React project with a lot of SVG icons. I started to convert them into React components. I quickly figured out that it was a bot job and I started to look for a solution to do it. I found tons of projects but none of them matched my needs, so I decided to create my library.

I called it SVGR. The goal was simple, transforming a SVG into a React component. I coded it and I solved my problem, I saved a lot of time! I wanted to make it open source so I took the time to make a “beautiful” logo with a lion emoji and a good README. I also integrated Prettier in the project, I wanted to have a nice React code output out of the box. I tweeted it and got 40 stars and one contribution, I was happy.

Two weeks ago, Christopher Chedeau tweeted about my library, two hours later React Europe also tweeted it, later that day I got a star from Dan Abramov. Next thing you know I was trending on GitHub, getting 1K stars in one day!

What is the future for SVGR?

Types can be invaluable when working on a large project, by making refactoring less error-prone, enabling better coordinating between teammates, and improving readability. Reason gives you a powerful, battle-tested type system with cross-file inference, macros, and excellent JavaScript interop. Learn how you can start using Reason right now to bring more safety and maintainability to your React Native codebase, and catch a glimpse of a future where Reason can bypass JavaScript entirely to make your react app truly native.

This is your opportunity to ask questions to the team and speakers.

Have a last drink before saying good bye.

Our official ReactEurope Hackathon at Mozilla office in Paris from 9am to 9pm on May 19th. IMPORTANT: The address is “16 Boulevard Montmartre, 75009 Paris, France (https://goo.gl/NLbvX1)". Make sure to bring your own laptop and French AC adaptor. Registration to be announced soon.

The schedule of the hackathon is:

• checkin and breakfast start at 9:00am
• lunch at 12pm
• people start presenting their projects at 7pm