#165 — November 20, 2019 |
Reactime 3.0: The Time Traveling State Debugger — It was only three months ago we first featured this Chrome dev tool for tracking and visualizing state changes in React application but there’s a major new version out. It lets you record & store snapshots of your app’s state and walk through them to debug, etc. Chris Flannery |
Build Your Own React — An interestingly presented walkthrough of creating your own React-a-like from scratch. You’ll need some time (and be gentle with the scrolling) but this is an interesting way to present such a walkthrough. Rodrigo Pombo |
Tried & True Productivity Tips from 25 React Experts — The KendoReact team curated the top productivity tips of 25 React experts, from smart ways to hit the ground running with React to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. Check them out. Progress KendoReact sponsor |
Meet Lucas Bento |
React Admin 3.0: An Admin Panel for B2B Applications — A framework for building browser-based ‘admin’ apps on the backend of your choice (REST, GraphQL, etc. all fine). It uses Material UI, Redux, React Router, and similar favorites. There’s a demo if you want to see it live. Used to be known as Marmelab |
Facebook and Microsoft Partnering on Remote Development — Facebook is working to make VS Code to be the ‘IDE of choice’ within the company, migrating over ideas from its Atom-based Nuclide project (which is now duly ‘retired’). This isn’t exactly React news, but since most of the React team are based at Facebook, it’ll have implications for them, and for you if you used Nuclide too. |
💻 Jobs |
Senior Software Engineer at Getty (Los Angeles, CA) — Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js. J. Paul Getty Trust |
Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers. Vettery |
📘 Tutorials and Stories |
Authenticating Your First React App (with Auth0) — I was at a hackathon last weekend where a team lamented how tricky they found it to hook into Auth0 (a popular ‘auth as a service’ platform). This tutorial would have come in handy, as it covers authenticating a React app using Auth0’s new SPA SDK, React Context, and hooks. Chris Sevilleja |
How to Use Gitpod in a Jerome Wu |
Animating Between Units with React Spring — Explores the problem of animating between different unit types (e.g. Konstantin Lebedev |
Serverless Handbook for Frontend Engineers — Cool idea for a quick project? Need a backend and don’t know how? Serverless Handbook shares recipes you can use today. Swizec Teller sponsor |
Combining React Hooks with Azure App Insights — A look at how to create a custom React Hook to work with Microsoft’s App Insights, Azure’s observability system. Aaron Powell |
Six Patterns for Microfrontends — An overview of microfrontend patterns: advantages, drawbacks and implementation. Florian Rappl |
A Beginner’s Guide to Creating an Interactive List with React — An introductory article on building an interactive list using Frank Zickert |
How to Use Sass and Styled Components in a React App — Someone suggested this golden oldie and we decided to oblige as it’s good. Tim Smith |
🔧 Code and Tools |
react-datasheet: Excel-Like Data Grid (Table) Component — A simple React component to create a spreadsheet. There’s a demo here. Nadim Islam |
styled-breakpoints: A Way to Create Breakpoints in Styled Components — That’s breakpoints in the visual ‘responsive design’ sense, not debugging sense 😄 Works with Emotion, Linaria, and Astroturf as well. Maxim Alyoshin |
Grommet: Responsive and Accessible Mobile-First Components for React — It’s been around for a few years, but it’s mature, reached v2 this year, and continues to add features, including a new list component and improved TypeScript support just this month. Grommet Project |
Test-Driven React: Optimize Your Workflow, Achieve Coding Zen The Pragmatic Bookshelf sponsor |
Reactive Search: React and React Native Components for Elasticsearch — Over 25 components including lists, ranges, search UIs, result displays, etc. appbase |
use Simple State: A Simple, Dependency-Free State Manager using Hooks Josh Jahans |