#103 โ€” August 31, 2018

Read on the Web

react status

Using the React DevTools Profiler to Diagnose Performance Issues โ€” The most recent React DevTools provides a tab for profiling, and this article covers how Netlify used this profiler to fix a long-standing performance issue in their client-side code.

Shawn Wang (Netlify)

React Riot: A 48 Hour React-Oriented Online Hackathon โ€” Registration is open for the online React hackathon, taking place this year on September 15-16. A hackathon where you can stay in your pyjamas? Fab.

Hackbit

Data-Driven Guide to Level-Up Your Engineering Team ๐Ÿš€ โ€” We analyzed 10M+ commits and share how you can include data-driven insights to increase velocity. Empowering teams with deep git visibility to determine whatโ€™s working, celebrate victories and quickly identify risks. Request a free trial.

GitPrime sponsor

Material-UI 3: React Components That Implement Google's Material Design โ€” Version 3 is out bringing Babel 7 support and huge space savings in the icons package.

Material-UI

Reworm: The 'Simplest Way' to Manage State โ€” Another entrant into the state management game - check out the example code though, it is pretty straightforward.

Pedro Nauck

Pose 3.0: An Animation Library for React and React Native โ€” The popular declarative animation system now supports more UI events to trigger animations and has more elegant state management.

Popmotion

Code Surfer: A Component for Scrolling, Zooming and Highlighting Code Samples โ€” Particularly well suited to slidedecks created with something like mdx-deck.

Rodrigo Pombo

๐Ÿ’ป React Jobs

Build High Quality Open-Source at Uber (San Francisco) โ€” As a Web Platform engineer at Uber, you'll be building the foundation for all web applications at Uber and beyond.

Uber

Find A React Job Through Vettery โ€” Create a profile to connect with inspiring companies seeking React devs.

Vettery

๐Ÿ“˜ Tutorials

How to Create PDFs From React Components on the Client Side โ€” Uses html2canvas to convert HTML/DOM to SVG, then that into a PNG, then jsPDF to turn the PNG into a PDF. This results in a PDF thatโ€™s really just a big image, but there are other approaches if needed.

Shivek Khurana

How to Configure and Code Android In-App Purchases in React Native Apps

Tasos Maroudas

Build News and Activity Feeds in Days Instead of Months

Stream sponsor

Dynamic App Themes with CSS Variables and JavaScript

Mike Wilcox

Combining HOCs with the New React Context API

Francisco Varisco

React 16.3 Lifecycle Methods

Mert KรถseoฤŸlu

๐Ÿ”ง Code and Tools

Minimal Pie Chart: Versatile, Lightweight SVG Pie Charts for React โ€” Pass in your data and colors via props, and youโ€™re done. Demo here.

Andrea Carraro

React Checkbox Tree: A Component for a Tree of Checkboxes โ€” For selecting items within a filesystem or category tree, say.

Jake Zatecky

react-color-extractor: A Component to Extract Colors from Images

Nitin Tulswani

Wexond: A 'Web Browser' Built on Electron and React โ€” An interesting idea. Being Electron-based, itโ€™s using Chromium for rendering, but the UI/chrome is React and styled-components.

Wexond

Deploy & Scale Ultra-Fast React Apps With Predictable Costs โ€” Get $100 toward your next React project on DigitalOcean, the most developer-friendly cloud platform.

DigitalOcean sponsor

A Boilerplate for Creating a SPA in React, with a Full Server

The One Who Knocks

react-key-handler: A React Component to Handle Keyboard Events โ€” A reasonably old project but that has sprung back into life in the past month.

Ayrton De Craene