#212 — October 28, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Create React App 4.0 Released — It has been well over a year since the last major release of create-react-app, a popular way to quickly spin up a new React app, and it seems like it was worth the wait!

We get support for Fast Refresh (the modern alternative to hot reloading) along with React 17 and TypeScript 4 support. There's also support for ESLint 7, Jest 26 and Web Vitals as well as improvements to PWA/Workbox.

Facebook React Team

💥 AppSignal's Brand New 5-In-1 Application Monitoring for Node.js — We're officially launching the 1.0 version of @appsignal/node.js. It’s ready for use in production apps and includes out-of-the-box support for Node.js Core, Express, Next.js, Apollo Server and node-postgres. When the bits hit the fan, use AppSignal.

AppSignal sponsor

Next.js 10 Released: Image Optimization, Internationalized Routing, React 17 Support — Similarly, it was worth the wait for the next major release of Next.js. It also has support for Analytics (incorporating Web Vitals) as well as Next.js Commerce which is a collaboration with BigCommerce.

Vercel

Time-Traveling State with Reactime 6.0 — So much of debugging state management issues relates to not only knowing what the state is, it also has a lot to do with what the state was leading up to it. Go back in time with Reactime.

Vincent Nguyen

Understanding When to Use useMemo — Max picks up on Knuth's often misunderstood "premature optimization is the root of all evil" quote but uses it to point at the misuse of useMemo before it’s really necessary.

Max Rozen

💻 Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

🧑‍💻 Interested in running a job listing in React Status? There's more info here.

🛠 Tutorials, Articles & Stories

What’s New in Webpack 5: And Should You Rush to Upgrade? — A valuable, candid assessment of what’s to be gained with the latest major release of webpack. While the benefits mean you’ll have to get there eventually, you will also want to proceed prudentially, particularly if you make heavy use of plugins which may not yet be supported.

Malcolm Laing

The 5 Questions Every Unit Test Must Answer: React Wednesdays Interview — Eric Elliott dropped a masterclass in testing at React Wednesdays, a weekly Twitch show. Neatly summarized in this blog.

Progress KendoReact sponsor

How to Create a Reddit Clone Using React and Firebase — If you think that Reddit is more heat than light much of the time, maybe you should consider creating your own version of it? This one makes novel use of Firebase as a backend to create something very simple.

Nirmalya Ghosh

React Form Validation with Formik and Yup — React has pretty decent form handling baked right in, so why is it necessary to also incorporate Formik and Yup? In short, simpler and easier development of bulletproof forms.

Nefe Emadamerho-Atori

Wouter: A Minimalist Alternative to React Router — Not a day goes by when we don’t encounter the 80/20 rule: deliver the 20% which meets 80% of the need. If you think React Router might benefit from this approach, then you want to give Wouter a try for your next React/Preact project. It’s the 20% you need.

Nathan Sebhastian

How to Create a Camera App with Expo and React NativeExpo is getting quite a bit of attention in the React Native community. That said, richly-llustrated concrete examples of how to use it are always welcome particularly when accompanied by source code.

Said Hayani

How to Build Your Own Codepen-Style Online Code Editor App
Moshe Kerbel

Pro Tips for Setting Up a React Native Project in 2020
Tamás Menyhárt

🛠 Code and Tools

supported by Okta

React-Chrono: A Beautiful and Flexible Timeline Component — We count amongst our number those who are history buffs, and they don’t think there is any better way of conveying that information than a timeline. Render in 3 unique modes (vertical/horizontal, tree, or auto-playing slideshow) and you get keyboard navigation support too.

Prabhu Murthy

Frontity: React Meets WordPress — According to one source, WordPress powers a whopping 39% of the world’s websites. So how about creating React-based Wordpress themes with this?

Frontity

Building Chat With React? Stream Chat Has You Covered

Stream sponsor

Talkr: Super Small i18n Provider — For internationalizing your app, here’s everything you need and nothing you don’t. It even features auto-detection of browser language and plural rules.

DoneDeal0

Vime: Customizable, Extensible, Accessible and Framework Agnostic Media Player — If you want better control over the media viewing experience than, say, Vimeo or YouTube are willing to provide, you can put Vime in the middle and you’ll have all the control you could possibly want. Comes complete with React-specific bindings.

Vime

React JSX Highcharts: Highcharts Built with Proper React ComponentsHighcharts is a popular and powerful charting library (check out their demo). But now, it’s also tightly integrated with React as you can see in this example.

Will Hawker