--- title: "AWS's sweet suite of React components." publication: "React Status" issue: 301 published_at: "2022-08-10" canonical_url: "https://react.statuscode.com/issues/301" --- Plus awesome reveals, hooking up Rails with React, and codebases to learn from. | #​301 — August 10, 2022 [Read on the Web](https://react.statuscode.com/issues/301) ☀️ Next week you won't receive _React Status_ – we're taking a week off for summer vacation :-) We'll be back, complete with sun tan wind burn, on August 24. __ _Peter Cooper and Terence C. Gannon, your editors._ React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/h8ez4179xzo3lrpcxvqf.jpg)](https://cloudscape.design/) [Cloudscape: A React Component Design System from AWS](https://cloudscape.design/) — Built for and used by Amazon Web Services, you currently get [66 components](https://cloudscape.design/components/overview/) covering all the usual bases, opinionated guides to design best practices, and [lots of demos.](https://cloudscape.design/demos/overview/) Might be worth considering if you ever plan on selling your SaaS to Amazon(!) ;-) Amazon Web Services [Patterns.dev: Modern Web App Design Patterns](https://www.patterns.dev/) — A free book you can download in PDF format or enjoy on the Web – the React specific stuff [starts here.](https://www.patterns.dev/posts/reactjs/) There’s a lot to enjoy here and [a fantastic team](https://www.patterns.dev/about/) behind it, too. Lydia Hallie, Addy Osmani, and Others [![\](https://copm.s3.amazonaws.com/20dc038e.jpg)](https://frontendmasters.com/courses/css-animations/?utm_source=reactstatus&utm_medium=email&utm_content=cssanimations) [CSS Animations and Transitions](https://frontendmasters.com/courses/css-animations/?utm_source=reactstatus&utm_medium=email&utm_content=cssanimations) — Join David Khourshid on this detailed video course and discover how to bring your interfaces to life with UI animations. Learn about CSS transitions, keyframes, custom properties, choreography, animation states, and much more Frontend Masters sponsor **Quick bits:** - A list of [React + TypeScript codebases](https://react-typescript-cheatsheet.netlify.app/docs/basic/recommended/codebases/) you can learn from. - A developer explains why his team [moved away from React Query](https://www.basedash.com/blog/why-we-had-to-move-away-from-react-query) and how they're happier for it. [Connecting a Ruby on Rails App with React](https://blog.appsignal.com/2022/08/03/connect-a-ruby-on-rails-app-with-react-in-a-monolith.html) — Rails and JavaScript work well together, but with two ecosystems on stage at once, a bit of work can be necessary to make the pieces fit. Paweł breaks down a Rails⇿React integration approach here and touches on some alternatives too. Paweł Dąbrowski Jobs [Senior Software Engineer at This Dot Labs (Remote, Worldwide)](https://www.thisdot.co/job/senior-software-engineer-javascript-remote) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more. This Dot Labs [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 [Deploy a React App to S3 with GitHub Actions: Step-By-Step Guide](https://javascript.plainenglish.io/deploy-a-react-app-to-aws-s3-with-github-actions-a-step-by-step-guide-3572265332a3) — The ubiquity of both React and [AWS S3](https://aws.amazon.com/s3/) cloud storage makes this article particularly useful. It’s a beginner-friendly way to learn how to deploy your React App to AWS S3 using [GitHub Actions](https://github.com/features/actions). Fernando Alamillo ▶[Four Tips to Using Styled Components](https://www.youtube.com/watch?v=f-Hr_TfEyvw) — In a mere 97 seconds too. Coding with Jake 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/up8vfcjkh8r0xqqzdyui.jpg)](https://react-rating.onrender.com/) [React Rating: A User/Customer Ratings Component](https://react-rating.onrender.com/) — Uses SVG so it’s portable and always looks good. Zero dependencies. After checking out [the numerous examples](https://react-rating.onrender.com/), we’re ready to give it a ⭐️⭐️⭐️⭐️⭐️ rating 😁 Simone Mastromattei [React Awesome Reveal 4: Intersection Observer Triggered Animations](https://github.com/morellodev/react-awesome-reveal) — Adds reveal animations using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when the elements appear in the viewport. [Demo here.](https://codesandbox.io/s/qpmn0) Dennis Morello [Unlock Free Activity Feeds & Chat APIs](https://getstream.io/try-for-free/?utm_source=React_Status&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=ReactStatus_August2022_Trail_klmh22) Stream sponsor [Glide Data Grid 5.0: A Canvas-Based Data Grid for Huge Datasets](https://github.com/glideapps/glide-data-grid/releases/tag/v5.0.0) — We featured this a few months ago but this major release introduces some breaking changes and removes `styled-components` as a dependency. Worth a look if you need a data grid with rich rendering options and that can scale up to (potentially) millions of rows. [Demo.](https://grid.glideapps.com/) Glide [Example of a 'Serverless' React and Notion-Powered Blog](https://github.com/arthtyagi/serverless-notion-blog) — The idea is simple. Use the Notion note-organizing tool as a CMS of sorts, use React to provide a front-end interface, and Cloudflare Workers in the middle to join the two. Arth Tyagi [graphql-client 19.0: GraphQL Client for React using Modern Context and Hooks APIs](https://github.com/jaydenseric/graphql-react) Jayden Seric **⚡️ THE RAPID RELEASES ROUND** [React Native Share 7.8](https://github.com/react-native-share/react-native-share) – Share data to other (social) apps. [React-Bootstrap 2.5](https://github.com/react-bootstrap/react-bootstrap) – Bootstrap components for React. [Mantine 5.1.1](https://github.com/mantinedev/mantine) – Popular React components library. [React Native Modalize 2.1](https://github.com/jeremybarbet/react-native-modalize) – Customizable modal/bottom sheet. [React Image Crop 10.6](https://github.com/DominicTobias/react-image-crop) – A responsive image cropping control. [React Native Textinput Effects 0.6.3](https://github.com/halilb/react-native-textinput-effects) – Inputs with custom label & icon animations. 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