--- title: "Taking an idea from Figma to final React app" publication: "React Status" issue: 263 published_at: "2021-11-03" canonical_url: "https://react.statuscode.com/issues/263" --- Plus a quick intro to Elm, and it's time to think about React Conf 2021. | #​263 — November 3, 2021 [Read on the Web](https://react.statuscode.com/issues/263) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/p02bncicr3axw3uuycpx.jpg)](https://conf.reactjs.org/) [React Conf 2021: It's Online, It's Free, and on December 8](https://conf.reactjs.org/) — 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](https://conf.reactjs.org/speakers), makes it an easy sell. Facebook [On Building an Effective Image Component for Next.js](https://web.dev/image-component/) — 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](https://nextjs.org/blog/next-12). Sohoni, Erickson, Castle [![\](https://copm.s3.amazonaws.com/eaaf31fd.png)](https://www.bugsnag.com/blog/errors-android-apps-high-memory-pressure?utm_source=react-status&utm_medium=cpc&utm_content=android-apps-memory-pressue-blog&utm_campaign=2021-11-dev-newsletters&utm_term=20211103) [How to Diagnose and Fix Errors Caused by Memory Pressure](https://www.bugsnag.com/blog/errors-android-apps-high-memory-pressure?utm_source=react-status&utm_medium=cpc&utm_content=android-apps-memory-pressue-blog&utm_campaign=2021-11-dev-newsletters&utm_term=20211103) — 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](https://www.bugsnag.com/blog/errors-android-apps-high-memory-pressure?utm_source=react-status&utm_medium=cpc&utm_content=android-apps-memory-pressue-blog&utm_campaign=2021-11-dev-newsletters&utm_term=20211103) 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](https://www.youtube.com/watch?v=_WlSlxNrNLI) — We received such a positive response to Ania's _Candy Crush_ tutorial in [262](https://react.statuscode.com/issues/262), we’re happy to feature another screencast: this time, taking an application from design in [Figma](https://www.figma.com) 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..)](https://www.tpjnorton.com/blog/posts/next-js-12-performance-test-builds-appear-to-be-slower-not-faster) — 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](https://blog.theodo.com/2021/10/intro-to-elm-for-react-devs/) — [Elm](https://elm-lang.org) 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](https://www.komoot.com/jobs/DCC51EA91D/senior-web-developer-node-reactjs) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.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)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — 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](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — 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](https://spin.atomicobject.com/2021/10/29/material-ui-components/) — [Material UI](https://mui.com/) 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](https://reactnative.dev/blog/2021/10/26/toward-hermes-being-the-default) — 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](https://omarelhawary.me/blog/file-based-routing-with-react-router) Omar Elhawary [How to Add a Contact Form to a React App with Netlify Forms](https://www.sitepoint.com/react-app-contact-form-netlify-forms/) Taminoturoko Briggs [Seven YouTube Channels for Learning React Techniques](https://t.co/grPV401Vi9?amp=1) Nick Ungerer [How to Generate Beautiful PDFs with React and Puppeteer](https://t.co/MV54iBFUT9?amp=1) Clément Marcilhacy 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/d9yrchfyxu3rtmtopow7.jpg)](https://github.com/ukrbublik/react-awesome-query-builder) [React Awesome Query Builder](https://github.com/ukrbublik/react-awesome-query-builder) — Taking inspiration from the [jQuery QueryBuilder](https://querybuilder.js.org) and employing [Ant Design](https://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](https://chakra-ui.com/) — 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](https://www.telerik.com/blogs/figma-developers?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-design-figma-kits&utm_content=blog-figma-developers) Progress KendoReact sponsor [timeago-react: Component to Format '_x_ time ago'-Style Strings](https://github.com/hustcc/timeago-react) — For example, if you provide a date/time that was three hours ago, you’d get ‘three hours ago.’ [Demos](https://git.hust.cc/timeago-react/). hustcc [TypeScript Next.js Starter](https://github.com/jpedroschmitz/typescript-nextjs-starter) — A brand new starter which includes many of the tools you will need for your next project including [ESLint](https://eslint.org), [Prettier](https://prettier.io), [Husky](https://typicode.github.io/husky/#/), [Commitizen](https://github.com/commitizen) and a number of others. João Pedro Schmitz [Reactive CRDT](https://github.com/YousefED/reactive-crdt) — Ever wonder how those collaborative editing apps work? There’s a pretty good chance it’s [CRDT](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) such as implemented in [Yjs](https://github.com/yjs/yjs). Open their [demo](https://sm8tt.csb.app) 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](https://github.com/aralroca/fragstore) Aral Roca Gomez ## ⚡️ Quick Bits: - [React Native SQLite 2](https://github.com/craftzdog/react-native-sqlite-2) — Despite the name, it's SQLite3 for your React Native applications. - [react-svg](https://github.com/tanem/react-svg) — Inject SVG into the DOM, as illustrated with these [live examples](https://github.com/tanem/react-svg#live-examples). - [React Upload Gallery](https://github.com/m-inan/react-upload-gallery) — Upload images and display them so they can be selected for further processing by your application. - [react-google-autocomplete](https://github.com/ErrorPro/react-google-autocomplete) — The functionality of the [Google Places](https://mapsplatform.google.com/maps-products/)widgets. - [react-native-pdf](https://github.com/wonday/react-native-pdf) — All the cross-platform PDF viewer functionality you're likely to need. This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom