#156 — September 18, 2019 |
How to Profile a React App for Performance — Kent is on 🔥 lately with the React performance posts, and this is a great one. See how to use the React DevTools and React’s profiling build to get started with performance profiling a production app. Kent C Dodds |
An Advanced Redux Starter Kit Tutorial — Redux Starter Kit’s aim to is to make using Redux with your React app easier. This tutorial holds no punches and shows how to use it with large, real world apps, beyond the typical basic examples. Mark Erikson |
⚛️ New Course: Complete Intro to React, v4 — Learn to build real-world applications in React. Much more than an intro, you’ll start from the ground up all the way to using the latest features in React 16+ like Context and Portals. We also launched a follow up course, Intermediate React. Frontend Masters sponsor |
Relay 6.0 Released: A Framework for Building Data-Driven React Apps — A way to avoid using imperative APIs for fetching data in React apps. Instead, you define your data requirements using GraphQL and Relay does the rest. 6.0 changelog. |
Kea 1.0: A High Level Abstraction Between React and Redux — Billing itself as a ‘data layer for React’, Kea is a long standing project that has recently been completely rewritten to modern React standards (though it’s not well suited for use with TypeScript). Check out the homepage for the best feel of what it provides. Here’s a full Kea 1.0 change log, plus the GitHub repo. Marius Andra and Contributors |
Bridging the Gap between Lee Warrick |
💻 Jobs |
Full Stack Engineer — Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns. Expensify |
Get Hired Based on Your Skills Not Your CV — We’ll introduce you to over 1,500+ companies who’ll compete to hire you. You’re always hidden from your current employer and we’re trusted by over 100k developers. hackajob |
📘 Tutorials and Stories |
Animating Next.js Page Transitions with Framer Motion — Framer Motion is a powerful and feature packed library for creating slick Web animations. Kristian Heruc |
Getting Started with Electron, TypeScript, React and Webpack — Covers the essentials of setting up an app with the various tools. The actual app building is left as an exercise for you! Justin Ellison |
The Hands-On Guide to Learning React Hooks. Read the Article — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks. Progress KendoReact sponsor |
'Higher Order Hooks'? Don't Call Them That..! 😄 — It’s basic function composition really, but had it occurred to you to feed the output of one hook directly into another? Ryan Florence on Twitter |
▶ Composing Behavior in React or Why React Hooks are Awesome — If you liked the Twitter thread above ⬆️, you’re going to really enjoy this code heavy 30 minute talk. Michael Jackson |
Avoiding Stewart Parry |
▶ 'Why We Should Ditch React' — Yes, this is an opinion piece, but we’re not against linking to things like that as they can help broaden our minds and think about how and why we use the tools we do. Chris Hawkes |
How to Build a Switch Toggle Component James King |
🔧 Code and Tools |
React Rainbow Components: Another Suite of React Components — There are quite a lot of component sets out there now – this is another, they’re pretty slick and there are demos for all of them. Certainly worth a look. GitHub repo. nexxtway |
CRACO: Create React App Configuration Override — A way to get the benefits of create-react-app with added customization (of things like ESLint, Babel, PostCSS, etc.) without using ‘eject’. Sharegate |
Use Your Website to Drive Results? You Need WebOps. Learn Why Pantheon sponsor |
React Credit Cards: A Modern Credit Card Component — You’d use something like this on your checkout pages to autopopulate a visual representation of a credit card. AMARO |