An introduction to Prepack, using React with Firestore & a Material UI component libary
With so many state management libraries out there, sometimes it feels overwhelming to know which one is right for your project. The most common solution is Redux, but there are at least 10 other options out there! This week's newsletter has a tutorial that explores all the different state management options using the same project for each one, a packing list application. I hope that helps you narrow down your options!
Also included in this week's newsletter:
- Read about Prepack and how it's different from Babel & Uglify
- Build a progressive web app with React and Google's Firestore
- Learn how to build a custom reusable component when existing libraries aren't the right solution
- Check a simple charting library from the folks at Unsplash
Happy coding! 🤗
-Sophia Shoemaker
Tutorials
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.
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!
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.
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.
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!
Code

react-trend: Charts for React built by Unsplash
Graphing tools are often complex, abstract, and heavy. They require domain-specific knowledge, and a significant time investment.
While building rich data visualizations for an analytics app, this is a necessary cost. But what if you just need a spark line that shows a trend? Check out this library for simple graphs.
About

Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.