Posts in "react"

This is big news! I’ve been waiting for v6 for forever and a day (at least). One legacy app with react-router v4, and another app using v5, and this version looks to have everything I’ve wanted. I have to say the road has been a bit rocky with react-router over the years – breaking API changes between v3 and v4 for example, as well as losing features, or steps backwards at times – but this release looks solid, checking off all the boxes for what I’d hope it would be.

Nice work

… I’ve discovered that a lot of developers never really fully embrace styled-components. They pop it into their project without updating their mental models around styling. One foot in, and one foot out. As a result, they miss out on some of the best parts of the tool!

Great post breaking down some techniques for getting the most out of styled components (CSS in JS)

I’ve been working with React since 2016 and still there isn’t a single best practice when it comes to application structure and design.

While there are best practices on the micro level, most teams build their own “thing” when it comes to architecture.

Of course, there isn’t a universal best practice that can be applied to all businesses and applications. But there are some general rules that we can follow to build a productive codebase.

Good, solid, patterns here – most of which we already use

Storybook began with a simple goal: help developers build UI components and their key states. This is the easiest, most efficient way to think through component hierarchies

However, the bar on UI development has also been raised. In 2020, it’s not enough to provide great tooling for building and testing components. Today’s modern frontend teams also need to document and package their components into reusable design systems.

Storybook is one of my favorite tools for UI-first development, and I’m looking forward to checking out their latest 5.3 release with MDX doc capabilities

Base Web is a foundation for initiating, evolving, and unifying web applications. It’s an open source toolkit of React components and utilities that align with the Base Design System–essentially, the designs translated into code. The project is engineered to be reliable, accessible, and extensively customizable.

We have been using Material-UI for our base component library but Uber’s open-source alternative is going to get serious consideration for my next projects. It looks to be fairly comprehensive in ots components, and I like that the style choices are very neutral. A strong customization API is high on the list of needs for any component library I’m evaluating.

Base Web project home

react-spring is a set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can’t cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another. This isn’t meant to solve each and every problem but rather to give you tools flexible enough to confidently cast ideas into moving interfaces.

Some really cool demos here and a good explanation another react animation library is needed

Collection of useful React components

HOCs for inversion (similar to recompose HOC components) as well as a useful collection of Sensor components (Active, Idle, Size), and more…

redux-dynamic-modules is a library that aims to make Redux Reducers easy to modularize and add/remove dynamically.

From Microsoft no less

I can do anything you’re doing with your HOC using a regular component with a render prop. Come fight me.

downshift 🏎 is the primitive you need to build simple, flexible, WAI-ARIA compliant React autocomplete/typeahead/dropdown/select/combobox/etc (AKA “item selection”) (p)react ⚛️ components.

Tha article calls out two interesting patterns for building reusable components that I’m seeing more of:

1. The “Function as Child” (or render callback) pattern.

2. The “Controlled Props” pattern.

Writing declarative, readable and flexible React components using render props instead of HOCs

Interesting pattern I’ve started seeing where chidlren is passed a function instead of React elements.

2020 updates – it’s functional components all the way now

Component-based development is productive: a complex system is built from specialized and easy to manage pieces. Yet only well designed components ensure composition and reusability benefits.

Lightweight keydown wrapper for React components

A React utility belt for function components and higher-order components.

See the examples as well as Destroy All Classes: turn React components inside out with functional programming

vx is collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

Theres a very nice demo gallery of charts rendered with VX as well

In this article I’ll talk about redux-cycles, a Redux middleware that helps you to handle side effects and async code in your React apps in a functional-reactive way — a trait which is not yet shared by other Redux side effect models — by leveraging the Cycle.js framework.

Interesting observation on the declarative/reactive nature of the common side-effect libraries I’ve used with react previously. They solve a problem, but they haven’t left me entirely satisifed and maybe this is the reason why.

A lightweight library that converts raw HTML to a React DOM structure.

The redux-thunk and redux-saga libraries are the most widely-used libraries for “side effects” in Redux. Both provide a place to make AJAX requests, dispatch multiple actions, access the current store state, and run other complex logic. redux-thunk does this by allowing you to pass a function to dispatch(), while redux-saga uses ES6 generators to execute asynchronous logic.

There’s been a lot of recent statements arguing that thunks (and sagas) are bad and should almost never be used. As a result, I’ve seen developers confused and wondering what alternatives they have to implement a given feature.

The concerns being raised are valid, but to balance the discussion, I would argue that thunks are a useful tool in Redux applications, and that developers should not be scared to use thunks in their codebase.

With those thoughts in mind, let’s dig into the discussions and see just what has been said about thunks.

Lots of good stuff in here. I can see a couple of things right away that I have noticed as problematic (duplication of async code, going “dispatch crazy” with chained actions) but struggled to find an obviously better solution.

Throughout the last few years I’ve taught React in just about every popular medium. Throughout that time I’ve been taking notes on what triggers these “aha” moments, specifically for learning React. About two weeks ago I came across this Reddit thread which had the same idea. So what I want to do in this post is share my collection of these moments while also adding my thoughts on some of the moments shared in that Reddit thread. Hopefully it will help React “click” for you if it hasn’t yet.

Draft-js is a highly programmatic rich text editor created by facebook. But it’s not what you might expect. Draft-js is just the underpinnings, leaving everything, and I mean everything, else up to you. When you render an Editor you get a textbox. This is because facebook wanted rich text in a number of different contexts, like all that commenting crap they do. I don’t know.

A useful seven-part series introducing the essential components of Facebook’s Draft.js text editor.

57 Configurable React Stateless Functional UI Components

Preact Component that renders children only when in-viewport https://jsfiddle.net/developit/t6qqnwn9/

When you’re first starting out, your project probably doesn’t need to be isomorphic. You don’t need bundle splitting, you don’t need internationalization support or offline-first, and you don’t need advanced routing. In fact, you probably don’t need Redux at all!

Excellent advice – start simple and then add the things you need. Not every app needs every go-to library.