Adam Rackis has written an extensive article on React Suspense for CSS-Tricks: This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React. React Suspense in Practice → 📽 If […]
Tag Archives: react
React Bricks
React Bricks is a block-based CMS using React components as blocks. It works with Gatsby or Next.js and it has WYSIWYG editing Currently invite only. No information on pricing, but by looking at the docs I guess it won’t be free (as it will require an API Key) React Bricks →
Building The New Facebook With React and Relay
With the new Facebook design that got anounced just a few days ago, this video by Ashley Watkins is worth a look: Ashley discusses some of the technologies and strategies powering FB5, the new facebook.com. Topics covered include Facebook’s approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.
classnames-components – A classnames component wrapper to speed up styling React components
Geoffrey has created a handy package to quickly create React components that are built of an element with some CSS classes applied to them. Handy for when you’re working with CSS libraries such as Tailwind. import cc from 'classnames-components'; // using arguments const Header = cc('h1')('font-sans', 'text-3xl'); // using an array const Intro = cc('p')(['font-serif', […]
gqless – A GraphQL client without queries
Now this is a step forward: gqless is a fundamentally new approach to a GraphQL client. It makes using your API enjoyable, by generating queries at runtime based upon the data your app consumes. Here’s an example app of it in action. Notice how the data it fetched automagically, depending on what is to be […]
RedwoodJS – Bringing full-stack to the JAMstack
Now here’s an interesting project: Redwood is an opinionated, full-stack, serverless web application framework that will allow you to build and deploy JAMstack applications with ease. Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to your backend running on AWS Lambdas around the world, all deployable with just a git push […]
Mutik – A tiny immutable state management library based on Immer
Nice work by Jared Palmer: a React State Management Library which uses Immer internally so you don’t have to worry about overwriting (unrelated) parts of your state whilst updating some value in it. import React from 'react'; import { render } from 'react-dom'; import { createStore, Provider, useSelector } from 'mutik'; // Create a lil' […]
React Redux with hooks
Jennifer Williams shows us how use Redux with Hooks When I was first learning Redux I found all the moving parts and files incredibly hard to wrap my head around. Surprisingly, React hooks made the process of using Redux a lot easier for me. The post provides us with a two-fold example. One “without hooks” […]
React: You May Not Need Controlled Form Components
To work with forms in React two approaches are to either use Controlled Components or use Uncontrolled Components (as detailed here). Swyx shares a third way of working with forms: A lower friction way to handle form inputs is to use HTML name attributes. As a bonus, your code often turns out less React specific! […]
React: Hooks vs. Render Props vs. Higher-Order Components
Nice post comparing these three approaches and detailing why you should use the version with hooks. // #1 – Hooks const MyComponent = () => { const mousePosition = useMouse(); // mousePosition.x, mousePosition.y } // #2 – Render Props const MyComponent = () => { return ( <Mouse> {({ x, y }) => { // […]