React Conf 2017 is being held at the Marriott Santa Clara in California on March 13th and 14th of 2017.

The conference was live-streamed both days, and the talks have been made available to watch. You can catch up with everything you may have missed or watch your favorite talk over and over again.

React Conf

Keynote Part 1

Keynote Part 2 - Incrementally Adopting React Native at Facebook

Keynote Part 3 - React Performance End to End (React Fiber)

Keynote Part 4 - React Fiber, Create React App, and React Community

A Cartoon Intro to Fiber

Next.js: Universal React Made Easy and Simple

React + ES next = ♥

MobX vs Redux: Comparing the Opposing Paradigms

Type Systems Will Make You a Better JavaScript Developer

Moving Fast with Nuclide and Flow

AWS Lambda + AWS Gateway + React = AWEsome

React to Code

The Road to Styled Components

Building Applications for Studio in Cloud at Netflix

React Native in the "Brown Field"

Moving Beyond Animations User Interactions @ 60 FPS in React Native

You Don't Need a Fancy Framework to Use GraphQL with React

Cross Platform Data Viz with React + React Native

Using React for Anything but Website

React Everything, Render Everywhere

Create React Native App: 5 min. to "Hello, World!"

Goodbye Flatland! An Introduction to ReactVR

Realtime React Apps with GraphQL

Jest Snapshots and Beyond

A Beginner's Guide to Code Splitting Your React App

Web Like Development and Release Agility for React Native

React Storybook: Design, Dev, Doc, Debug Components

Extensible React

Building React Communities Outside of Your Circle

A Prettier Printer (plus bonus clip!)

How to React in the Slow Lane

The Great Convergence with React

Learn Once, Route Anywhere

Taming the Meta Language

Speaker Panel

2017

Red Badger is running the React London Conference to help chart what’s possible and give the community a place to share discoveries. This is not-for-profit, the money generated will help cover our costs for this and future events.

React London

There's been a revolution; welcome the Component Age! Now what about styles? Max sat down with Glen Maddern (CSS modules) to think about how styles fit into our post-revolution world. They took the best of CSS and the web to create a fantastic new way to style component-based systems.

The road to styled-components: CSS in component-based systems

Bundling JavaScript nowadays is trivial. But what if you need to do it 10,000 times a day to thousands of users, with sourcemaps, served directly to the browser in under 2 seconds? Oliver will show us how they did this at Qubit.

Realtime Webpack - Pushing on-demand bundling to the limits

What's in a language? How can it help us express our intent better? Based on his last talk, Cheng will explore some concrete, daily patterns in our codebase that Reason elegantly solves through a few simple yet rich concepts.

What's in a language?

Combining ideas from both Redux and CRDT, Logux is a new tool which replaces AJAX with real-time data in applications, synchronising action logs between the client and server while also providing an offline mode. This approach could significantly simplify application code and bring plug&play support for live updates and offline editing.

Logux, a new approach to client-server communication

JavaScript developers are spending soooo much time formatting their code and even more in back and forth in code review fixing small nits. It turns out that machines are really good at doing this kind of tasks. Christopher will walk us through the technical and people challenges of bringing a JavaScript code formatter to reality.

Javascript code formatting

Facebook introduced snapshot testing in Jest last year and it has already picked up a huge interest. Why is snapshot testing so popular? How and when should you use it? Can you use it even if you’re not using Jest? Anna will explain all this and more in only 10 minutes.

Snapshot testing

React is capable of rendering to more environments than the browser. React is really two separate pieces: core and renderers. ReactDOM, ReactNative, ReactVR are but a few renderers in existence. With the Fiber reconciler rewrite comes an official renderer API. Dustan will look at a number of renderers that already exist and implement a React renderer of his own!

A tiny Fiber renderer

Next.js has generated a lot of hype in the short time that it’s been out (rightly so). It’s unveiling coincided with an initiative to rebuild Deliveroo's web application as a standalone app. Jasdeep will share his experiences using it so far, including some of the benefits & trade-offs.

Next.js in production

Ken explores the application of React and React Native to hardware projects, and the lessons learned while building a remotely controlled robotic crossbow.

Weapons grade React

This year, half of world’s population will be connected to the internet; most of them in the developing world, on mobile, over poor network. For them offline support is not a luxury: it is basic accessibility. Jani will walk us through how to architect React Native and progressive React web apps for the offline era.

Offline for the greater good

Panel discussion with Ben Alpert, Dan Abramov, Lee Byron and Christopher Chedeau led by Robbie McCorkell

React London 2017 panel discussion

