Issue 101  May 9th 2018

Building a progressive web app with React + Firestore

You need 4 things to make a progressive web app (also known as a PWA): HTTPS hosting, a service worker, a properly configured index.html file, and a web app manifest.json file. In this tutorial, Stelios Constantinides explains how to put all these together and use Google's NoSQL database Firestore to make a progressive web application.

truthlabs.com  

Build a React application with all the different flavors of state management

This is to serve as a Rosetta Stone of state management systems. A basic packing list app was built with these different options for state management:

• setState
• React 16.x Context
• Redux 
• MobX 
• unstated
• MobX-State-Tree 
• Apollo GraphQL with Amazon AppSync
• setState + react-automata 
• Freactal
• ReduxX

Get a feel for how each state management library works and which one works for you!

hackernoon.com  

Building a custom dropdown menu component for React

Sometimes adapting an existing component (like react-select) is the perfect solution for your project and other times it's too much work to adapt it to your specific requirements and styling. In such cases, building your own component might be in your best interest, considering the time that might be spent on the adaptation process. This article walks us through an approach to create a custom dropdown menu component in React.

logrocket.com  

Mixing component patterns by Kent C. Dodds

Kent C. Dodds teaches us how to make a component that supports Render Props, Component Injection, Compound Components, the Provider Pattern, and Higher Order Components! The idea isn’t necessarily to encourage that every component be implemented like this one, but more to show how you could use these patterns together to make an extremely flexible API for situations where that’s useful.

kentcdodds.com  

A Gentle Introduction to Prepack

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
• Uglify lets you write readable JavaScript code, and outputs "mangled" JavaScript that does the same thing, but contains fewer bytes.

Prepack is yet another tool that aims to compile JavaScript to equivalent JavaScript code. But unlike Babel or Uglify, Prepack isn't focused on new features or code size.

Instead, Prepack lets you write normal JavaScript code, and outputs equivalent JavaScript code that runs faster. Click the link to find out more!

github.com