What’s new for React 18?
#258 — September 29, 2021
Generating an Image from a Rendered React Component — Rather than implementing separate logic for downloadable images, why not use this straightforward method of creating a JPG or PNG from the component which has already rendered? html2canvas does the heavy lifting here.
Robin Wieruch
▶ How React Got Traction, with Pete Hunt — The Swyx Mixtape is Shawn’s curated excerpts from other podcasts covering a broad range of subjects. In this episode (of just 11 minutes) his pick is a conversation between original React Core Team member Pete Hunt and Steve Krause from the Future of Coding podcast.
Shawn ‘Swyx’ Wang podcast
ButterCMS – #1 Rated Headless CMS. Melts into React Apps — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.
BUTTERCMS sponsor
What’s New in React 18? — A general roundup of what’s turning up in the next (not yet released) major version of React.
Yagmur Cetin Tas
Creating React Components from the Command Line with Agrippa — Last week in issue 257 we featured the Agrippa library. Now here’s a walkthrough of just how to use it.
Nathan Sebhastian
How to Build More Accessible React Apps — A thorough-yet-still-succinct guide to making your React apps accessible. Besides being simply the right thing to do, there are SEO benefits, an improved UX experience for all users and (in some locales) it will keep you on the right side of the law.
Joseph Mawa
‘My React App is Slow and I Don’t Know Why’ — When you encounter performance issues in your React apps, what performance monitoring tools are available? Three quick suggestions from Alex here.
Alex Sidorenko
Jobs
React Native Engineer at IGN (Remote) — IGN, leading publisher of video game & entertainment news, is seeking a full time engineer to join us and help build the next generation of mobile apps. Interested? We’d love to talk.
IGN
Senior Software Engineer, Full Stack — Forge unlocks liquidity & growth in the private market. Seeking collaborative SWEs to innovate & scale our products and platforms.
Forge
Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.
Hired
Fifty Solitaires: A Beginning — What started out as a bet for a case of beer many years ago morphed into a present day React programming challenge: to implement the game of Solitaire. There’s a catch though: it must implement 50 different sets of gameplay rules. The author invites us to follow along.
Holger Schmitz
A Quick Guide to Dropdown Menus With React
Progress KendoReact sponsor
7 Things You May Not Know About useState
Vladimir Klepov
Iskander Samatov
NativeScript vs React Native: Which One to Choose for Native Dev in 2021
Max Tsurbeliov
React is Declarative: What Does It Mean?
Alex Sidorenko
🛠 Code and Tools
React Spreadsheet: A Simple Component Implementation for the Pervasive UI Element — A pre-release version of the component which will still save considerable time over building one from scratch. Example here.
Iddan Aaronsohn
React Suite: v5.0 of a Popular Component Library — Major changes include enhanced accessibility, support for CSS variables, refactoring components to employ hooks and numerous other improvements along with a few breaking changes.
React Suite
react-three-flex: The CSS Flexbox for react-three-fiber — Based on Facebook’s Yoga cross-platform layout engine, this library lets you wrap 3D objects in <Box> tags within a <Flex> container.
Poimandres
Burdy: A New Contender in the Headless CMS Space — An apparently ‘clean sheet’ approach to headless CMS, which is Dockerized, AWS-ready, supports a variety of mainstream relational databases and is built with React and TypeScript.
Burdy Technologies
⚡️ Quick Bits:
react-native-flash-message — A flashbar and top notification alert utility.
react-async-hook — A hook for any async operation in React components.
react-native-scrollable-tabview — Make the most of that tiny screen.
react-device-detect — Rendering which reflects the device being used.
react-d3-cloud — A word cloud component for React based on d3-cloud.
