React Newsletter #250

Creating videos in React with Remotion, ReacType 5.0, and the top 8 React meetup videos of 2020


Articles

60fps in a Web App

Luke Millar writes about how Projector -- his company's hybrid WebGL/React design platform application -- allows anyone (regardless of design background) to more creatively use modern media that's fast and expressive when creating visuals.

3 Approaches to Integrate React with Custom Elements

In this article, Caleb Williams walks through how to integrate a React application with Web Components to create a (nearly) seamless developer experience. It looks at React best practices and its limitations and demonstrates how to create generic wrappers and custom JSX pragmas.

What is React: A Visual Introduction For Beginners

A fresh take on the common "Intro to React" theme, this article is meant to be the first post you'd want to read before learning the specifics of React (even if you know very little about JavaScript). Linton Ye expalins the core ideas of of React in plain English and with some fun doodles.


Tutorials

Building a custom React media query hook for more responsive apps

This brief tutorial from Cassidy Williams walks you through how to build a custom React hook for media queries and why it can (in many cases) help your apps to be more responsive than doing traditional media queries in CSS.

Understanding Rendering in React

In this tutorial, Mateo walks through everything that goes into rendering in React, including the VirtualDOM, rendering itself, reconciliation, and committing.


Sponsor

react-email-editor

React Email Editor is a drag-n-drop email template builder component that makes it easy to add a solid email editor to your React apps. Designs are saved in JSON and can be exported as HTML.


Projects

Remotion

Remotion is an exciting new React library and renderer for creating videos and motion graphics with code. Created by Jonny Burger.

ReacType 5.0

A visual prototyping tool for React developers with comprehensive type checking with TypeScript and flexible exporting in classic React, Next.js, or Gatsby.js.


Videos

A soft introduction to Remotion

This amazing 18-minute video from our very own Alex Anderson walks you through all of the major features in the new Remotion library (mentioned above), which lets you create videos and motion graphics with code. He also demonstrates how you can use Remotion to re-create the opening segment that we use in all of our ui.dev videos.

Top 8 React meetup videos in 2020

A curated list of Meetup Feed's top 8 React meetup videos of last year. Topics include how to style React components, how to use TypeScript with React, adding persistence to React Apps by leveraging serverless functions, and more.

made with ❤️ by ui.dev