#180 — March 18, 2020 |
✍️ Editor's note: Well, we certainly live in 'interesting' times.. We hope you're doing as well as the situation allows and we plan to keep publishing React Status as usual over the coming weeks. If you release anything, write a relevant tutorial, or even just have something you need to get out to the React community, hit reply and let us know.
React Production Performance Monitoring — Having users complaining about your app being slow ‘is not a great policy’, says Kent, so it’s worth measuring the performance of your components in production yourself.. and luckily React provides a great way to do so. Kent C Dodds |
Implementing Infinite Scroll And Image Lazy Loading — A tutorial on using the Intersection Observer API to implement infinite scrolling and image lazy loading in a functional component. Chidi Orji |
Can We Make Open Source More Sustainable? — Today, there’s a huge disconnect between the value OSS projects provide and the financial compensation they receive in return: TJ VanToll on the problematic economic model of OSS and a few options to make it more sustainable. Share your thoughts. Progress KendoReact sponsor |
5 Recommended Tools for Optimizing React Performance — A good overview touching on Chidume Nnamdi |
Ionic React Gets a New Landing Page — If you want to build mobile, Web and desktop apps with a mature framework, Ionic is worth checking out. Ionic React’s new landing page includes live demos, plus access to sample apps which you can edit and play with in your browser (such as this music player). Ionic |
Onboarding Thousands of Users with React Native at Coinbase — An interesting look back at why Coinbase went with React Native, the challenges they encountered, and how they used React Native to increase their overall development velocity. Ian Ownbey, Nick Cherry and Jacob Thornton |
💻 Jobs |
Find a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers. Vettery |
React + Rails Experts — Join Our Bootsrapped Remote Team — Aha! is primarily a Rails application, but we are using React to make excellent interactive experiences on top of Rails. Aha! |
📘 Tutorials and Stories |
How to 'Micro Frontend' with React — If you’ve considered looking into a micro frontends architecture (which is a bit controversial in some circles), this detailed post might provide a starting point. Robin Wieruch |
Building a CRUD App with React Hooks and the Context API — A tutorial focused on the basics of the more modern approaches to building React apps. Ishan Manandhar |
Creating Native Components That Accept React Native Subviews — Let’s say you have a native component you want to render React Native views inside.. how? “I’ll show you how to make a native component which provides bottom sheet functionality to React Native and lets you render React views inside of it.” Joe Redridge (Shopify) |
Faster CI/CD for All Your Software Projects Using Buildkite — See how Shopify scaled from 300 to 1500 engineers while keeping their build times under 5 minutes. Buildkite sponsor |
A Sneak Peek at React Router v6 William Le |
Setting up OAuth in a Next.js App with Passport and GitHub Danstan Onyango |
An Illustrated Introduction to React Native Testing — Rachel Nabors worked with Vojtech Novak to illustrate this introductory guide to testing for new React Native devs. Rachel adds that this “makes a great intro, regardless of your tech stack”. |
How to Show and Hide Elements in React — Explores how to render or not render elements in React despite that JSX doesn’t have Leigh Halliday |
Road to React: A Comprehensive (Paid) Book for React Beginners — I try to avoid linking to paid guides directly where possible, but Robin’s work has been widely celebrated in the community. (Note: This is not an ad!) Robin Wieruch |
🔧 Code and Tools |
React-Reverse-Portal 2.0: Build An Element Once, Move It Anywhere — Reverse portals do the opposite of React’s usual portals (which let you send the rendered output of an element to a DOM node of your choice) .. so you can pull rendered elements from elsewhere into a location within your React tree. HTTP Toolkit |
classnames-components: A CSS Class Component Wrapper for Faster Styling — This CodeSandbox example will help you get the idea. madewithlove |
Check Now to See If Your .TECH Domain Is Available .TECH DOMAINS sponsor |
react-teleporter: 'Teleport' React Components in the Same Tree — There’s a demo of it in action here. Greg Bergé |
react-svg-pan-zoom: Add Pan and Zoom Features to SVGs Christian Vadalà |