--- title: Best React posts of 2021 | daily.dev description: The most upvoted React posts of 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/react/best-of/2021 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/react/best-of/2021 og:type: website og:site_name: daily.dev og:title: Best React posts of 2021 | daily.dev og:description: The most upvoted React posts of 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of React — 2021 1. 1 [](/posts/blog---next-js-12-qp57ir0e "Blog - Next.js 12") Article Next.js · 5y Blog - Next.js 12 Next.js 12 includes a brand new Rust compiler that takes advantage of native compilation. We've optimized bundling and compiling with \~3x faster refresh locally and \~5x faster builds for production. Native Next.js APIs are now supported, as well as Suspense AVIF Support. 255 22 2. 2 [](/posts/react-architecture-patterns-for-your-projects-uo-kqfo5f "React Architecture Patterns for Your Projects") Article asayer · 5y React Architecture Patterns for Your Projects React is an un-opinionated framework in the front-end ecosystem. Its versatile nature does not provide a way to organize and structure a web application. An organized codebase is how a team of developers gets productive within the given structure. In this article, let’s look at some of the ways to keep the lifecycle of a React application healthy and well organized. 217 7 3. 3 [](/posts/no-more-import-in-react-oyoumwmjk "No More ../../../ Import in React") Article DEV · 5y No More ../../../ Import in React Absolute imports make the component more readable and clean. Steps to configure absolute Import in Create React App without any third-party packages. For JET Brains IDEs like WebStorm, PhpStorm, RubyMine and etc, we need to add some additional configurations as below. 194 15 4. 4 [](/posts/atropos---touch-friendly-3d-parallax-hover-effects-jy15-g7-n "Atropos - Touch-friendly 3D parallax hover effects") Article Product Hunt · 5y Atropos - Touch-friendly 3D parallax hover effects Atropos is a lightweight, free and open-source JavaScript library. It can be used to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js Embed this post on your site. For more information, visit Atropos. 163 11 5. 5 [](/posts/25-hand-picked-react-libraries-you-probably-didn-t-know-existed-4x51df9ef "25 Hand-Picked React Libraries You Probably Didn’t Know Existed") Article JavaScript in Plain English · 5y 25 Hand-Picked React Libraries You Probably Didn’t Know Existed React is a JavaScript library built on top of Facebook’s React library. It aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components. Here are some libraries you can use in 2021 to level up your web application. 149 6 6. 6 [](/posts/free-100-mern-mean-stack-resources-ldsccjgtv "Free 100+ MERN / MEAN Stack resources") Article DevDojo · 5y Free 100+ MERN / MEAN Stack resources I have gathered all the resources that you will require to become a MERN or MEAN stack developer. All these resources will include Articles, Videos, Course, Websites, Tutorials, Books etc. And everything is FREE. You should know the basics of HTML, CSS AND JS. 142 5 7. 7 [](/posts/fakeflix-a-netflix-clone-built-with-react-redux-l2rsueqwu "Fakeflix, a Netflix Clone built with React, Redux") Article Hashnode · 5y Fakeflix, a Netflix Clone built with React, Redux Fakeflix is a clone of Netflix's splash animation. The project has been selected and inserted inside the trending repositories for five days in a row. It's a project to learn how to structure a Web App of a mid-level complexity integrating Redux logic and experiment with things like Redux Thunk. 136 23 8. 8 [](/posts/blog---next-js-11-v-zjbijch "Blog - Next.js 11") Article Next.js · 5y Blog - Next.js 11 Next.js 11 includes Conformance, a system that provides carefully crafted solutions to support optimal UX. Next.js Live (Preview Release): Code in the browser, with your team, in real time. Webpack 5 is now enabled by default for all Next.JS applications. 124 6 9. 9 [](/posts/react-docs-beta-wjjhlegtt "React Docs Beta") Article Hacker News · 5y React Docs Beta Learn how to think in React with step-by-step explanations and interactive examples. All explanations are written using Hooks rather than classes. We’ve added interactive examples and visual diagrams. Guides include challenges (with solutions!) to check your understanding. This is a beta website. There will be bugs, performance issues, and missing content. 120 7 10. 10 [](/posts/best-vs-code-extensions-for-web-development-e6xvg9f4f "Best VS code Extensions for Web Development") Article DEV · 5y Best VS code Extensions for Web Development VSCode Extension helps you to boost your Productivity in Web Development. This post is for everyone including beginners including frontend and backend developers. We will show you how to use VSCode to improve your productivity on the front end and backend of your website. 109 6 11. 11 [](/posts/how-i-structure-my-react-js-projects-y1xdgruej "How I structure my React.js projects") Article DEV · 5y How I structure my React.js projects Structuring React applications into files and folders is an opinionated topic, because there is no right or wrong way to do it. I decided to share how I have structured my projects lately.Warning: Highly opinionated! Let's get started.Single file. React projects usually start with an src/ folder and one src/App.tsx file with an App component. At some point, your app has more features, more lines, and you will need to make smaller standalone components. 101 1 12. 12 [](/posts/best-react-developer-tools-2021-lsrba5uqz "Best React Developer Tools 2021") Article Honeypot · 5y Best React Developer Tools 2021 Europe's IT worker shortage is projected to grow, meaning job openings for React developers are on the up and up. It's always important to stay up to date with the latest in the world of React to be a competitive player in the job market. Let's talk about what React developer tools are being used in 2021 and why you should include them in your stack. 102 8 13. 13 [](/posts/the-greatest-react-developer-i-ever-met-ebjxm24wf "The Greatest React Developer I Ever Met") Article JavaScript in Plain English · 5y The Greatest React Developer I Ever Met Mohammad Faisal shares the story of one of the greatest engineers he has seen in his life. He was not the fastest but he cared about best practices. His code was so beautiful that a junior developer had absolutely no problem understanding what was going on there. He left the company due to conflict with management. 101 12 14. 14 [](/posts/a-list-of-70-open-source-clones-of-popular-sites-40kuyrhwj "A list of 70+ open source clones of popular sites") Article Changelog · 6y A list of 70+ open source clones of popular sites 100+ open-source clones and alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Whatsapp, Youtube, etc. List contains source code, tutorials, demo links, tech stack, and GitHub stars count. Great for learning purpose! 98 3 15. 15 [](/posts/liquid-swipe-effect-in-react-native-junx90j37 "Liquid swipe effect in React Native") Article React Native Example · 5y Liquid swipe effect in React Native CNN.com will feature iReporter photos in a weekly Travel Snapshots gallery. Please submit your best shots for next week. Visit CNN.com/Travel each week for a new gallery of snapshots. Visit www.dailymail.co.uk/travel next Wednesday for our next gallery. 86 2 16. 16 [](/posts/everything-new-in-react-18-ymsj-nnjn "Everything New in React 18") Article JavaScript in Plain English · 5y Everything New in React 18 React 18 Alpha is here and includes many new features and improvements. The new root API allows you to use all of the react 18 improvements including concurrent features. Suspense lets you suspend something until it’s ready to be rendered. The startTransition API helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates. 86 2 17. 17 [](/posts/learn-next-js-and-make-react-development-simpler-tc-6il-b0 "Learn Next.js and Make React Development Simpler") Article freeCodeCamp · 5y Learn Next.js and Make React Development Simpler Learn Next.js and Make React Development Simpler with our React Development guide. Visit Nextjs.com to learn more about React development. For more information on Nextjs, visit the Nextjs website. For information on React Development, visit React Development.com. for more information about the React development guide, click here. 86 3 18. 18 [](/posts/every-react-developer-should-know-these-libraries-6vnnx6lzb "Every React Developer should know these libraries") Article DEV · 5y Every React Developer should know these libraries React component libraries are popular among developers for their usability and accessibility. These component libraries save us ample time and effort. Although there are multiple other React libraries that developers find helpful, I have mentioned only best ones here. Have any suggestions? Reach out to me on Twitter. 83 19. 19 [](/posts/react-project-architecture-gragg8ril "React Project Architecture") Article ITNEXT · 5y React Project Architecture Context shouldn’t be considered like ‘all the wrapper around entire project’ When complexity of project increase; structures which has connection with logic are increase in number too. Context takes the role of communication between these parts. For example; if you need communication in components and pages on the messaging module; you can create MessagesContext structure and create independent work logic. 82 4 20. 20 [](/posts/vs-code-tips-frameworks-js-utils-react-native-k7cxwi-0s "VS Code Tips, Frameworks, JS Utils, React Native") Article Web Tools Weekly · 5y VS Code Tips, Frameworks, JS Utils, React Native This week we look at why VS Code is so popular with developers and programmers. We also share some productivity tips and hacks to help you get the most out of the tool. And we ask you to share your favourite VS Code tips in the discussion below. Now on to this week's tools! 79 4 21. 21 [](/posts/5-methods-to-reduce-javascript-bundle-size-svqrupdsy "5 Methods to Reduce JavaScript Bundle Size") Article Bits and Pieces · 5y 5 Methods to Reduce JavaScript Bundle Size 5 techniques to reduce the JavaScript bundle size to avoid any performance bottlenecks. Code splitting with Webpack allows you to separate your code into bundles and load them on-demand. Tree shaking is a technique used to eliminate dead codes, and Webpack provides several plugins to implement it. Using Alternative Libraries and Removing Duplicates helps to address performance issues easily. 79 2 22. 22 [](/posts/5-react-performance-optimization-techniques-q1jjjf9kd "5 React performance optimization techniques") Article LogRocket · 5y 5 React performance optimization techniques React uses the concept of a virtual DOM to minimize the performance cost of rerendering a webpage because the actual DOM is expensive to manipulate. This concept can also slow down a complex app if it’s not managed very well. We will discuss five important ways to optimize the performance of a React application. These include:Keeping component state local where necessary to prevent unnecessary rerenders.Code-splitting in React using dynamic import().Windowing or list virtualization in React.Lazy loading images in React 78 4 23. 23 [](/posts/how-to-learn-react-in-2021-the-7-skills-you-need-to-know-jis2quh9t "How to Learn React in 2021: The 7 Skills You Need To Know") Article freeCodeCamp · 6y How to Learn React in 2021: The 7 Skills You Need To Know Reed Barger is the co-founder and CEO of React, a social media company based in San Francisco. He is also the founder of the social media app React. Barger says React will be a key part of the U.S. economy in the next decade. 78 2 24. 24 [](/posts/create-a-mern-stack-app-with-a-serverless-backend-s2aobyso0 "Create a MERN Stack App with a Serverless Backend") Article freeCodeCamp · 5y Create a MERN Stack App with a Serverless Backend MERN Stack App with a Serverless Backend. Create a MERN stack app with a serverless backend. Use the MERN App Manager to help you create your own Stack App. The MERN app manager can also be used to test your Stack App's functionality. 77 4 25. 25 [](/posts/microfrontends-with-react-0dno1mmxp "Microfrontends With React") Article DEV · 5y Microfrontends With React Micro Frontends allows you to develop, deploy and maintain applications individually. Like Uber where booking and payment services are individually developed and deployed. It means, your application is divided into various individual applications and easy to maintain. We will see a React Website using Micro Frontends where we create three applications, Blogs App, Header App and Container App.Please download full source code from our GitHub. 76 5 [See all React archives](/tags/react/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/react/best-of/2021#page","url":"https://daily.dev/tags/react/best-of/2021","name":"Best React Posts of 2021","description":"The most upvoted React posts of 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/react/best-of/2021#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/blog---next-js-12-qp57ir0e","name":"Blog - Next.js 12"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/react-architecture-patterns-for-your-projects-uo-kqfo5f","name":"React Architecture Patterns for Your Projects"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/no-more-import-in-react-oyoumwmjk","name":"No More ../../../ Import in React"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/atropos---touch-friendly-3d-parallax-hover-effects-jy15-g7-n","name":"Atropos - Touch-friendly 3D parallax hover effects"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/25-hand-picked-react-libraries-you-probably-didn-t-know-existed-4x51df9ef","name":"25 Hand-Picked React Libraries You Probably Didn’t Know Existed"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/free-100-mern-mean-stack-resources-ldsccjgtv","name":"Free 100+ MERN / MEAN Stack resources"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/fakeflix-a-netflix-clone-built-with-react-redux-l2rsueqwu","name":"Fakeflix, a Netflix Clone built with React, Redux"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/blog---next-js-11-v-zjbijch","name":"Blog - Next.js 11"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/react-docs-beta-wjjhlegtt","name":"React Docs Beta"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/best-vs-code-extensions-for-web-development-e6xvg9f4f","name":"Best VS code Extensions for Web Development"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-i-structure-my-react-js-projects-y1xdgruej","name":"How I structure my React.js projects"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/best-react-developer-tools-2021-lsrba5uqz","name":"Best React Developer Tools 2021"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/the-greatest-react-developer-i-ever-met-ebjxm24wf","name":"The Greatest React Developer I Ever Met"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/a-list-of-70-open-source-clones-of-popular-sites-40kuyrhwj","name":"A list of 70+ open source clones of popular sites"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/liquid-swipe-effect-in-react-native-junx90j37","name":"Liquid swipe effect in React Native"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/everything-new-in-react-18-ymsj-nnjn","name":"Everything New in React 18"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/learn-next-js-and-make-react-development-simpler-tc-6il-b0","name":"Learn Next.js and Make React Development Simpler"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/every-react-developer-should-know-these-libraries-6vnnx6lzb","name":"Every React Developer should know these libraries"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/react-project-architecture-gragg8ril","name":"React Project Architecture"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/vs-code-tips-frameworks-js-utils-react-native-k7cxwi-0s","name":"VS Code Tips, Frameworks, JS Utils, React Native"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/5-methods-to-reduce-javascript-bundle-size-svqrupdsy","name":"5 Methods to Reduce JavaScript Bundle Size"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/5-react-performance-optimization-techniques-q1jjjf9kd","name":"5 React performance optimization techniques"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-learn-react-in-2021-the-7-skills-you-need-to-know-jis2quh9t","name":"How to Learn React in 2021: The 7 Skills You Need To Know"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/create-a-mern-stack-app-with-a-serverless-backend-s2aobyso0","name":"Create a MERN Stack App with a Serverless Backend"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/microfrontends-with-react-0dno1mmxp","name":"Microfrontends With React"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"React","item":"https://daily.dev/tags/react"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/react/best-of"},{"@type":"ListItem","position":5,"name":"2021"}]}]} ```