--- title: "Making videos, slides, or terminal UIs with React" publication: "React Status" issue: 225 published_at: "2021-02-10" canonical_url: "https://react.statuscode.com/issues/225" --- Plus more on why TypeScript is such a good fit with React. | #225 — February 10, 2021 [Read on the Web](https://react.statuscode.com/issues/225) 👋 While we all know React fits many front-end Web interface _and_ native app use cases well, people are rapidly taking React into other places too, such as video, motion graphics, slideshows, and even terminal based UI development — we're looking at a few projects in these areas in this issue :-) __ _Peter Cooper and Terence C Gannon, your editors_ ![](https://res.cloudinary.com/cpress/image/upload/e_grayscale,w_150,h_170,c_pad,g_south/xrupigpv8kyjqotfdgy8.jpg) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/d3bqgnwzt4e5hae6upwu.jpg)](https://www.remotion.dev/) [Remotion: Create Videos with React](https://www.remotion.dev/) — This new tool ([version 1.1 just dropped](https://www.remotion.dev/blog/1-1/)) merges the video creation process with software development concepts like source code control. _You don’t create videos, you program them_. No demo, but it does have a [trailer](https://www.youtube.com/watch?v=1UU_GEQuolI). We've also been impressed by this [18-minute screencast](https://www.youtube.com/watch?v=szh2Qgo9SVE) showing off _exactly_ how to make a video production of your own with it. [GitHub repo](https://github.com/JonnyBurger/remotion). Jonny Burger [Fusuma: Create Presentation Slides with Markdown](https://github.com/hiroppy/fusuma) — Similarly, this library enables the generation of presentation-quality slides with customizable styles using simple Markdown as source code. Comes complete with the tools required to support live presentations. Yuta Hiroto [![\](https://copm.s3.amazonaws.com/b6a37ea9.jpg)](https://frontendmasters.com/courses/xstate-react/?utm_source=reactstatus&utm_medium=email&utm_campaign=xstate) [State Modeling in React with XState](https://frontendmasters.com/courses/xstate-react/?utm_source=reactstatus&utm_medium=email&utm_campaign=xstate) — Microsoft’s David Khourshid shares how to use XState to manage both local and global component states in React. Learn more about state machines, types, model-based testing, and more in this detailed course. Frontend Masters sponsor [Double Your React Coding Speed With This Simple Trick](https://t.co/inbXwkcK6h?amp=1) — A well thought out methodology for breaking down code into reusable building blocks, which the author asserts has a dramatic, positive impact on productivity. Aleksey Kozin [React Blessed: A Custom Renderer for Terminal Interfaces](https://github.com/Yomguithereal/react-blessed) — [blessed](https://github.com/chjj/blessed) is a Node.js library that makes it possible to create elaborate "terminal user interfaces" (often called TUIs, nowadays) and React Blessed takes it a step further by being able to declare such interfaces with React. Guillaume Plique ▶[All the Ways to Generate a Next.js Site](https://www.youtube.com/watch?v=-ffooJCx37c) — The affable and popular Senior Developer Advocate for [DigitalOcean](https://www.digitalocean.com) walks through a brief primer on [Next.js](https://nextjs.org) for the generation of static sites serving pure HTML as well as server-side rendering. Chris Sev 💻 Jobs [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=react) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find Your Next Job Through 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 📘 Tutorials and Stories [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yhhp0fvj484zfuodknnz.jpg)](https://altrim.io/posts/schedule-recurring-reminders-with-native-notifications) [Schedule Recurring Reminders with Native Notifications](https://altrim.io/posts/schedule-recurring-reminders-with-native-notifications) — Recurring reminders can be a challenge to implement. This article succinctly traces the full arc of development from their design concepts to finished code. Altrim Beqiri ▶[A Soft Introduction to Remotion](https://www.youtube.com/watch?v=szh2Qgo9SVE) — In case you missed it (above), Remotion provides a way to create videos and motion graphics from React and this is a fantastic introduction to the practicalities of actually using it. Alex Anderson [Check Out the February Line Up for React Wednesdays on Twitch](https://www.telerik.com/blogs/upcoming-react-wednesdays-episodes?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-february-line-up-react-wednesdays&utm_content=sponsored-link) — Expect chats on React in the enterprise, a React Query demo from Tanner Linsley, and more. [Add it to your calendar](https://www.telerik.com/blogs/upcoming-react-wednesdays-episodes?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-february-line-up-react-wednesdays&utm_content=sponsored-link%20). Progress KendoReact sponsor [React Hooks Retrospective: Event Driven Async Hooks](https://orizens.com/blog/react-hooks-retrospective-event-driven-async-hooks/) — According to the author, _reusing_ Hooks is as important as designing them in the first place. He illustrates this by building a sample chat panel app with just three custom Hooks. Oren Farhi [How TypeScript Helps You Build Better React Apps](https://felixgerschau.com/react-typescript/) — The first part of a future, multi-part series which holds the promise of being the authoritative guide on using [TypeScript](https://www.typescriptlang.org) in combination with React. It kicks off with a basic definition along with advantages and disadvantages. Felix Gerschau [A Better Way to Structure React Projects](https://www.freecodecamp.org/news/a-better-way-to-structure-react-projects/) — A folder-by-folder, opinionated recommendation along with supporting arguments for how to setup your next React project. Akash Joshi 🛠 Code and Tools supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/auxlkgitpdppqcwbiwnj.jpg)](https://spotter-application.github.io/getspotterapp/) [Spotter: An Alfred/Spotlight-Style Launcher App](https://spotter-application.github.io/getspotterapp/) — As a React Native developer you might be more interested in the [GitHub repo](https://github.com/spotter-application/spotter). It’s GPL licensed and built on React Native. Denis and Contributors [React Tabs 3.2: An Accessible and Easy Tab Component](https://github.com/reactjs/react-tabs) — A solid implementation of the ubiquitous tab component complete with concise, interactive [demos](https://reactcommunity.org/react-tabs/). React Community [React Leaflet 3.1.0: React Components for Leaflet Maps](https://react-leaflet.js.org/) — There’s a live demo right on the homepage if you want to see how it works. [GitHub repo](https://github.com/PaulLeCam/react-leaflet). Paul Le Cam [The Ultimate Guide to Cardinality for Observability](https://go.lightstep.com/register-guide-to-cardinality-co21.html?utm_campaign=react&utm_source=cooper&utm_medium=Email) Lightstep sponsor [Urban Bot: Write Once for Many Platforms](https://github.com/urban-bot/urban-bot) — Create your chatbot once as a series of React components, then run it on multiple messenger platforms: Telegram, Slack and Facebook currently, with Discord, WhatsApp, VK and Viber currently in the works. Urban Bot [Fluent Reader: A Modern Desktop RSS Reader](https://github.com/yang991178/fluent-reader) — If you’re shopping for a new RSS reader, this is a good candidate to use as-is. It’s available from both the [Microsoft](https://www.microsoft.com/store/apps/9P71FC94LRH8?cid=github) and [Apple](https://apps.apple.com/app/id1520907427) app stores. But if you’re interested in a peek under the covers as to how it’s built, here’s the source. Haoyuan Liu [Five React Native Libraries You Might Have Missed](https://medium.com/javascript-in-plain-english/5-react-native-libraries-you-might-have-missed-16fb45d64614) — Some useful React Native libraries to be sure to check out for your next mobile app project. Fabian Lee [Quarkly: A New Tool for Webmasters, Designers and Developers](https://quarkly.io/) — Making it easier for designers and developers to collaborate is never a bad thing and this new commercial tool aims to plug the gap. Their [launch video](https://www.youtube.com/watch?v=Rzgdz1mbLbE) is a good place to start. Quarkly **⚡️ Quick Bits:** Helpful libraries which you may have missed. - [React Select 4.1](https://react-select.com/home) — A flexible select input control. - [react-use-scrollspy](https://github.com/Purii/react-use-scrollspy) — Navigation based on scroll position. - [three-material-editor](https://github.com/RenaudRohlinger/three-material-editor) — Edit your Three.js materials. 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