React Newsletter #208

17 React Native UI libraries, how to build bulletproof React components, and functional programming basics to master before learning React and Redux


Articles

The Algebraic Structure of Functions, illustrated using React components

Did you know there's an algebraic structure for functions? In this article, James Sinclair explains how we not only use functions to build algebraic structures, but that functions themselves have an algebraic structure.

17 React Native UI Libraries You Should Know in 2020

In this article, Serkan breaks down 2020's most popular and useful react native UI libraries. Libraries are examined by needs, documentation clarity, adequacy and usability.

How to build bulletproof React components

Shifting from an imperative to a declarative mindset is often challenging and can result in bugs or inefficiencies. In this post, Jesco Wuester dives deep into the declarative mindset (with lots of helpful examples) and demonstrates how you can use it to build unbreakable components.


Tutorials

Functional Programming Basics Before You Learn React and Redux

This is a two part series on the functional programming basics you should know before learning React and Redux.


Sponsor

React developers are in demand on Vettery

Vettery is an online hiring marketplace that's changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today.


Projects

Signum: open-source chat box component

This well-designed React component provides a free alternative to services like Intercom for collecting leads in a bottom right corner chat box.

react-letter ✉️

react-letter is a component that allows for an easy display of HTML e-mail content in your React projects with automatic sanitization. It targets Gmail rendering.

Virtual Pub Quiz 🍻

Bar trivia is one of many things that Covid-19 has taken away from us. Thankfully, Alex Brazier built a React app to make it easier to take part in a virtual version. You can play along with quizzes on streaming platforms like YouTube, or run your own quiz at home or over a video call.

Snake Cubed 🐍🐍🐍

This 3D snake game was built with react-three-fiber and is a fun project if you're interested in checking out that library. The game itself will give you 3x the amount of anxiety as the classic snake game on your old Nokia cell phone did (it's just math).

Shift - workout to music, rest to podcasts

This was part of last week's "what are you working on in quarantine" that I forgot to throw in. Shift allows you to easily toggle between a podcast and music while you're working out. You either just went "omg that's genius" or "why would I use that" - regardless, it'll be clear if it's for you or not.

firestore-fp: 🔥 Functional helpers for convenient work with Firestore.

firestore-fp is a collection of functional helpers for convenient work with Firestore. It's not strictly related to React, but many developers use Firestore within their React projects.


Videos

Build a Chrome Extension in React

This 20-minute video walks through how to build a basic Chrome extension in React that (when clicked) displays a small modal window on the current web page. You can also download the project's entire codebase on Github.

Dark Mode w/ Custom React Hooks using Local Storage 🌜

This 25-minute video from Leigh Halliday will walk you through creating a custom hook in React to store state in local storage, synchronize it across browser tabs, and have its value retrieved on page refresh. It also looks at a form input and demonstrates how you could use this technique to create a persistent Dark Mode on your website.


made with ❤️ by ui.dev