⏩ React Live: the interactive conference
Key learnings from React Live in Amsterdam: Theme UI, SVGR, Framer Motion, Ignite, MobX State Tree and Next.js 9.
By Dennis Bruijn · · 2 min read · #react #conference #react-native
Originally published on Medium.
Two weeks ago I attended the React Live conference; it’s one of the biggest React conferences in the Netherlands. Besides being a conference, Passionate People (the event organizers) tried to spice it up by adding live coding to their sessions.
The conference was hosted at Theater Amsterdam, a tier-A location.
“Most impressive Conference Venue I have ever been too” — Evan You
🔑 Key learnings
I usually write my conference blogs talk by talk, but since everyone is doing that, it’s quite annoying to read. I collected my key learnings below.
Theme UI
Build consistent; theme-able React apps based on constraint-based design principles.
This way of working allows you, your product team, and the UI/UX team to be consistent when making changes. You can define a theming object based on the rules that the UI/UX team gives you.
export default {
fonts: {
body: 'system-ui, sans-serif',
heading: '"Avenir Next", sans-serif',
monospace: 'Menlo, monospace',
},
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
},
}
You can later use emotion (a CSS-in-JS library) in your components to read the object that you’ve defined.
You can also tokenize the above values, so they have a single source of truth.
Transform SVGs into React components
SVGR is an SVG to React transformer. The transformed SVG will be a simple React component that becomes highly configurable. SVGR is available as a module, webpack plugin or via CLI.
Framer motion
As an addition to the SVG part, you can use Framer X’s motion library to power your transformed SVG with fluid cross-device animations.
Motion - JavaScript & React animation library
Infinite Red Ignite
Infinite Red has released a new version of their React Native boilerplate tooling called Ignite. Check it out, it’s incredible!
Besides Ignite, Infinite Red also offers a tool called ReactorTron: a desktop app for inspecting your React and React Native projects on macOS, Linux, and Windows.
Mobx state tree
An Opinionated, transactional, MobX powered state container. That is combining the best features of the immutable and mutable world for an optimal DX.
Besides MobX, Overmind was also mentioned as a proper state container https://overmindjs.org/
I don’t use MobX, but it was refreshing to see what’s possible
Next level NextJS 9
Tim did a live coding session with Zeit’s product NextJS. It was interesting to see what new features have been added since the time I first tried it (over a year ago). It now has zero-config TypeScript support, file-based dynamic routing, automatic static optimization, and many more features.
▶ Watch “React Live Conference 2019 - Aftermovie” on YouTube
Fun fact: During the talks, we had WiFi problems, and as you can imagine, that’s not ideal for a live coding conference. 😅 Luckily they managed to fix it rather quickly by providing a UTP cable for the speakers. Shout out to the team!