Simon Willison’s Weblog

11 items tagged “react”

hyperHTML (via) I’ve been playing around with multiline backtick template literals in JavaScript recently, and Claudio Cicali on Twitter pointed me to hyperHTML. It’s a fascinating project: it implements an alternative to React’s virtual DOM in just 4.6KB of code, taking advantage of the way tagged template literals can call a custom function which gets to affect how the interpolated values from the template are treated. The documentation does a great job of describing the various clever tricks that are used under the hood, in particular the way it takes advantage of the way tagged literals “freeze” the incoming array of literal chunks allowing hyperHTML to compile each template once and reuse the complied version for different interpolations. # 17th July 2018, 3:39 pm

react-from-zero (via) Interesting approach to teaching and understanding React: unlike most other tutorials this skips Webpack and ES6 entirely an focuses on things you can get running just using a browser and loading code via script tags. It does eventually load Babel to enable client-side JSX transforms, but before that it shows how React can be used by loading react.js and react-dom.js and then calling React.createElement() manually (or by using the 0xeac7 magic symbol and constructing JavaScript objects manually with $$typeof: magicValue). # 3rd July 2018, 5:27 pm

Sunsetting React Native at Airbnb. “Due to a variety of technical and organizational issues, we will be sunsetting React Native and putting all of our efforts into making native amazing.” Fascinating write-up from Airbnb (part of a series) based on two years of working with React Native. It’s worth reading this in full: 63% of their engineers they surveyed would have chosen React Native again given the chance and 74% would consider it for a new project—but the larger technical and organizational challenges (in particular the fact that React Native remains a polarizing choice in the mobile world, making it harder to hire great native engineers) mean that Airbnb are migrating back to pure-native for their iOS and Android apps. # 19th June 2018, 9:03 pm

react-jsonschema-form. Exciting library from the Mozilla Services team: given a JSON Schema definition, react-jsonschema-form can produce a cleanly designed React-powered form for adding and editing data that matches that schema. Includes support for adding multiple items in a nested array, re-ordering them, custom form widgets and more. # 23rd April 2018, 9:38 pm

owlsnearme source code on GitHub. Here’s the source code for our new project. It’s a single-page React application that pulls all of its data from the iNaturalist API. We built it this weekend with the SuperbOwl kick-off as a hard deadline so it’s not the most beautiful React code, but it’s a nice demonstration of how React (and create-react-app in particular) can be used for rapid development. # 4th February 2018, 10:33 pm

Just switched to {window.localStorage.getItem(’debug’) && <pre>{JSON.stringify(this.state, null, 2)}</pre>}—now I can ship to production and turn on debugging in my console with localStorage.setItem(’debug’, 1)

@simonw # 3rd February 2018, 5:23 am

A Complete CMS with No Server and 18 Lines of Code | Netlify. Slightly hyperbolic title, but there’s something really interesting going on here. Netlify is a CDN/hosting provider optimized for static site builders—it can hook up to a GitHub repository and build and deploy your site on every commit. Netlify CMS is their open-source CMS tool which works in a fascinating way: it’s a single page React app which stores structured content (as Markdown files with embedded key/value pairs) directly to your GitHub repository. Fire up Chrome DevTools and you can watch it using the GitHub API to construct new commits every time you hit “save”. # 26th November 2017, 5:53 pm

Use a Render Prop! Michael Jackson makes a convincing argument for using the render prop pattern in React in preference to HOCs (Higher Order Components, the React equivalent of Python class decorators). # 9th November 2017, 3:39 pm

github-dashboard (via) Nice little self-contained example of a React app with no build step by Shing Lyu. # 21st October 2017, 5:23 pm

Minimal React.js Without A Build Step. React is pretty dependent on a build phase, to handle things like JSX compilation. This is fine for most projects, but sometimes I just want to hot-link react and react-dom from a CDN and knock out a quick self-contained mini-application. Shing Lyu points out that this is much easier if you ditch JSX in favour of direct calls to React.createElement(). # 21st October 2017, 5:20 pm

React is the new Dojo. In which Mikeal Rogers provides his perspective on the history of Dojo, the earliest break-out JavaScript framework, how jQuery eclipsed it and contemplates the same thing eventually happening to React. # 20th October 2017, 12:22 am