New releases of Next.js and Gatsby

#​262 — October 27, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

The New React Docs, In Progress and Now In Beta — The React docs are being entirely rewritten to use hooks rather than classes, introduce illustrations, and generally bring them up to modern speed. This currently-in-beta version also includes interactive examples and challenges with the objective of improving the learning experience.

React Core Team

Next.js 12 Released — The popular Node.js + React development framework takes its biggest step forward yet with an array of improvements including beta support for middleware, React 18 support, native ES module support, a Rust-powered compiler for 5x faster builds, and more.

The Vercel Team

Power Up Your JavaScript with Functional Programming — Learn core functional JS programming techniques by coding with pure functions, learning recursion, higher-order functions, closures, currying, function composition, and more.

Frontend Masters sponsor

What’s New in Gatsby 4 (Now Fully Released) — Gatsby is a React-based open source framework and v4 introduces new content rendering methods, new build and deployments architecture, new CMS APIs, and more.

Jeff James (Gatsby)

The CSS-in-React Landscape — There is no specific, officially sanctioned styling solution for React, so you’ll likely end up choosing one of the libraries covered in this survey of candidates.

Chris Coyier

▶  Implementing a ‘Candy Crush’ Game with React — The latest of Ania’s no-nonsense all-about-the-code screencasts walking through the creation of a simple puzzle game. While Candy Crush likely doesn’t need to be re-invented, you can apply the skills learned to a variety of game scenarios.

Ania Kubów

Jobs

Sr. Frontend-Focused Engineer (Remote in Germany) — You love developing digital products that solve true customer problems? Join us to reinvent business insurances. #React #GraphQL

Finanzchef24

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

A React Rendering Cheat Sheet — When does a component re-render? What can cause such re-renders, and how can unnecessary ones be prevented?

Alex Sidorenko

Migrating from React Redux to React QueryReact Query is rapidly gaining in popularity, which might be because developers are discovering it’s quicker and easier to use than Redux.

Robert Hofmann

How to Create CSS Custom Properties That Dynamically Update with React & JavaScript

Colby Fayock

▶  A First Introduction to Test Driven Development with React

Coding With Adam

How to Use useRef Correctly with Examples

Ammar Ahmed

🛠 Code and Tools

react-chrono: A Modern Timeline Component for React — Render a themeable timeline in 3 unique modes (vertical/horizontal, tree, or auto-playing slideshow). Also includes keyboard navigation support. Try it here.

Prabhu Murthy

React Native Testing Library 8.0 — Now in it’s eighth major release, RNTL will help create maintainable tests for your React Native projects.

Callstack

Blitz.js: Rails-Like Framework for Monolithic, Full-Stack React Apps — A ‘batteries included’ framework built on Next.js that boasts a ‘zero API’ approach eliminating the need for a REST/GraphQL API for the data layer.

Brandon Bayer and Blitz.js Contributors

Make Large-Scale Changes 75% Faster with Batch Changes

Sourcegraph sponsor

Rowy: A Grid Component for Google Cloud Platform — Want an Airtable-like experience with integrations to SendGrid, Twilio and Slack? GCP only due to using Firestore as its real time data source.

Rowy

The Matchbox Design System and Component Library — The design system and UI that powers the SparkPost bulk email management platform.

SparkPost

Rakkas: An Alternative to Next.js? — A developer experience akin to Next.js with features inspired by Svelte.

rakkasjs

⚡️ Quick Bits:

Splitter — Splits views into resizable VS Code-inspired panels.

react-simple-image-slider — Configurable, carousel-like functionality as illustrated in their interactive demo.

React Google Analytics 4 — Integrate with the latest version of the ubiquitous web analytics platform.

ReactDataGrid — A data grid built specifically with React in mind.

react-native-svg-app-icon — Generate all the application launcher icons for your projects from a single SVG file.

Leave a Reply

Your email address will not be published. Required fields are marked *