Trying to use React Native ‘everywhere’
#256 — September 15, 2021
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.
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.
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.
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.
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.
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.
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.
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.
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.
Rohit Kumar Singh
🛠 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.
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.
plyr-react — An accessible and customizable player component for both video and audio as well as YouTube and Vimeo-hosted content.
⚡️ Quick Bits:
react-native-camera — A React Native camera component including support for bar code scanning.
React Password Checklist — Ensure passwords meet specific, configurable criteria.
unplugin-icons — Access any of 100+ icon sets as and when you need them.