--- title: "How to structure a React app" publication: "React Status" issue: 245 published_at: "2021-06-30" canonical_url: "https://react.statuscode.com/issues/245" --- Plus more tutorials, releases, and libraries. | #​245 — June 30, 2021 [Read on the Web](https://react.statuscode.com/issues/245) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/wjovvbmqd7n5nhfwd1nk.jpg)](https://www.taniarascia.com/react-architecture-directory-structure/) [React Architecture: How to Structure and Organize a React Application](https://www.taniarascia.com/react-architecture-directory-structure/) — We've featured a variety of "how to structure React apps" pieces in the past, but it remains a perennially interesting topic as there really is no _one_ way. Tania is always fantastic at explaining things though, so we really like this one. Tania Rascia ▶[How Serverless Functions and Jamstack Can Power Up React Apps](https://www.youtube.com/watch?v=oAI-bpI65aY) — A 40-minute practical screencast-meets-talk where Jason Lengstorf codes a React app and a custom serverless API from scratch including deploying to production on Netlify. React All-Day [![\](https://copm.s3.amazonaws.com/73d0de2f.jpeg)](https://github.com/GetStream/react-native-samples/tree/main/projects/iMessageClone#imessage-clone?utm_source=react_status&utm_medium=promoted_newsletter&utm_content=developer&utm_campaign=06_30_2021) [iMessage Clone using Stream Chat and React Native](https://github.com/GetStream/react-native-samples/tree/main/projects/iMessageClone#imessage-clone?utm_source=react_status&utm_medium=promoted_newsletter&utm_content=developer&utm_campaign=06_30_2021) — Stream recently published an open source clone of the iMessage application built using v3 of stream-chat-react-native library. This project demonstrates the implementation of message search, swipeable channel list, message list, reactions etc, similar to that of iMessage. Stream sponsor [An Overview of React State Management Techniques in 2021](https://t.co/ZHuECT49Lm?amp=1) — There are a _lot_ of approaches to state management, so it is sometimes valuable to compare them and see which might be the best for you. This article compares, contrasts and proffers a rating for [Apollo’s Local Cache](https://www.apollographql.com/docs/react/local-state/local-state-management/), [Recoil](https://recoiljs.org/) and [Redux](https://redux.js.org/). Amo Moloko 📅 [React Meetup: The State of the React Ecosytem](https://www.reactjsmeetup.com/) — While we’re _still_ not quite back to full-on live events it seeems, this one has kind of that feel: a line-up of React observers and influencers opining as to where things stand today. It's online on Thursday, July 15. This Dot, Inc. [SolidJS Official Release: The Long Road to 1.0](https://dev.to/ryansolid/solidjs-official-release-the-long-road-to-1-0-4ldd) — Everyone can agree there’s no shortage of JavaScript frameworks, so what makes the first official release of [SolidJS](https://github.com/solidjs/solid) worth a closer look? Claims of “_all the flexibility of React and simple mental model of Svelte_” caught our attention. Ryan Carniato Jobs [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/senior-web-developer) — 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 [Senior Rails/React Dev (10hrs/week)](https://www.notion.so/meetedgar/Senior-Rails-React-Dev-10hrs-week-3a6a38c532a34c2cbe07797eb105a142) — Perfect gig to fit in around other projects - completely asynch, no standups - $150/hr MeetEdgar 📘 Tutorials and Stories [Image To Text Conversion With React and Tesseract.js](https://www.smashingmagazine.com/2021/06/image-text-conversion-react-tesseract-js-ocr/) — We like it when a library with a theoretical capability — in this case [Tesseract.js](https://tesseract.projectnaptha.com)’s ability to recognize **over 100 languages** and turn it into usable text — is shown off and we get to see its practical use in a real world scenario. Ayobami Ogundiran [Five Epic React Tips To Use Today](https://t.co/F66l22aTb0?amp=1) — A grab bag of ideas which claim to offer cleaner and more reliable code while making “_your development experience easier and overall more enjoyable_”. Reed Barger [See Why Developers Spend 34% of Their Time on Internal Apps](https://retool.com/blog/state-of-internal-tools-2021/?utm_source=cooperpress&utm_medium=referral&utm_campaign=soit_2021) Retool sponsor ▶[Building a Realtime Chat App with React, Node.js, and Socket.io](https://www.youtube.com/watch?v=HggSXt1Hzfk) — The end result looks a lot like Facebook Messenger. Be warned, though, this is a two hour video :-) Lama Dev [How to Use Throttle or Debounce With React Hook](https://t.co/brdDrKHCV6?amp=1) — Do you have some code you only want to run a given number of times in a given period of time? If so, you want to throttle it. Only want that code to run after a specified delay? Then debounce it. John Au-Yeung [Read and Render Markdown Files with Next.js and Nx](https://juristr.com/blog/2021/06/read-render-markdown-nextjs-and-nx/) — Part of a series about creating your own blog with Nx, Next.js and Tailwind. Juri Strumpflohner [Comprehensive Guide: Proper Behaviour Testing in React With Enzyme and Jest](https://t.co/FB6CUx1ZQu?amp=1) Chak Shun Yu 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,e_tint/cdmwfd0li3xfxx1pkzom.jpg)](https://github.com/bbc/react-transcript-editor) [React Transcript Editor: Faster and Easier Audio/Video Transcript Creation](https://github.com/bbc/react-transcript-editor) — As content creation explodes, the need for tools to make its production more efficient is unprecedented. In this case, creating accurate and timely transcripts. The [demo](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default) is pretty neat. BBC [Stepzilla 7.0: A React Multi-Step/Wizard Component](https://github.com/newbreedofgeek/react-stepzilla) — Provide Stepzilla with existing React components and it’ll let you take users through them in a step by step manner, akin to the common ‘wizard’ UI pattern. It’s been around a long time but now with version 7 has finally introduced hooks support. Mark Paul [Creating a Dashboard? Get Inspiration from This Sleek Demo App](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-coffee-dashboard-app&utm_content=sponsored-link) — This React dashboard combines a data grid, scheduler, charts & more into one sleek app. [Check out the code on GitHub](https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-coffee-dashboard-app&utm_content=sponsored-link%20). Progress KendoReact sponsor [Nanostores: A 152 Byte State Manager for React/Preact/Vue/Svelte with Many Atomic Tree-Shakable Stores](https://github.com/ai/nanostores) Andrey Sitnik [React Cool Form](https://github.com/wellyshen/react-cool-form) — The latest in Welly Shen’s _Cool_ series: this time around, he turns his considerable talent on creating and management forms. Welly Shen [react-native-keyboard-tools](https://github.com/Faradey27/react-native-keyboard-tools) — Use _KeyboardAwareScrollView_ to automatically scroll to the focused TextInput and _useMaskedTextInput_ to ensure the correct characters are input. Andrii Tiertyshnyi [react-native-mmkv-storage](https://github.com/ammarahm-ed/react-native-mmkv-storage) — [Tencent](https://en.wikipedia.org/wiki/Tencent)’s highly efficient [MMKV](https://github.com/Tencent/MMKV) key-value database framework married to React Native. Ammar Ahmed [Photonix: Roll Your Own ML-Enabled Photo Server](https://github.com/photonixapp/photonix) — Implement a pretty decent photo management server on your own hardware. You’ll even get object and color recognition, location awareness and other features enabled by [ML](https://en.wikipedia.org/wiki/Machine_learning). Try the [live demo](https://demo.photonix.org). Photonix **⚡️ Quick Bits:** Interesting projects which you may have missed: - [use-nft](https://github.com/spectrexyz/use-nft) — Access the metadata of any [NFT](https://en.wikipedia.org/wiki/Non-fungible_token). - [use-onclickoutside](https://github.com/Andarist/use-onclickoutside) — Listen for clicks outside an element. - [react-responsive-modal](https://github.com/pradel/react-responsive-modal) — Fully featured modal dialogue box. - [react-native-zoomable-view](https://github.com/DuDigital/react-native-zoomable-view) — Gesture-based photo manipulation. - [grommet-icons](https://github.com/grommet/grommet-icons) — Hundreds of easily customizable icons. 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