Putting React on Rails

🇺🇦 #​285 — April 20, 2022

Read on the Web

How to Create a Modern CRUD App with Ruby on Rails and React — A thorough, and newly updated, tutorial covering building a fully functional CRUD app with Rails 7, SQLite, esbuild, React 18, hooks, React Router, and more. An ideal guide if you want to get a feel for all the moving parts involved in such an app.

James Hibbard

📅  Upcoming ‘The State of React’ Meetup — A panel of React 18 working group members, contributors, and React library authors including the opportunity to ask questions live! This online conference is coming up on the 26th, so you’ll need to register soon if you want to attend.

This Dot Media

Headless CMS with World-Class TypeScript Support — Kontent handles all your content management. Streamline your code using TypeScript SDK, CLI, Rich Text resolver, and strongly typed Model Generator and scale with no problems when your project grows. Have you seen our UI?

Kontent by Kentico sponsor

A Quick Guide to Mitosis: Why You Need It and How You Can Use It — Forget cell division.. this Mitosis gives you code division, essentially letting you write components once and then letting you use them in React, Vue, Solid, Angular, and elsewhere.

Alex Patterson

Quick bits:

react-redux 8.0 is here! It adds React 18 compatibility (including SSR support) and moves over to TypeScript.

We featured the release of React Admin 4 last week, but now there’s an official blog post covering the new features.

Jobs

Senior React Engineer @ Nebulab (Remote) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers.

Nebulab

React Native Expert for Global Health (Remote) — SystemOne enables clinics to securely track infectious disease specimen, diagnostic & patient data in low resource settings.

SystemOne

Join a Fast-Growing, Pre-IPO Series E Company — Hinge Health is hiring remote React Native engineers. If you want to be a part of a team that is making a difference, apply here.

Hinge Health

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

Accessible React Forms — This is overdue: in-depth coverage of building accessible forms in React. The author starts with one that does not work well in this domain, and then progressively introduces fixes to get it right.

Carl Rippon

Creating a Multi-Step Form with Formik — Complex user input can be daunting—breaking it down into smaller, step-wise chunks can make it easier. This article shows how. BTW, the ‘audiobook’ version is a welcome addition to this article—we hope this catches on.

Piyush Sinha

Writing Cross-Platform Components for Web and React Native — It’s not the easiest thing to do..

Artem Sapegin

React App Performance Optimization Tips

Suneet Bansal

🛠 Code and Tools

react-winbox: A Full Window Manager for React — This component wraps Winbox.js, “a modern HTML5 window manager for the web”. The component comes complete with React props and state.

RickoNoNo3

React Embed 3.6: To Embed Third Party Widgets — A component that looks at the URL of the thing you want to embed and then, well, embeds it as best it can. Supports things like JSFiddle, Replit, SoundCloud, YouTube, GitHub Gist, and more.

Vadim Dalecky

React Bootstrap 2.3: Bootstrap 5 Components Built with React — Replaces Bootstrap’s JavaScript. Each component has been built from scratch as a true React component. GitHub repo.

Collings, Honnibal, Vanderwerff, et al.

Tired of Asking Users to Enter Passwords in Your Applications?

Stream sponsor

React Page Visibility 7.0: Declarative, Isomorphic ‘Page Visibility’ HOC — React to your app being in the background (or invisible) so you can do things like conserve bandwidth or stop running animations.

Gilad Peleg

React-Select-Datepicker: A Dropdown Date Picker Component — If a calendar feels too cumbersome, this is a different approach where you let users pick month, day and year from dropdowns. GitHub repo.

Jeff McAmmond

React-Leaflet 4.0: React Components for Leaflet Maps — Leaflet is a popular JavaScript library for creating interactive maps. This library brings support direct to React.

Paul Le Cam

⚡️ Quick Bits:

react-bootstrap-typeahead — React typeahead with Bootstrap styling.

allotment — A component for resizable split views, with lots of options.

use-async-memo — React hook for generating async memoized data.

react-copy-to-clipboard — The ubiquitous copy-to-clipboard functionality your app needs.

useScrollDirection — Get the scroll direction vertically.