From the React Context API and React Router to building dashboards and form validation, React developers were excited about a range of topics in 2021. Check out the list of the Top 10 hottest topics making waves in the React ecosystem and see if you have missed something. It’s just January - not too late to catch up. Actually, it's never too late!
A Word on Methodology
My method, in short: I have access to the entire Telerik Blogs performance data and I’m not afraid to use it. What's more, I want to share that (knowledge=)power with you.
The Telerik Blogs serve millions of readers every year across a variety of technologies, including hundreds of thousands of unique visitors of all React-focused blogs. Considering that there are about 6-7 million React developers today, I would call the Telerik Blogs' React audience a representative sample and my method: semi-scientific. ;)
(If you’re wondering about how I estimated the size of the React developer community: I combined the SlashData Q3 2021 survey results, which state that there are ~16M JavaScript developers. Then I took a conservative 40% of that number, based on Stack Overflow React usage stats. I say “conservative” because according to the State of JavaScript 2021, 80% of JavaScript devs use React.)
Before We Begin
Let's make this even more fun! Make a mental list of the top React topics in 2021 according to you, and pick your top three. Great, now you have something at stake. Read on to see how closely your list matches what we've observed. In true countdown fashion, we'll start from #10 and work our way up to #1.
React Developer's Top 10 Topics of 2021
.
.
.
Hot Topic #10: The React Context API
State management is always on React developer’s minds, which is why it’s no surprise that ever since graduating to “safe to use in production” with React 16.3, the React Context API has been growing in usage. Sometimes hailed as the Redux killer, one of React Context API’s main benefits is that with its help, you don’t need to install external libraries to handle state management. Leonardo Maldonado did a great job explaining what the Context API is, the problems it solves and how to use it with his popular blog, Understand React Context API.
.
.
.
Hot topic #9: Building dashboard apps with React
You can build all sorts of apps with React and it can be lots of fun. Where things get challenging is when you have to build more complex, line-of-business apps that need to handle a lot of data (perhaps even live-updating data), enable the users to edit, and visualize all this in a user-friendly way. In other words: it can be tough to build a dashboard with React. That’s why we saw steady interest in our three popular dashboard building tutorials all year round. If you haven’t read them, you’re building dashboards the hard way:
- Let’s Build a Financial Dashboard with React
- Let's Build a Sales Dashboard with React
- How To Build an Interactive Dashboard with the React TileLayout component
.
.
.
Hot topic #8: React PDF Rendering: Exporting HTML to PDF
How to export HTML to PDF in your React apps is a very popular question – mostly because it is hard to do, and you need to have a couple of tricks up your sleeve to do it right. That’s why Carl Bergenhem’s 3-part series on different React-to-PDF exporting scenarios was a big hit in 2021. You’ve missed it? Now you haven’t:
- Part 1: Generating PDF in React: As Easy As 1-2-3
- Part 2: Generating PDF from HTML in React: Exporting Invoices
- Part 3: Generating PDF from HTML in React: An Example of Exporting Data Grids
.
.
.
Hot topic #7: How to Create a Responsive Layout in React
We find that developers love design-related development tutorials – and no wonder! Creating good UI/UX often falls on them, yet one could argue that it requires a separate skillset. Using third-party UI libraries that do a lot of the work for you can be of great help (spotlight on KendoReact), but even so, there’s no doubt that good developers need to know a thing or two about UI/UX. That’s why Eric Bishard’s blog has perennial appeal and has been helping developers create responsive layouts since 2019: Creating a Responsive Layout in React.
.
.
.
Hot topic #6: React Hooks
Hooks all the things!… or something. Ever since React Hooks were released in October 2018, they have been helping developers write clearer and more concise code. Needless to say, to make the most of them, you need to learn about them first. No wonder The Ultimate Guide to Learning React Hooks is still a go-to resource for tens of thousands of developers. What’s more, Leonardo Maldonado strikes again in our top 10 chart with his useCallback and useRef: Two React Hooks You Should Learn.
.
.
.
Hot topic #5: Loops in React JSX
JSX is a custom syntax extension to JavaScript which is used for creating markup with React. The most common way of using a loop to render a list of items is with the map function that will return JSX. Not sure how to do that? You’re not alone! Happily, Thomas Findlay solved that mystery for all of us with his super helpful Beginner’s Guide to Loops in React JSX.
.
.
.
Hot topic #4: Building Forms in React & React Form Validation
Four is my favorite number and forms are an interface React developers love to build. Okay, one of these statements is a lie. Forms are an extremely common thing to have in your React app and look deceptively simple to implement until you get down to it. Let's demystify them once and for all! Start with How to Build Forms with React the Easy Way with TJ VanToll, dive into React Form validation with Eric Bishard’s Up and Running with React Form Validation and explore the KendoReact team’s best practices and usage examples for building great forms in React – all extremely popular resources throughout 2021.
.
.
.
Hot topic #3: Dealing with CORS in CRA
If you thought Create React App (CRA) would be high on the list of the most popular React topics, you’ve guessed right! At number 3 of our most popular resources, we have Blanca Mendizábal Perelló’s short and sweet Dealing with CORS in Create React App – a blog that helps you get around CORS issues using CRA’s proxying capabilities. It’s great value for your time as you can scan the blog in three minutes and come out the wiser for it!
.
.
.
Hot topic #2: React Router
Did you guess that one? If you search for “what is React Router” with Google , you’ll get a mind-boggling 49,800,000 results. Developed by the Remix team, Ryan Florence and Michael Jackson, this lightweight, fully featured routing library generates over 6 million npm downloads each week! Little wonder then, that Gift Egwuenu’s Programmatically Navigate with React Router served so many of you this year. If you don’t know what programmatic navigation is, now you know.
.
.
.
Hot topic #1: How to Show and Hide Elements in React
Does the most popular React topic of 2021 surprise you? How to control what gets displayed in your app is one of the first things you need to learn when you start developing – this holds the key to the incredible popularity of this topic. A rough estimate based on this year’s developer surveys (referring to the SlashData’s Q3 2021 survey again, where they note that 4 million developers have joined the JavaScript community in the last year) indicates that every year, hundreds of thousands of developers enter the React ecosystem and start learning. Well, where else to start but from the beginning? With that, I present to you the most popular React blog on Telerik Blogs in 2021, by far: it is Leigh Halliday’s How to Show and Hide Elements in React.
Thank you for staying till the end!
This concludes our yearly retrospective of the topics that rocked the React world in 2021. Did you guess any of the top 3? What are the topics that didn’t make it in this list, but rank in your personal Top 10? Don’t be a silent observer, let me know in the comments!
Curious squirrel photo by Hasse Lossius on Unsplash
Top comments (0)