#169 — December 18, 2019 |
Yes, get out those handkerchiefs and shed a tear, for this is the final issue of React Status of the year! 😂 We'll be back on January 8 but in this issue we're rounding up the most popular links of the year as clicked by you and other readers, as well as the biggest React news of the year overall (organized month by month below). Thanks for your continued support, we really appreciate it. Happy new year! |
🏆 The Top 6 Links of 2019 |
1. The 10 React Component Commandments — By far the most popular link of the year, this post walks through 10 ‘practical commandments’ for creating components that you can share widely and that other developers will actually want to use. Certainly some good practices to adopt here into the new year. Kristofer Selbekk and Caroline Odden |
2. From Redux to Hooks: A Case Study — "Hooks" was clearly the React 'Word of the Year' so it's no surprise this interesting exploration of using hooks instead of Redux did well. They did feel, however, that hooks are “only for specific types of applications” but I imagine this opinion may have changed since. Sergey Ryzhov |
3. Best Practices for Building a Large Scale React App — 'Best practice' roundups always do well, and so did this post which covers a few concepts worth keeping in mind to make neater, larger scale apps over time. Aman Khalid |
Tried & True Productivity Tips from 25 React Experts — The KendoReact team curated the top productivity tips of 25 React experts, from smart ways to hit the ground running with React to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. Check them out. Progress KendoReact sponsor |
4. How Facebook is Building the New Facebook.com with React, GraphQL and Relay — A key story this year was that Facebook's next design would be fully powered by React and Relay and this 35 minute talk went into the technicalities. Facebook for Developers video |
5. Writing Resilient React Components — Dan Abramov's Overreacted blog was hugely popular this year, but this post, covering several principles to set you on the right path building solid components, did the best with React Status readers. Dan Abramov |
6. A Complete Guide to React's Dan Abramov |
💻 Jobs |
Software Engineers, Frontend at Fictiv (San Francisco) — We bring a user friendly experience to manufacturing, making it easy to turn designs into real products. Use the latest tech and JS to iterate quickly, ensuring a rapid feedback loop between us and our customers. Fictiv |
Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers. Vettery |
📅 Month by Month |
JANUARY: Not everything has to be a hook, said Dan Abramov. The React team also asked for help in translating the docs. FEBRUARY: React 16.8 was released bringing us hooks for real. MARCH: React Native 0.59 was released, as well as React Router v5. APRIL: Create React App 3.0 was released. MAY: Microsoft unveiled React Native for Windows. And Material UI 4.0 was released. React Europe took place too. JUNE: Styled Components v5 was released. JULY: Framer Motion succeeded Pose as a powerful way to animate React components. AUGUST: React Native's homepage got a neat redesign and React 16.9 was released, along with a roadmap for React's near future. The new DevTools came out too. React Rally took place. SEPTEMBER: The React Riot online hackathon took place. Gatsby raised $15m in funding. OCTOBER: Preact X and Ionic React were released. Concurrent mode was also experimentally introduced and React Conf took place. NOVEMBER: Everyone pretty much took some rest, except for Discord who showed off how they achieved native performance when using React Native. DECEMBER: The React advent calendar kicked off again. |
📘 2019's Top 6 Tutorials |
My Experience Moving From Enzyme to David Boyne |
Progressive React: Building Faster React Apps — A guide (which starts off with a handy checklist) on building faster React apps by way of a handful of useful optimizations. Houssein Djirdeh |
Don't Sync State, Derive It — Avoid synchronization bugs and hidden complexity by deriving (or calculating) state in React apps on the fly rather than keeping numerous copies of state around your app. Kent C Dodds |
Serverless Handbook – The Resource I Wish I Had — Curious about serverless? Wanna get into backend but not sure how? This handbook is for you. Recipes you can apply today. Swizec Teller sponsor |
5 Tips to Help You Avoid React Hooks Pitfalls — Explores some hook gotchas and how to avoid them. Kent C Dodds |
Lee Warrick |
Don’t 'Eject' Your Create React App — Ejecting is the one-way process of turning an app running on Create React App into a standalone app you have full control over, but Adam argues you probably don’t want to do this. Adam Laycock |
🔧 2019's Top 6 Code and Tools |
Create React App 3.0 Released — The popular tool to set up a modern React app in a single command took some key steps forward with support for Jest 24, hooks, TypeScript linting, and more. 3.3.0 is currently the latest release. |
Reakit 1.0: A Toolkit for Creating Rich, Accessible React UIs — WAI-ARIA 1.1 compliant components including cards, popovers, headings, lists, labels, etc. Diego Haz |
Styled-Components v5: Faster CSS Styling for Your React Components — Styled Components is a popular way to bring CSS and JavaScript together for styling components. Evan Jacobs |
Rock Solid, Modern Stack—Rails 5 API + ActiveAdmin + Create React App Heroku sponsor |
React Hook Form: Simple, Extensible React Form Validation — It’s not just an interesting project, but it has one of the best project homepages I’ve seen this year too, complete with code comparisons with similar libraries. GitHub repo. Blue Bill |
Navi: A React Router with Hooks and Suspense — A new kind of router for React that that lets you declaratively map URLs to content, even if that content is asynchronous. This is a great overview packed with examples, or you can head straight to the code.. James K Nelson |
React Chaos: Introduce Some Chaos into Your Components — Chaos engineering is the idea of introducing random faults into your apps in order to test their resiliency or to find weak points.. and this is a proof-of-concept higher order component that will randomly ‘break’ your React components. No updates in the past three months, however, but the concept was clearly popular. J.C. Hiatt |