#​301 — August 10, 2022

Read on the Web

☀️ 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

Cloudscape: A React Component Design System from AWS — Built for and used by Amazon Web Services, you currently get 66 components covering all the usual bases, opinionated guides to design best practices, and lots of demos. Might be worth considering if you ever plan on selling your SaaS to Amazon(!) ;-)

Amazon Web Services

Patterns.dev: Modern Web App Design Patterns — A free book you can download in PDF format or enjoy on the Web – the React specific stuff starts here. There’s a lot to enjoy here and a fantastic team behind it, too.

Lydia Hallie, Addy Osmani, and Others

CSS Animations and Transitions — 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:

Connecting a Ruby on Rails App with React — 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) — 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 — 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 — The ubiquity of both React and AWS 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.

Fernando Alamillo

▶  Four Tips to Using Styled Components — In a mere 97 seconds too.

Coding with Jake

🛠 Code and Tools

React Rating: A User/Customer Ratings Component — Uses SVG so it’s portable and always looks good. Zero dependencies. After checking out the numerous examples, we’re ready to give it a ⭐️⭐️⭐️⭐️⭐️ rating 😁

Simone Mastromattei

React Awesome Reveal 4: Intersection Observer Triggered Animations — Adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Demo here.

Dennis Morello

Unlock Free Activity Feeds & Chat APIs

Stream sponsor

Glide Data Grid 5.0: A Canvas-Based Data Grid for Huge Datasets — 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.

Glide

Example of a 'Serverless' React and Notion-Powered 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
Jayden Seric

⚡️ THE RAPID RELEASES ROUND

React Native Share 7.8 – Share data to other (social) apps.
React-Bootstrap 2.5 – Bootstrap components for React.
Mantine 5.1.1 – Popular React components library.
React Native Modalize 2.1 – Customizable modal/bottom sheet.
React Image Crop 10.6 – A responsive image cropping control.
React Native Textinput Effects 0.6.3 – Inputs with custom label & icon animations.