React Newsletter #206

React Native v0.62.0 release, building a real-time chat app with React and Firebase, building a COVID-19 dashboard & map app


[What are you working on?]

If the covid-19 quarantine has caused you to start or revisit a React project in recent weeks, we would love to see it! Feel free to respond to this email with a link to what you're working on, or tweet us @reactnewsletter. We'll feature some projects here in the newsletter and share others on Twitter as we try to spread a little positivity in these challenging times.


News

React Native v0.62.0 Release 🎉

Congratulations to everyone who contributed to make this release possible despite all of the challenges posed by the pandemic. Updates include the following:

  • Flipper support
  • A new LogBox experience
  • Better dark mode support

Tutorials

Building a Real-Time Chat App with React and Firebase

In this tutorial, Deven Rathore covers key concepts for authenticating a user with Firebase in a real-time chat application (built in React). He walks through how to integrate third-party auth providers (e.g. Google, Twitter and GitHub) and demonstrates how to store user chat data in the Firebase Realtime Database.

Building a COVID-19 Dashboard & Map App

This timely tutorial demonstrates how to build a mapping app using React, Gatsby and Leaflet that maps the number of confirmed COVID-19 cases around the world. The app pulls country and case data from the NovelCOVID public API.


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

Beep Boop! Announcing the use-sound React hook

Josh Comeau wants the web to be louder. You might think he's crazy, but in case you don't, he just released a React hook that lets you play with sound effects. Use-sound allows you to load an audio sprite and split it into many individual sounds, tweak playback speeds, and more.

react-coding-challenges

Alex Gurr (head of technology at Shootsa) created these two coding challenges to be part of a remote interview process for React developers. They're designed to take 15-30 minutes and are geared towards the beginner-intermediate level. Could be a helpful way to test your skills for the early React interview phase.

react-cool-portal

This is a React hook for Portals. It helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc

react-curved-arrow

Simple, yet effective. Fancy curvy arrows for your React project. Great for tutorials and product tours.

Tako — Github File Tree

Tako is a Chrome extension that replaces the default Github repository file list with an expandable file tree that makes it faster to explore Github repos. The sales pitch: "Never wait for a full page to refresh ever again, all contents are prefetched intelligently, so it's blazingly fast!


Videos

Instagram's Pinch-to-Zoom Effect in React Native

This 35-minute video is part of William Candillon's larger YouTube series, "Can it be done in React Native?", where he attempts to recreate core features of popular apps using React Native. In this video, he'll walk you through how to recreate the pinch-to-zoom effect used by Instagram (and many others).


made with ❤️ by ui.dev