Trying to use React Native ‘everywhere’

#​256 — September 15, 2021

Read on the Web

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

CSS Variables for React Devs — An updated piece, and a solid look at how to use CSS variables (custom properties) in your next project.

Josh W Comeau

Compound Components In React — Compound components are the building blocks of design systems. If you have the development of the latter in your future, the tutorial will get you up and running on this advanced React pattern.

Ichoku Chinonso

ButterCMS – #1 Rated Headless CMS. Melts into React Apps — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

BUTTERCMS sponsor

Running React Native Everywhere — The first part of an in-depth, multi-part guide on running a common React Native code base not only on the iOS and Android mobile platforms—as one might expect—but also on macOS, Windows and as a web app, as a browser extension, as well as within Electron.

Matteo Mazzarolo

React 18 Watch: New startTransition API Keeps Apps Responsive During Large Screen Updates — Up until the imminent React 18, all updates were considered ‘urgent’. startTransition enables the prioritization of updates so truly urgent ones get handled right away and everything else gets dealt with at a lower priority.

Chetan Gawai

Relay v12 — The latest release of Facebook’s mature GraphQL client is out. In addition to run-time optimization, the new release includes improvements to React integration as well as logger, type-safety, and documentation updates. However, it also includes some breaking changes: in particular Abstract Type Refinement has changed and there are also changes to live query behaviour.

Facebook

Graceful Error Handling Using Error Boundaries in React — A runtime error in React can result in a blank screen and a bewildered user. Error Boundaries enable the error to be caught and a more meaningful, fallback UI displayed instead.

Amit Merchant

Jobs

Senior ReactJS+Rails Engineer (x/f/m) Remote or Berlin, Germany — Join us to transform healthcare and have a positive impact on the lives of millions of patients and practitioners alike.

Doctolib

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

Migrating from Create React App — A guide on how to transition from an existing non-ejected Create React App project to Next.js – an option that will open up a lot more possibilities such as API routes, incremental static regeneration, and better data fetching options.

Vercel

Implementing Material Design’s Floating Labels“It’s a fun little exercise and it’s not actually too difficult,” Max reassures us. Or you can just straight to the CodeSandbox.

Max Schmitt

Beyond onClick: Handling Events in React

Lightstep sponsor

▶  Scaling WordPress with Next.js

Colby Fayock

useState in React: A Brief Guide

Rohit Kumar Singh

Using SWR React Hooks with Next.js’ Incremental Static Regeneration

Sam Poder

Make Real-Time APIs with Node.js and React Using Socket.io

Kuldeep Patel

🛠 Code and Tools

react-date-range 1.4.0: Component for Selecting Dates and Date Ranges — An intuitive component for picking date ranges as shown in their demo.

Hypeserver

mdb-react-ui-kit — It’s the popular Material Design design system, but for Bootstrap 5 and React 17. It comes in both a free and fee-based Pro version. There’s plenty of demos here and a decent tutorial to check out too.

MDBootstrap

react-p5-wrapper — Enables p5.js sketches to be incorporated into your React app.

James Robb

testing-react — Recycle your Storybook stories into React tests.

Storybook

plyr-react — An accessible and customizable player component for both video and audio as well as YouTube and Vimeo-hosted content.

Chintan Prajapati

⚡️ Quick Bits:

react-native-camera — A React Native camera component including support for bar code scanning.

react-native-shadow-2 — A recreated and extended version of the long-dormant react-native-shadow component for generating SVG shadows.

React Password Checklist — Ensure passwords meet specific, configurable criteria.

unplugin-icons — Access any of 100+ icon sets as and when you need them.

Leave a Reply

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