A rather geeky/technical weblog, est. 2001, by Bramus
When using Stateless Components throughout your React app, the lifecycle events (componentWillMount, componentDidMount, etc.) are still executed. Developer Philippe Lehoux found a way to bypass these, resulting in a 45% speed improvement: What if we could skip React internals for these components? Instead of mounting them as components, let’s just call them as what they …
Continue reading “45% Faster React Stateless (Functional) Components”
React Sketch.appAirBnB Design: Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. With it, it’s also possible to bring real data into the designs. …
Continue reading “Render React Components directly to Sketch with React Sketch.app“
React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React VR aims to simplify …
Continue reading “React VR – Build VR websites and interactive 360 experiences with React”
Glamorous 💄 is a styled-components 💅 and jsxstyle inspired solution for styling ⚛ React Components. It allows you to do stuff like this: // Create a <Title> react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em const Title = glamorous.h1({ fontSize: '1.5em', textAlign: 'center', color: 'palevioletred', }) // Create …
Continue reading “Styling React Components with “Glamorous 💄””
Next.js is a very slim yet powerful framework. Place React components in a pages directory and running next, and you’ll get automatic code splitting, routing, hot code reloading and universal (server-side and client-side) rendering. Version 2 of Next.js was released earlier today, with server-side and client-side rendering, dynamic routing, component styling, and link pre-fetching. Next.js …
Great set of articles by Addy Osmani: In this series of posts I’ll share my experience turning React-based web apps into PWAs. We’ll also cover why shipping just what users need for a route & throwing out all other scripts are good ideas for fast perf. As with all articles by Addy: well-written, accurate, and …
react-virtualizedreact-dropzoneSimple HTML5 drag-drop zone to drop files on. import React from ‘react’; import Dropzone from ‘react-dropzone’; export default class DropzoneDemo extends React.Component { onDrop(acceptedFiles, rejectedFiles) { console.log("Accepted files: ", acceptedFiles); console.log("Rejected files: ", rejectedFiles); } render() { return ( <Dropzone accept="image/*" multiple={true} onDrop={this.onDrop}> <div>This dropzone accepts only images. Try dropping some here, or click to …
react-day-pickerreact-day-picker is a flexible date picker component for React. no external dependencies select days, ranges, whatever using CSS modifiers ready for localization, even with moment.js customizable style navigable via keyboard, ARIA support As with every other well-written React component you can easily include this in your own code to – for example – create a …
Blueprint is a collection of React UI components, covering the majority of the common interface elements, patterns and interactions on the web. Using Blueprint ensures that you’ll end up with an elegant, easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it. The UI components really are well written …