Two ways to learn React in 2023
#333 — April 5, 2023
React Chrono 2: A Flexible Timeline Component — A complete overhaul of a popular component. You can render themeable timelines in vertical, horizontal, or vertical alternating orientations. It includes keyboard navigation support, auto advancement, and, as of v2, support for nested timelines. Docs or give it a try via some CodeSandbox examples.
Prabhu Murthy
▶ Dan Abramov Explores React Server Components — Clocking in at a rather epic almost four hours, this (well timestamped) video isn’t for the faint of heart, but Dan and Ben walk through everything React Server Components oriented, complete with diagrams, code, and a real-world app.
Ben Holmes
The Open-Source Framework for B2B Apps — From simple dashboards to complex admin panels for your entire company, react-admin unleashes the true productivity of React. Join more than 20k devs already building web apps like they play Lego, thanks to 230+ business-oriented components.
Marmelab/React-admin sponsor
Learn React as Library or Learn React as a Framework? — Learning React in 2023 isn’t quite as easy as it used to be. The answer is best summarized as the ever helpful “it depends”. Robin does suggest a way forward, though.
Robin Wieruch
Making Tanstack Tables a Thousand Times Faster with a One Line Change — However there was a lot of work required, which the author meticulously explains, to get to that one troublesome line of code.
JP Camara
IN BRIEF:
Storybook 7.0 is technically released, though it’s still tagged ‘next’ and pending a proper launch blog post, etc. so we’ll feature it again once that happens. However, Storybook for React Native 6.5 has been unveiled.
Luke Twomey reflects on the influence the new React docs site might have given the approaches it now recommends. Justin Guckes does some similar thinking in The Future of React.
Vercel has added support for Remix apps including larger ones or those with streaming SSR.
Using tRPC in Astro and Its (React) Islands — tRPC gives end-to-end type safety when working with APIs and this guide shows how to implement it in Astro on the server side and on the client-side using React.
Thomas Ledoux
▶ Creating a GitHub Globe Clone with Three.js — If you’re logged in to GitHub, you might not have seen the ‘globe’ on its homepage. Now, though, you can create your own.
Epic Programmer
React Hook Form: Working with Multipart Form Data and File Uploads
Alex Khomenko
???? Code and Tools
React-Clock: An Analog Clock Component — There’s a beautiful train station style example to see here, but you can ultimately customize the clock to your liking. From the same creator as React Calendar.
Wojciech Maj
Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.
Dynaboard sponsor
React Virtuoso 4.2: Components for Rendering Enormous Data Sets — Components for virtual lists / tables that can efficiently (and lazily) work through huge data sets. Luckily the homepage has plenty of examples. GitHub repo.
Petyo Ivanov
CSS Components: A Way to Componentize Your CSS Styles — Not another styling system, but a lightweight utility to compose CSS styles into standard React components.
Phantom Land
React Scroll Parallax: Parallax Scroll Effects — Utilizes Parallax Controller to add vertical or horizontal scrolling based effects to elements. Optimized to reduce jank on scroll and works with SSR and SSG rendered React apps. Here’s a Storybook full of examples.
J Scott Smith
react-timezone-select: A Timezone Selection Component — Can adjust its options dynamically based on DST and restricts choices to the minimum needed to represent all timezones. Demo.
Nico Domino
React Authentication, Simplified
Userfront sponsor
react-use-exceljs: A Hook to Generate XLSX Files — Wraps around ExcelJS and FileSaver.js for both producing and then saving Excel spreadsheets as a downloaded file.
dadamssg
React Native SVG: SVG Library for React Native — There’s also a compatibility layer to let it work with regular React too.
Software Mansion
React Multivalue Text Input — A text input component that maintains and displays a collection of entered values as an array of strings (such as for a tagging system).
Rosalind Wills
Jobs
Find React Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired
QUICK RELEASES:
ReacType 15.0
↳ Visual prototyping tool that can export React apps.
React Live 4.0
↳ Playground for live editing components.
react-jsonschema-form 5.5
↳ Building Web forms from JSON Schema.
use-immer 0.9
↳ Use Immer as a hook to manipulate state.
Next.js SEO 6.0
↳ Easier SEO for Next.js projects
xstyled 3.8
↳ Utility-first CSS-in-JS framework.
SWR 2.1.2
↳ Hooks for data fetching.