React Amsterdam is a celebration of good things coming together: ReactJS that rocks and spring in Amsterdam that blossoms.

React Amsterdam is a full day two-track conference on all things React, gathering Front End developers across the globe in the tech heart of Europe. React 

Amsterdam is a heir to the biggest React community in BeNeLux and we have our priorities straight: only the highest quality content with careful balance of practical and visionary talks. 

React Amsterdam 2017 will take place in the Kromhouthal - former shipbuilding factory at a waterfront of Amsterdam City center. 

React Amsterdam

Official aftermovie from React Amsterdam Conference 2017

React Amsterdam 2017 Official Aftermovie

Mood video from React Amsterdam Conference 2017 

React Amsterdam 2017 Mood Video

Wix has been about cutting edge web development for a while, and we're all about TDD. When we started mobile with RN, we struggled to replicate our test-heavy workflow that we'd grown to love. We lacked tooling, best practices, and general know-how. 

In this talk, you'll hear about what works and what doesn't. You'll find out what methods we tried and rejected so you won't have to make the same mistakes, and you'll get pointers toward approaches that we've found work so you can get started on the right foot.

Testing & React Native: Lessons from the Battlefield

React popularized a new way of building user interfaces – components. By splitting our app into small, digestible parts the system as a whole becomes a lot easier to understand.

CSS was made in an era where documents were the height of the web. It doesn't fit easily into component-based systems, making styling one of the pain points of building React applications.

What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.

Styling React/ReactNative Applications

React Native opens up the world of mobile development for many of us, front-end engineers. 

It not only allows us to use technologies we know already, like React, to provide first-class native experience to our users, but also to support many platforms, like Android and iOS at once, from within the same codebase.

This talk will explore various patterns that turned to be useful over the course of few projects I did. It will also demonstrate techniques that can be used to write truly universal apps, ie. ones that share core across web, native and more.

Universal React

"Reactive programming" still sounds scary to many developers. As if it is an elevated way of thinking, only accessible to the chosen few. Nothing is less true! It is the most natural way to look at programming problems. 

You just might not realize it yet! In this talk, Michel will demonstrate that many complex UI problems, such as form validation and routing, can all be seen as '*actions* that change *facts* which leads to *reactions*'. And as soon as we start distinguishing those concepts in our applications; our code will become more declarative, more concise and less imperative.

Complexity: Divide and Conquer!

A deep dive into how Pinterest migrated their web infrastructure to serve React pages, which required moving a huge amount of code without breaking the site. 

Details on the legacy stack (Django web server and Nunjucks/Jinja template rendering) moving to Node and migrating our templates to React.

How Pinterest Switched Their Template Rendering Engine to React

Javascript has provided us with amazing ways to handle asynchronous logic to provide the best user experience possible. 

React Native is today the best tool to build mobile apps fast, but require extra care when managing asynchronous & offline logic: most people are often going to use your app with weak to no network. 

Get ready to get your app to the next level when you learn how to handle these edge cases

Asynchronous & Offline Magic Tricks on React Native

Adding type checking to your code can be a frustrating experience at first. 

In this talk, Forbes will help you through that initial stage by identifying some of the problems you're likely to experience and giving you the tools to work through them. 

We'll cover adding types to code that initially looks too dynamic to type, adding runtime type checking (and whether that's a good idea) and finally, how you publish your type checked modules to npm.

Flow Typing a React Codebase

At Balsamiq we are rolling out our new web-app to production. A real-world application with real-time collaboration, built using Relay, Redux, node.js, Redis, etc., running on AWS using Convox. 

Even at small/medium scale, if you're serious about building a good product you will eventually have to build a complex stack. 

I will share a few lessons learned in the process: how to structure the code, implement reactivity, writing tests.

A Real-World GraphQL Application in Production

Many web developers haven’t explored WebVR yet. Building 3D Worlds was an intimidating endeavour. Especially with ReactVR there is no reason for that anymore. 

The talk kicks off with the basics of WebVR, shows how to build and navigate rooms using panos in ReactVR. 

Next it shows how to create a couple 3D meshes and how put together a small world using them.

Introduction to ReactVR

No other topic in software development probably has so much controversy as linting. With a wrong workflow linting can be really a pain and will slow you and your team down. 

With a proper setup though, it can save you hours of manual work reformatting the code and reducing the code-review overhead.

Make Linting Great Again

When you start out on React Native project, there is a certain sense of awe as the package manager delivers the first bundle to the simulator. You quickly add some hello world text and maybe even a Pokemon image. Things are really starting to look up… 

