---
title: "Taking a React app to the bare basics"
publication: "React Status"
issue: 240
published_at: "2021-05-26"
canonical_url: "https://react.statuscode.com/issues/240"
---

Plus five advanced React patterns, Coinbase's move to React Native, and lots of updated libraries. |        

#​240 — May 26, 2021 

[Read on the Web](https://react.statuscode.com/issues/240)   React Status ⚛️ _Your weekly React news digest, every Wednesday_   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/wpe1erhmibaopzcz6zly.jpg)](https://www.smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/)   

[Get Started With React by Building a 'Whac-a-Mole' Game](https://www.smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/) — This is aimed at beginners keen to strike some ‘aha!’ moments while learning React, but I think the idea of using React to create a _game_ is intriguing enough to take many out of their comfort zone. 

Jhey Tompkins   

▶[A Complete Beginner's Guide to Next.js](https://www.youtube.com/watch?v=nBkRxwHMrto) — Ali keeps it engaging and easily digestible in this 22-minute video. Well recorded. Fantastic. 

Ali Spittel   [![\](https://copm.s3.amazonaws.com/da45f17e.png)](https://about.sourcegraph.com/?utm_source=react-status&utm_medium=text&utm_campaign=try-sourcegraph&utm_content=try-text) 

[Search Your Code. ALL of It](https://about.sourcegraph.com/?utm_source=react-status&utm_medium=text&utm_campaign=try-sourcegraph&utm_content=try-text) — Sourcegraph is the one tool to find & fix things across all your code: any code host, any repo, any language. Easily construct complex queries to find & filter code in ways IDEs & code hosts can’t. Stay in flow & get answers in milliseconds. [Try it now](https://about.sourcegraph.com/?utm_source=react-status&utm_medium=text&utm_campaign=try-sourcegraph&utm_content=try-text). 

Sourcegraph sponsor   

[Announcing Coinbase’s Successful Transition to React Native](https://t.co/NNgFjmKHBu?amp=1) — Facing shortages of mobile app engineers, an ever-expanding code base and the need to scale up to better serve its 56 million users, cryptocurrency platform [Coinbase](https://coinbase.com) recently completed its wholesale transition to React Native. Here’s their story. 

Coinbase   

[Using Forms in React](https://daveceddia.com/react-forms/) — A thorough review of the steps required to create your first form in React, presented with code snippets to help clearly illustrate the steps. 

Dave Ceddia   

[Five Advanced React Patterns](https://t.co/Z2LnByxIWy?amp=1) 

Alexis Regnaud    

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 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) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. 
Hired    

📘 Tutorials and Stories 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/cjydsqijhrrvhaqyobrg.jpg)](https://kentcdodds.com/blog/super-simple-start-to-react)  

[What is the Simplest React App?](https://kentcdodds.com/blog/super-simple-start-to-react) — Many of us love to see something boiled down to the most basic, bare bones example to see just what is _truly_ needed for something to work. Kent has boiled down creating the simplest of React apps in such a way here, and it's just a few lines. 

Kent C. Dodds   

▶[Creating a Multi-Step Form with React (Simple Version)](https://youtu.be/dybbUOmtd0Y) — Staying with the form theme, some additional information required to add multi-step functionality to handle more complex data entry and validation requirements. 

Chris Sev   

[5 Reasons Not to Write Your JavaScript Data Grid from Scratch](https://www.telerik.com/blogs/5-reasons-not-to-write-your-javascript-data-grid-from-scratch?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-never-write-a-grid&utm_content=sponsored-link) — Data grids are essential for many business apps. You may be tempted (or kindly asked) to write one. [Before you start...](https://www.telerik.com/blogs/5-reasons-not-to-write-your-javascript-data-grid-from-scratch?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-never-write-a-grid&utm_content=sponsored-link%20%20) 

Progress KendoReact sponsor   

[Six Recommendations for Styling Apps with Grommet](https://spin.atomicobject.com/2021/05/14/styling-grommet/) — [Grommet](https://v2.grommet.io/) is a React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package, but Dan has a few recommendations on its usage. 

Dan Kelch   

🐦 [Learn Framer Motion in Ten Tweets](https://twitter.com/willjohnsonio/status/1396857844973064202) — For those who _really need_ the facts and nothing but the facts, this tutorial has boiled it down to just ten, 280 character chunks. It’s an interesting and surprisingly workable approach. 

William Johnson   

[Creating Data Visualizations with D3 and React](https://dev.to/codesphere/creating-data-visualizations-with-d3-and-reactjs-10ei) — Nowadays, it no longer seems sufficient to simply present the data in a compelling albeit static chart. What if that chart has to _move_ in order to make a point? ;-) 

Saji Wang   

[How To Implement Authentication in Next.js with Auth0](https://www.smashingmagazine.com/2021/05/implement-authentication-nextjs-auth0/) — The author makes a good case as to why authentication should be left to a third-party service like [Auth0](https://auth0.com), and then walks through the steps to use the service in a Next.js app. 

Facundo Giuliani     

🛠 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)     

[react-img-carousel](https://github.com/godaddy/react-img-carousel) — This UI component from a well-known source comes “lazy loading, autoplay, infinite scrolling, touch events and more”. In other words, everything you want in an [image carousel](https://www.youtube.com/watch?v=BQQRaHRQAVo). 

GoDaddy   

[A Boilerplate for SSR’d Vite, React 17, and TypeScript 4.3](https://blog.jonlu.ca/posts/vite) — Considers itself a “barebones, slightly-opinionated” boilerplate for working with a modern web stack. 

JonLuca DeCaro   

[New Mobile Chat Kit From Stream](https://getstream.io/chat/ux-kit/?utm_source=react_status&utm_medium=promoted_newsletter&utm_content=developer&utm_campaign=5_26_21) 

Stream sponsor   

[React CSS Theme Switcher](https://github.com/JoseRFelix/react-css-theme-switcher) — The tools you need to make your users’ experience configurable between a variety of visual styles. 

Jose Felix   

[govuk-react: The GOV.UK Design System, Now for React](https://github.com/govuk-react/govuk-react) — The UK government is encouraging the use of a consistent [design system](https://design-system.service.gov.uk/get-started/) for services it provides to its citizens. This now includes providing a set of React components which implement it. 

govuk-react   

[PanWriter: An Editor with Integrated Preview and Pandoc Support](https://github.com/mb21/panwriter) — Yet another [Markdown](https://daringfireball.net/projects/markdown/) editor, but this one has a real-time preview pane as well as support for multiple file formats through integration with the [Pandoc](https://pandoc.org) document converter. 

Mauro Bieg     

**⚡️ Quick Bits:** 

Interesting projects which you may have missed: 

- [react-social-icons](https://github.com/jaketrent/react-social-icons) — Icons for all the main social platforms and apps.
- [React Transliterate](https://github.com/burhanuday/react-transliterate) — Type in over 30 different languages, based on [Google Input Tools](https://www.google.com/inputtools/).
- [React Native Ratings](https://github.com/Monte9/react-native-ratings) — Quickly add the ability for your users to rate their experience.
- [react-simplemde-editor](https://react-simplemde-edtior.netlify.app/) — A React wrapper for [Easy-MDE](https://github.com/Ionaru/easy-markdown-editor).
- [React Image and Video Lightbox](https://github.com/Ngineer101/react-image-video-lightbox) — A simple, straightforward implementation of this popular UI concept.          

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