--- title: "Going from Figma to React, responsively" publication: "React Status" issue: 312 published_at: "2022-11-02" canonical_url: "https://react.statuscode.com/issues/312" --- Plus growing trees with React Arborist, Stripe's Markdown extension, and comparing Flutter with React Native. | #​312 — November 2, 2022 [Read on the Web](https://react.statuscode.com/issues/312) ✍️ If you missed [last week's issue](https://react.statuscode.com/issues/311), you'll want to catch up as it was a big one with Next.js 13 and _Turbopack_ getting announced. This week is a little quieter for big news, but there's still plenty to be getting on with.. :-) __ _Peter Cooper, your editor_ Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/remix/?utm_source=reactstatus&utm_medium=email&utm_content=remix-masthead) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/unwmdhzrna3fvbvqzltd.jpg)](https://remix.run/blog/remixing-shopify) [Remixing Shopify: The _Remix_ Project is Joining Shopify](https://remix.run/blog/remixing-shopify) — Shopify, the Canadian e-commerce platform, is well known as a _Ruby_ shop but also does a lot of front-end stuff, such as building the React-powered [Hydrogen framework.](https://shopify.engineering/how-we-built-hydrogen) It appears they see [Remix’s](https://remix.run/) full-stack approach as a good way forward for building Shopify apps, and they have a good reputation as a steward for such projects. Michael Jackson (Remix) If you're keen to see how the Hydrogen + Remix story will pan out, [there's a roadmap](https://hydrogen.shopify.dev/roadmap/) for their early 2023 releases which includes a Remix-enhanced Hydrogen 2.0. [![\](https://copm.s3.amazonaws.com/f8dc1d9c.jpg)](https://frontendmasters.com/courses/remix/?utm_source=reactstatus&utm_medium=email&utm_content=remix) [New Course: Remix Fundamentals](https://frontendmasters.com/courses/remix/?utm_source=reactstatus&utm_medium=email&utm_content=remix) — Join Kent C. Dodds for this detailed video course and get up to speed on all things Remix — the full stack web framework. This course covers nested routing, mutations, progressive enhancement, prefetching, error handling, and much more. Frontend Masters sponsor [Responsive Figma-to-React Components with Little Code in Amplify Studio](https://aws.amazon.com/blogs/mobile/new-build-responsive-figma-to-react-components-with-almost-no-code/) — If you’re using Figma in your interface design process, AWS’s _Amplify Studio_ now has some enhancements for creating responsive components through its so-called ‘Figma-to-Code’ process. Build variants and customize your breakpoints and _Amplify Studio_ generates the React components with your "design decisions built in." Amazon Web Services **IN BRIEF:** - [The Component Gallery](https://component.gallery/components/) is a handy index of components – not just for React, but predominantly so. - Can you create a Minecraft clone with React? [▶️ Apparently so!](https://www.youtube.com/watch?v=qpOZup_3P_A) – Daniel Bark shows us how over the course of 90 minutes. - Nikola Đuza has a high level overview of [what's new in Next.js 13](https://blog.appsignal.com/2022/11/02/whats-new-in-nextjs-13.html). [Flutter vs. React Native: Which is the Right Framework for You?](https://stackoverflow.blog/2022/10/31/comparing-frameworks-for-cross-platform-apps-flutter-vs-react-native/) — Even if you’re heavily into React, Google’s _Flutter_ has probably popped up on your radar if you want to build a cross-platform app upon a single codebase. Isaac compares these two popular and competing options. Isaac Lyman (Stack Overflow) [Code Coverage with Storybook Test Runner](https://storybook.js.org/blog/code-coverage-with-the-storybook-test-runner/) — Coverage reports can show you how much of your code is actually executed during testing and allow you to find untested edge cases – something you’ll definitely have as your app picks up more and more possible UI states. Storybook test runner now generates coverage reports to help with this and supports React, Svelte and Vue out of the box. Yann Braga (Storybook) [When Should You Build or Buy Geofencing & Location Infrastructure?](https://radar.com/blog/build-vs-buy-decision?utm_campaign=pr_global_mult_all_tech_20221102-react-status_build-vs-buy-blog_ru1&utm_medium=display&utm_source=cooperpress) Radar sponsor 🧊 [Creating 3D Graphics from React](https://blog.openreplay.com/implementing-3d-graphics-in-react/) — If you’ve been intending to incorporate 3D into your React project, but don’t know quite where to start, this is an ‘assumes nothing’ (or very little) approach to the subject. Favour Ogbonda (OpenReplay) [Creating a Nested Dropdown for Material UI (MUI)](https://www.robinwieruch.de/react-nested-dropdown-material-ui-mui/) — A follow up to Robin’s example from last week about [creating a _regular_dropdown.](https://www.robinwieruch.de/react-dropdown-material-ui-mui/) Robin Wieruch 🛠 Code and Tools [Markdoc 0.2: A Flexible, Markdown-Based Authoring Framework](https://markdoc.dev/) — Markdoc is an _extension_ of Markdown but with extra features you’ll need when working with blog posts or documentation you want to share. It’s used for Stripe’s public docs site, but you can bring it into your own systems. [GitHub repo](https://github.com/markdoc/markdoc). Stripe [React Arborist 2.0: A 'Tree View' Component](https://github.com/brimdata/react-arborist) — A robust, fully-featured tree component (_arbor_ is Latin for tree). There are [a couple of demos](https://react-arborist.netlify.app/) if you want to see it in action. Brim Data [Zigi: The Automated Workflow Assistant Built for Devs & Their Teams](https://www.zigi.ai/?utm_campaign=cooperpress&utm_medium=newsletter&utm_source=React-Status) Zigi sponsor [React 17, Bootstrap 5 and Material Design 2.0 UI KIT](https://mdbootstrap.com/docs/react/) — Brings together a variety of Bootstrap themes, templates and tools into a single ‘starter kit.’ [GitHub repo](https://github.com/mdbootstrap/mdb-react-ui-kit). MDBootstrap [react-json-to-csv](https://github.com/coston/react-json-to-csv) — A button component to easily generate CSV downloads of JSON data as illustrated in the [live demo](https://react-json-to-csv.coston.io). - [Docusaurus 2.2](https://docusaurus.io/blog/releases/2.2) ↳ Facebook's _roar-some_ docs / site builder. - [Reactime 16.0](https://github.com/open-source-labs/reactime/releases/tag/16.0.0) ↳ Chrome dev tool for time travel debugging. - [Wouter 2.8](https://github.com/molefrog/wouter) ↳ Tiny ~1.5KB router for React and Preact. - [React-Toastify 9.1](https://github.com/fkhadra/react-toastify/releases/tag/v9.1.0) ↳ Popup notifications without the nonsense. - [reactstrap 9.1.5](https://github.com/reactstrap/reactstrap) ↳ Stateless components for Bootstrap 5. - [react-number-format 5.1.1](https://github.com/s-yadav/react-number-format) ↳ Component to format numbers in an input / text. - [React Virtuoso 3.1.2](https://github.com/petyosi/react-virtuoso) ↳ Powerful virtual list component. Jobs [Doppler - A SecretOps Platform Built by Developers for Developers](https://www.doppler.com/) — Doppler’s looking for Sr. Full-Stack Engineers to help shape the future of security devtools. TypeScript, React, Express, and Go, [apply here](https://jobs.lever.co/doppler/06df9811-541e-483d-9abe-be01b1f8829f). Doppler [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 💝 A little bonus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kb9jfexve0yb36y0ch4h.jpg)](https://jsoncrack.com/) [JSON Crack: Visualize JSON Data in Graph Form](https://jsoncrack.com/) — Got JSON, want to view it? This is a neat tool for working with and displaying JSON data structures. You can [play with it online](https://jsoncrack.com/editor), embed the graphs into your site, or download them for further use. Aykut Saraç This issue was curated by Terence C. Gannon and Peter Cooper 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