And then you need to add another view and you realize that you need to navigate somewhere. So you check out the React Native Docs and are quickly greeted by IOSTabBar, Navigation, and NavigationExperimental modules. 

With so many different options in the core codebase you realize that it’s still a bit of an unsolved problem. Now you’re looking at 3rd party integrations… and you start to wonder, just how should you implement navigation? 

This talk will outline the different approaches to navigation available in React Native and in the RN eco-system, and the pro’s and con’s of each solution.

Navigating React Native Navigation

Find out how choosing a GraphQL client can impact development. From Relay to template strings, we will explore topics such as modularity, schema checking, and static analysis.

Demystifying GraphQL Clients

In this talk I will be detailing how to create custom renderers using the new Fiber architecture, and showing examples exploring some fun things you can do with them.

Fun With Fiber Custom Renderers

Sequencing Audio Using React and the Web Audio API

Generating your client validation rules

Using React to write a decision-making tool for the production studio at Netflix. 

Our application interacts with a large number of data models. We have to take very complex information and distill it so it can be more easily understood. 

Design challenges and solutions. How we developed the various components of our UX toolbox. 

Development process that includes writing unit tests in parallel with application development. How automated testing alongside application development informs our development process.

Building Applications for the Studio in the Cloud at Netflix

The question is not how to avoid bugs when building software. There will always be bugs. 

The question is how quickly can you recover from them. 

Let's go through some ways you can give your app the ability to notify you of these bugs before your users do using React and Redux. 

Start pushing bugs to prod responsibly.

Pushing Bugs to Prod Responsibly with React and Redux

Testing UIs has always been a hard job. In the components era, there are new tools and solutions available that transform completely the way we approach testing. 

From snapshots, through end-to-end frameworks, to style guide testing. In this talk, we'll see some modern (and creative) testing solutions.

Test Like It's 2017

React Native mobile just got easier. Learn how to tap into rapid development by using what the pros are ready to give you!

Coding Mobile with the Pros

Code Push for React Native brings web like release agility to mobile apps by enabling developers to update apps instantly. 

This talk will cover the next iteration of Code Push and how it fits into a complete suite of DevOps services built for called Mobile Center, built for React Native.

Web Like Release Agility for React Native Apps

React Native allows for building great native apps by utilising native mobile components. Apparently handling touch and gestures is quite tricky as it often needs to interact with the application code which runs asynchronously in the javascript VM. 

This talk is going to be about how the gesture system has been designed and implemented in React Native and how to use it to stay out of trouble.

React Native Touch & Gesture

Advanced SSR Caching with React

React Native holds great promise in terms of excellent developer experience with JavaScript and code reuse between platforms. 

The big question is  - do these benefits come at the price of performance? How well can React Native hold its own against purely native implementations?

Performance Limitations of React Native and How to Overcome Them

ReactEurope is back on 18-19 May 2017 to bring you the best and most passionate people from the very core team to the coolest people from the community we love. 

The conference aims to give talks that inspire and explore new futuristic ideas dealing with all the techs we enjoy from the React ecosystem such as React.js, React Native, GraphQL, Relay, Universal apps, Webpack, inline CSS and more.

ReactEurope is also a great occasion to socialize, meet new people and old friends, hack together, taste delicious food and have fun in the beautiful city of Paris.

Join us at ReactEurope Conf to shape the future of client-side, mobile and universal applications!

ReactEurope

Keynote

Dominic tals about what makes inferno’s so fast and how he and the team are bringing this experience to react.

What I Learned Benchmarking React

Jest was adopted widely across 100s of companies recently and provides an immersive testing experience. We’ll take a deeper look at JavaScript Testing with Jest and what it takes to turn a tool into a product with a delightful experience.

Building High-Quality JavaScript Tools

The new wave of frameworks won’t be frameworks at all.
In this talk, Sunil will explore how compilers and bundlers will replace certain runtime dependencies, without degrading the development experience that we all love and depend on. We’ll discover strategies of incorporating these ideas into any regular app, how we can leverage component models from react/vue/ember etc to enhance these ideas, and my own take on tooling in this framework-less world.

La nouvelle vague

Worse is Better: The Upside of JavaScript Fatigue

There’s a big push to improve React’s perceived performance. And WebAssembly is fast. Could WebAssembly be part of the solution? In this talk, code cartoonist Lin Clark will look at what WebAssembly could mean for React’s performance, and how the new Fiber architecture makes that even more of a possibility.

What WebAssembly means for React

Imperfection

Practical Confidence: Using Types to Help Your Computer Help You

If only React Native apps could be highly extensible- such that a single experience within an app could be published and installed into other apps. If your screens are built with sufficient isolation, they can be portable between apps, platforms, and navigation implementations. In this talk, we will discuss how this ultimate modularity can be achieved simply by utilizing reducers and single-directional data flow. Then we will use React Navigation to quickly build a new experience with these techniques, and see how portable it really is.

Maximally Modular Apps with React Navigation

React’s server-side rendering speeds up page load times, but it’s far from the only performance boost we can get on the server. In this talk, I’ll discuss how exploiting streaming and parallel processing on the server and browser can get us faster time to first byte, faster time to first paint, and faster time to full interactivity.

How Streaming Can Supercharge React

The Rise of Low Configuration Tooling

Detox — Graybox End-to-End Tests and Automation Library for React Native

Serious graphics on React Native

Expo Snack

return null;

Thousand ways to navigate in React Native

Devtools for GraphQL

Creating apps from scratch is stupid!

Leveraging code-splitting in React

Smarter code-splitting & preloading for React apps

Quantifying Best Practices

How to create a React Native reusable component for existing Android apps without knowing a thing about npm or node_modules

Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches? Can we get the best of both worlds? Can we add a little Boabab and Cerebral to the mix? Is it possible to create a transparent reactive, snapshotable state container. With support for JSON patches, replayable actions, serialization, complex object graphs. With Redux & MobX compatibility, strong typing and runtime type checks out of the box. Get a glimpse of what next-gen state management might look like with mobx-state-tree. Largely designed by the MobX community and enforcing many best practices that have evolved over the last year.

Next generation state management

Composition

Twitter Lite is a complex PWA built with Node.js, React, Redux, Service Workers, and Webpack. This talk will cover how our team designs and builds one of the world’s most visited web apps. You’ll also hear about React Native for Web; how we approach network and render performance challenges; and how we use new web platform features.

The making of Twitter Lite

Authoring VR content is time consuming and technically challenging, I’ll be providing an overview of how we are using the core strengths, merits of React Native and building on it to drive and improve app development within Oculus. I’ll go into more detail about the runtimes of both the native Android version and WebVR versions and how we utilize the improved engineer workflow the technology gives us access to.

The runtimes of React VR and use at Oculus

With the advent of libraries like React, Redux and Immutable.js, it’s clear that there’s a shift away from imperative and object-oriented in the front-end towards a more declarative and functional approach. Meanwhile, libraries like RxJS and Mobx are spreading the use of Reactive Programming to model UIs via discrete, asynchronous event streams. How can we combine the best of both functional and reactive paradigms to model and build predictable UIs that control themselves?
In this talk, Preethi will explain what “Functional Reactive Programming” is, how close React / Redux / Mobx / RxJs and others come in realizing Functional Reactive Programming, and what’s still fundamentally missing from these tools to achieve a true implementation of FRP. Lastly, she’ll describe when and why FRP is suitable (or not suitable) for building predictable and scalable UIs.

Functional && Reactive

Relay Modern

React provides an abstraction between the description of a UI and the details of how it’s rendered on a given platform. The problem is that div and span are a hidden dependency on react-dom, and similarly, React Native’s View is an explicit dependency on Native, making both not quite as “cross-platform” as we want them to be. Learn how we as a community can get around these issues, and what we can unlock by doing so.

React as a Platform: A path towards a truly cross-platform UI

We are biologically trained to notice motion: evolutionarily speaking, our survival depends on it. For this reason, animation when done well can guide your users. It can aid and reinforce spatial maps of our interfaces, and give us a sense that we understand interactions more deeply. For this reason, animation is incredibly powerful to convey meaning, but only when done well.
But animating the virtual DOM comes with some intricacies that affect our implementations. In this talk, we’ll go over animating in React with a variety of methods, comparing and contrasting each. We’ll cover add-ons like ReactCSSTransitionGroup, using external libraries like GSAP, React-Motion, motion using RxJS, and transitioning state with D3. We’ll look inside some real systems, breaking down how we can create reusable components of animation principles for interchangeable yet cohesive patterns.

Animating the Virtual DOM

Animations can make your app more pleasing to use and help the user understand state changes. This talk will give best practices on when to use them and an introduction of how to implement them in React Native with a deep dive into a new strictly declarative approach similar to CSS animations and transitions.

A Novel Approach to Declarative Animations in React Native

