#270 — December 22, 2021
🎄 Hi folks. It’s the end of the year (for us, anyway) so we’re looking back at 2021 with a roundup of the most popular items of the year, whether overall, or in terms of libraries and videos. You should find something useful here that skipped your attention at the time 🙂 Beyond that, have a happy new year and we’ll see you back on Wednesday, January 12.
Peter Cooper and Terence Gannon — your editors
The Top React Status Items of 2021
1. The Tao of React: Design, Architecture & Best Practices — The topic of ‘best practices’ is a perennially popular one in the React world with so many ways to approach each problem. So it’s no surprise this post covering a variety of principles and attitudes for productively building resilient React apps for the long term went down so well.
2. React Architecture: How to Structure and Organize a React Application — The theme from the item above continues here 😉 Tania is always fantastic at explaining things, so we really liked her approach to explaining project structure, and it seems you did too.
New Course: Stay Productive Across Multiple Machines, Projects, and Technologies — Enhance your developer productivity with this detailed course on setting up your professional toolchain, covering Ansible, Dotfiles, Terminals, tmux, Bash, and more.
Frontend Masters sponsor
3. Five Code Smells React Beginners Should Avoid — About to pull the trigger on your first big pull request for a high profile project? You should probably go through this checklist first. As an aside, if you’re writing an article about React, this is the sort of headline that is catnip to readers, as long as you can deliver 🙂
Jason Lee Hodges
4. Top React Component Libraries (2021 Edition) — We’re doing a separate list of top code and tools items below, but if you want a one-stop shop for component libraries, the folks at Retool released a 2021 update of their list of top React libraries.
5. How To Write Better Functional Components in React — Five simple tips to help write optimized functional components that are more readable, each with its own sample code showcased with JSFiddle.
React Frontend or Full-Stack Engineer at Uplift (US Consultancy) — Enjoy a flexible schedule while building web and mobile apps with modern technologies on a wide variety of projects.
Uplift Agency Ltd
Senior UX Developer — Sr. UX Developer working in React for the Liberty Mutual Design System. Can be based remote.
Liberty Mutual Insurance
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.
🛠 Top Code and Tools Links of 2021
Leva: A GUI Panel for React — A control panel that lets you set app properties via a nicely designed interface. Think useState but with a GUI. It just had an update a few days ago too and still actively developed 🙂
Spectacle 7: A React and JSX-Based Presentation Library — Got a presentation coming up? Build your decks with JSX? A good way to get a feel for it is via the deck on its home page.
Progress KendoReact videosponsor
React DnD 14.0: Utilities to Create Drag and Drop Interfaces — Build complex drag and drop interfaces while keeping your components decoupled.
useStateMachine: The ½KB State Machine Hook — It only makes sense to bundle a state machine into a hook. We have featured a number of Cassio’s videos in the past, so it’s no surprise there’s a video walkthrough with examples which illustrate its use.
📺 Top Videos of 2021
▶ A Coding Interview with Dan Abramov — This was just two weeks ago, but Dan Abramov’s brave ‘coding interview’ with Ben Awad was the runaway popular video of the year.
Ben Awad and Dan Abramov
▶ Ten React Hooks Explained, Plus Build Your Own From Scratch — If you still haven’t fully gotten on the React Hooks bandwagon and have just 13:14 to spare, this video is what you need. The narrator doesn’t take a breath: strap in, hang on and get ready to hit the pause button.
▶ Hook Traps: useEffect and Stale Closures
▶ From Figma to GitHub Using Anima
▶ React Router v6 – The No Nonsense Guide
▶ What’s New in React 18