#185 — April 22, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Phelia: A Reactive Slack Application Framework — If you think Slack apps were all about text bots, think again.. you can now create apps complete with in-app UIs. Phelia brings the React approach to the task.

Max Chehab

Restoring React Reducer State Across Browser Sessions — An online learning platform used io-ts to store useReducer state server-side in order to resume things at a later session. An interesting approach and walkthrough of the other possible solutions even if you don’t need to do this yourself.

Execute Program

Learn Hardcore Functional Programming in JavaScript — Join Brian Lonsdorf and learn how to apply such concepts as pure functions, currying, composition, functors, monads and more.

Frontend Masters sponsor

Reinventing Hooks with React Easy State — You know it’s going to be interesting when an article starts: “This article defies a lot of trending patterns, like: React hooks…” This really pushes the React Easy State case hard.

Bertalan Miklos

React Refresh Support Coming in Next Create React App — Fast Refresh seems likely to usurp React Hot Loader’s crown at some point this year so it’s good to see this work taking place. If you’re interested in the difference, this SO question will help.. or if you want to play with Fast Refresh in CRA now, here’s a brief tutorial.

Facebook

ZEIT Is Now Vercel — You probably best know ZEIT as the creators and maintainers of the popular Next.js React framework.

Vercel

💻 Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Tutorials and Stories

Inside a Dev's Mind: How To Plan Out a UI Feature — A look at how to approach building a new frontend feature in a thoughtful, considered way, based on one developer’s own thought process. It’s neat to see how he’d approach the task of building a basic heatmap.

Johannes Kettmann

▶  React: The Basics in 20 Minutes — A well presented, up to date (yep, it covers hooks) tutorial that doesn’t hang around, whether you’re new to React or just want a refresher.

Devistry

The Quest for the Perfect Dark Mode”learn how to build the perfect Dark Mode for Gatsby.js. The fundamental strategy can also be used with Next.js or any SSR app.”

josh w comeau

Building Chat With React? Stream Chat Has You Covered — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat.

Stream sponsor

▶  How to Bring an Icon from Adobe Illustrator into React — A quick five minute screencast where SVG is the key.

Andrew Richards

React Performance Optimization with React.memo()

Felix Gerschau

▶  Building Static Sites with Next.js 9.3 and Prisma

Lee Robinson

🔧 Code and Tools

Snuggle: A 'Comfortable' Way to Layout Your Components — A way to create CSS-based ‘masonry’ style layouts of components. Live demos here.

Significa

Vidact: A Compiler to Convert React-like Apps to Vanilla JS — Compiles pure React-compatible JavaScript (JSX) to vanilla JavaScript with no virtual DOM.. think similar to Svelte, but without introducing a new syntax. A curious idea.

Mohamad Mohebifar

React Page Visibility 6.x: A Declarative, Isomorphic 'Page Visibility' HOC — React to your app being in the background (or invisible) so you can do things like conserve bandwidth or stop running animations, etc.

Gilad Peleg

react-notion: A Fast React Renderer for Notion Pages — For when you might want to use Notion as a sort of CMS for your blog, documentation or personal site (though you have to do a little extra work to actually work with Notion’s API).

Splitbee

Faster CI/CD for All Your Software Projects Using Buildkite

Buildkite sponsor

Codelift: A No Code GUI for Your React App — Details on how this works in this Tweet. Useful for apps already built and includes a Tailwind CSS visual inspector.

Eric Clemmons

react-svg-map: Components to Display Interactive SVG Maps

Victor Cazanave