With React, Redux, ImmutableJS and friends, frontend development strive towards the functional approach proving to yield increased readability and maintainability. However, working in JavaScript, we never truly commit to the paradigm, but what if we did? The Elm language goes fully functional and as suspected, it comes with an ocean of benefits!

Putting the fun in functional with Elm

This talk will go over our approach of incremental React Native adoption within an already established native app. We will discuss the various problems that arise from using React Native in such a “hybrid” app model and in particular, discuss inter-app navigation and embedding React Native views into native shells and vice-versa.

Integrating React Native with Native Infrastructure

Each video has a comment with the code snippets being used. To get started, you just need to install "yarn add global create-react-native-app" and generate your first app. You can also find more info here https://reacteu.xyz/

React Native Workshop - Getting started

Q&A Panel

code posted at 55:22 https://gist.github.com/patcito/b76e4a1fe2549ef2c750c4ba6cb28d80

Each video has a comment with the code snippets being used. To get started, you just need to install "yarn add global create-react-native-app" and generate your first app. You can also find more info here https://reacteu.xyz/

React Native Workshop - Part 1: View, Text, Image, laying out

React Native Workshop - Part 2: Basic List

React Native Workshop - Part 3: SectionList

React Native Workshop - Part 4: Forms

React Native Workshop - Part 5: Navigation

React Native Workshop - Part 6: Navigation tabs & navbar

React Native Workshop - Part 7: Day 2 intro

React Native Workshop - Part 8: Architecture of React Native, Multi-threading and performance bottleneck

React Native Workshop - Part 9: Answering question on the bridge architecture of React Native

React Native Workshop - Part 10: Animated

React Native Workshop - Part 11: Animated, interpolation and native driver

React Native Workshop - Part 12: Animated Header on ScrollView

React Native Workshop - Part 13: Animated Modal

React Native Workshop - Part 14: Using LayoutAnimation to manage keyboard context with forms

React Native Workshop - Part 15: Linking

React Native Workshop - Part 16: AsyncStorage

React Native Workshop - Part 17: Fetch

React Native Workshop - Part 18: Yoga

React Native Workshop - Part 19: Ejecting

React Native Workshop - Part 20: Writing native module tips

React Native Workshop - @notbrent's encore showing cool stuff with React Native

First dedicated JavaScript conference in Amsterdam.

Taking our biggest and longest-running JavaScript community forward, we're adding a new event to our family - a full-day conference covering the latest and greatest news and insights from the global JavaScript network.

Join us and a group of internationally known JavaScript enthusiasts to share inspiration and spend a great, summer day in one of the most unique Amsterdam locations.

JSNation

The largest and the oldest JavaScript community in Amsterdam kicked-off the first edition of a full-day conference having Amsterdam Zoo as a location.

AmsterdamJS Conference 2017 Aftermovie

The JavaScript language gets ever more powerful, but more complex to implement and deliver good performance. Learn about V8's new compiler pipeline.

The JavaScript language gets ever more powerful, but more complex to implement and deliver good performance. V8 has a new compiler pipeline and a unified approach to collecting feedback about your application. 

I’ll explain how we do it and present some problems. For example, in complex systems, facile "solutions" often distort the environment in unexpected ways. Welcome to the jungle *__*.

V8 and How It Listens to You

Security might seem like a difficult and intimidating area to approach, that's only backend-related. 

Let's talk about security. We can all agree it is very important, however the general feeling about it is that it's a difficult and intimidating area to approach. 

Furthermore, is very often seen as something only backend-related, however front-end plays an important role as well.

The Art of Keeping Your Application Safe

Let's talk about why reactive programming is awesome and how it can help with managing complexity, data and scaling your applications. 

Managing state in large application applications is hard. Managing async behavior is even harder. 

Let's talk about why reactive programming is awesome and how it can help with managing complexity, data and scaling your applications. 

Also, remember the callback hell?! Well, we once have been PROMISED that all will be good. And guess what, we OBSERVED we can do better. Let's deep dive into how observables are much better than promises.

RxJS All Things

WebGL is not so scary and difficult as many people think.

WebGL is not so scary and difficult as many people think. Let`s have a quick tour over WebGL nature and ecosystem.

Just added conferences

Recent conferences

Upcoming conferences

React Conf 2017

React London 2017

React Amsterdam 2017

ReactEurope 2017

JSNation 2017

Chain React 2017

React Rally 2017

React Native EU 2017

ReactNext 2017

ReactFoo 2017

React Boston 2017

React Alicante 2017

ReactJS Day 2017

ReactiveConf 2017

dotCSS 2017

dotJS 2017

React Day Berlin 2017