#146 — July 10, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

▶  A Deep Dive into React-Redux — If you use Redux with React or are at least interested in doing this, this talk from React Next 2019 will be invaluable. It builds upon Mark’s 2018 article Idiomatic Redux: The History and Implementation of React-Redux and also covers the most recent developments with hooks and React-Redux 7.x. It’s only 30 minutes, but if you only have time for the slides, here they are.

Mark Erikson

Next.js 9 ReleasedNext.js is a very popular framework for build React apps (particularly static or server-side rendered ones). 9.0 introduces a variety of features:

  • Zero-config TypeScript support – rename any page or component from .js to .tsx and it Just Works™
  • File-based dynamic routing
  • Ability to mix SSR and static exporting within an app on a per-page basis
  • API routes – a new way to bring the Next.js experience to building API backends

ZEIT

New Course: 💡 Functional Light JavaScript by Kyle Simpson — Apply functional programming concepts in JavaScript to make your programs more readable and less error-prone. Tour through function purity, currying, immutability, recursion, list operations and concepts like monads and transduction.

Frontend Masters sponsor

React Native 0.60 Released — A bigger release for the popular native app framework than the version number gives away. The start screen has had a refresh, accessibility APIs have had numerous improvements, and if you target Android, you need to be aware of breaking changes as part of the switch to AndroidX.

Ryan Turner

How I Use Gatsby.js, the React Static Site GeneratorGatsby is a React-based static site generator and Robin explains how and why he uses it for his personal site. In short, speed, flexibility, and because it lets him get the benefit of having a static site but using the React he knows and loves.

Robin Wieruch

💻 Jobs

Frontend Senior Software Engineer & Architect at TrainingPeaks — Bring your engineering best practices to the brand helping athletes and coaches around the world analyze and plan their training.

TrainingPeaks

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials and Stories

▶  Getting Closure on React Hooks — One of those talks that tries to help you build a better mental model of concepts you’re already using by recreating them from scratch. This talk takes you right inside the depths of both closures and hooks and will leave you feeling like an expert in each.

Shawn Wang

React Fundamentals: Props vs State — What’s the difference between props and state in React? A brief comparison of each.

Kent C Dodds

📕 20 Patterns to Watch for in Engineering Teams — Actionable insights to help you debug your development process with data. Get your copy.

GitPrime sponsor

Ever Wondered Why You Can’t Use an Async Function/Promise Directly as a UseEffect Argument? — A minor detail, but this ‘limitation’ is by design.

Dan Abramov on Twitter

How React Icons Gives You Access to Hundreds of Open Source Icons — react-icons includes 9 icon libraries so you should find a few variations of anything you need.

William Le

How to Use Web Components in React

Robin Wieruch

Learn How to Build a Sales Dashboard with React

Progress KendoReact sponsor

🔧 Code and Tools

Styled Typography: style-components-Based Components for Managing Typographic Styles — Control font choices, sizes, weights, etc. in a very React feeling way.

Mike Engel

mdx-deck 2.5: MDX-Based Presentation Decks — Create presentations using MDX, a format that both uses Markdown syntax but can render React components with JSX.

Brent Jackson

A GitHub-Like Textarea with Auto-Complete — The autocomplete covers things like emojis or @mentions.

Webscope.io

React Numpad: 5.0 A Numeric Pad-Style Control for Numbers, Dates, and Times — You might need to see the demo to get the idea here.

Pietro Ghezzi

A React Persian Calendar Date Picker — Quite niche, but surely invaluable if you are targeting users from Iran? It looks really slick!

Kiarash Zarinmehr

react-native-tableview-simple: A React Native Component for UITableView Made with Pure CSS — A cross-platform component inspired by iOS’s TableView. Live example here.

Patrick Puritscher

react-awesome-spinners: Loading Spinners Built with styled-componentsDemos here.

Tien Pham