Taking an idea from Figma to final React app

#​263 — November 3, 2021

Read on the Web

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

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.

Facebook

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 DevelopersElm 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 ComponentsMaterial 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.

Leave a Reply

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