Strategies for Derailing a React Conversation

Fun list tweeted just now by Redux creator Dan Abramov: Strategies for derailing a React conversation: HOC vs render props Is binding functions expensive CSS in JS PATENTS Redux Web Components class vs className <If> Size of node_modules Context I wonder which ones, if any, will matter in three years. Always keep questioning the status […]

Create interactive SVG maps in React with react-simple-maps

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson. react-simple-maps → Whilst looking further I’ve stumbled upon these two Medium posts detailing an implementation: How to create pure react SVG maps with topojson and d3-geo → Mapping Tutorial: Combining Victory Charts and React-Simple-Maps →

How to use Redux in highly scalable JavaScript applications

Alexis Mangin: I have recently worked on the first version of a React-Native mobile app for one of my clients, which desired to architecture the app in a scalable way for a painless experience to add new features later. I believe we should always think about app architecture that way as it can always scale […]

React, Relay and GraphQL: Under the Hood of the Times Website Redesign

The folks over at The New York Times have made change to using React, Relay and GraphQL for the new version of their website (which they are rolling out over the coming months): We thought it would be nice if there was one place to add and retrieve data and one way to authenticate against […]

Better Error Handling in React 16 with Error Boundaries

The first beta React 16 has been released just yesterday. Next to it running on Fiber (speeeed!), and allowing one to return Arrays in the render() method (bye bye unnecessary wrapper divs!), it also introduces the concept of Error Boundaries: Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, […]

Detect unnecessary renders in React with why-did-you-update

why-did-you-update is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props their values are the same. Installation per npm, of course: npm install –save-dev why-did-you-update No need to adjust all your components either, why-did-you-update works by patching React itself: import […]

Full-stack React + GraphQL Tutorial

An extensive 5-part tutorial by the Apollo folks, using their own Apollo Client to communicate with the GraphQL Server: Despite the great advantages of using GraphQL [over REST], the first step can be a bit daunting. That’s why I’ve started writing a series of tutorials that take you step by step through building a full-stack […]

react-datasheet, an Excel-like Datagrid Component for React

A simple react component to create a spreadsheet: Select cells, copy-paste cells Navigation using keyboard keys Deletion using keyboard keys Callbacks for onChange, valueRenderer(visible data) dataRenderer(underlying data in the input, takes the value by default) Installation per npm, of course: npm install react-datasheet –save Cells can have both a value and an expression (the underlying […]

Scaling your Redux App with ducks

It’s one of these things I too keep struggling with from time to time: do you organize your project files per type/functionality, or per feature? Alex Moldovan from FortechRomania: Our approach starts from the need to isolate the React code into a single folder — called views — and the redux code into a separate folder — called redux. Inside the […]