Taking an idea from Figma to final React app
#263 — November 3, 2021
React Conf 2021: It’s Online, It’s Free, and on December 8 — With the ongoing realities of COVID and travel restrictions, React Conf heads online and takes place on December 8 and 6PM GMT (with a ‘replay event’ on December 9 at 6:30AM GMT). No hotels or expensive tickets needed, and a great lineup of speakers, makes it an easy sell.
On Building an Effective Image Component for Next.js — The story of an out-of-the-box solution to optimize images for Next.js. It optimizes loading, compression and responsiveness. Now with AVIF support in Next.js 12.
Sohoni, Erickson, Castle
How to Diagnose and Fix Errors Caused by Memory Pressure — Understanding the memory pressure leading up to a crash and the device’s overall memory health is critical for debugging with speed and precision. Read our blog to learn how to prioritize and fix Android errors caused by memory pressure in React Native apps.
Bugsnag sponsor
▶ From Figma to GitHub Using Anima — We received such a positive response to Ania’s Candy Crush tutorial in 262, we’re happy to feature another screencast: this time, taking an application from design in Figma all the way through to a functional React app.
Ania Kubów
A Next.js 12 Perf Test: Builds Slower, Not Faster? (On Windows, At Least..) — Last week we featured the Next.js 12 release which boasted improved build speeds. Tom’s initial experiments show a confused picture, but community speculation is this issue is Windows specific.
Tom Norton
A Quick Intro to Elm for React Developers — Elm is a functional language aimed at frontend development work (and which has many ardent fans!) but it’s conceptually different enough to what you might be used to working with that an introductory post like this could be useful.
Angus Findlay
Jobs
Senior Web Developer (Node/ReactJS) – Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.
Komoot
React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team
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
How to Customize Styles in Material UI Components — Material UI provides a set of robust components for use in React apps, but what about when you want to tweak them a bit?
Lauren Ebels
Toward Hermes Being the Default JS Engine in React Native — Facebook (or is that Meta now?) is taking steps to making Hermes, its mobile-focused JS engine, the default engine for React Native.
Xuan Huang
File-Based Routing with React Router
Omar Elhawary
How to Add a Contact Form to a React App with Netlify Forms
Taminoturoko Briggs
Seven YouTube Channels for Learning React Techniques
Nick Ungerer
How to Generate Beautiful PDFs with React and Puppeteer
Clément Marcilhacy
🛠 Code and Tools
React Awesome Query Builder — Taking inspiration from the jQuery QueryBuilder and employing Ant Design for its widgets, this component can make building complex logical queries or searches easier for your app’s users.
Denis Oblogin
Chakra UI: A Modular Component Library for React — A set of WAI-ARIA-enabled, themeable components for building React apps. v1 upgrades to React 17 and Emotion 11, there’s also now a component theming API.
chakra ui
Figma for Developers: Why It’s a Good Idea to Get to Know This Tool
Progress KendoReact sponsor
timeago-react: Component to Format ‘xxx time ago’-Style Strings — For example, if you provide a date/time that was three hours ago, you’d get ‘three hours ago.’ Demos.
hustcc
TypeScript Next.js Starter — A brand new starter which includes many of the tools you will need for your next project including ESLint, Prettier, Husky, Commitizen and a number of others.
João Pedro Schmitz
Reactive CRDT — Ever wonder how those collaborative editing apps work? There’s a pretty good chance it’s CRDT such as implemented in Yjs. Open their demo in two browser windows and add something to the to-do list.
Yousef El-Dardiry
Fragstore: A Tiny (~800 Bytes) and Simple Library to Manage React State
Aral Roca Gomez
⚡️ Quick Bits:
React Native SQLite 2 — Despite the name, it’s SQLite3 for your React Native applications.
react-svg — Inject SVG into the DOM, as illustrated with these live examples.
React Upload Gallery — Upload images and display them so they can be selected for further processing by your application.
react-google-autocomplete — The functionality of the Google Places widgets.
react-native-pdf — All the cross-platform PDF viewer functionality you’re likely to need.