The latest articles on DEV Community by Vivek Sharma (@vivsh). https://dev.to/vivsh https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F327047%2Fe3e0a087-179b-48b9-b38d-a3a690cdc446.png https://dev.to/vivsh en Vivek Sharma Sun, 30 Jul 2023 09:36:01 +0000 https://dev.to/vivsh/level-up-your-react-game-1c1o https://dev.to/vivsh/level-up-your-react-game-1c1o <p>Hey fellow Frontend Devs! Preparing for a React-focused interview? (Or just want to explore and grow). It's time to get cozy with those concepts and crush it in style.</p> <p>📢 Share this post: If you find this post helpful and think it could benefit other frontend developers, don't hesitate to share it. Spread the knowledge and help others level up their React knowledge! 🚀</p> <h2> Basics 🎓 </h2> <p>Had it been a few months back, I might have recommended different links for each topic. However, as of now, there is no better resource than the new React documentation itself. </p> <ul> <li><a href="https://react.dev/learn">To begin</a></li> <li><a href="https://react.dev/reference/react">Dive deep</a></li> </ul> <h2> State management 📦 </h2> <p>When dealing with a large project the Context API or existing state management features could become a drag on the progress.<br> You can try out these awesome libraries that can quickly become a part of project.</p> <ul> <li> <p><strong>RTK(Redux toolkit)</strong><br> Opinionated, powerful, addresses all concerns related to vanilla redux.</p> <ul> <li><a href="https://redux-toolkit.js.org/">Docs</a></li> <li><a href="https://codesandbox.io/s/redux-essentials-counter-example-un8my">Try Live</a></li> </ul> </li> <li> <p><strong>Zustand</strong> <br> Small, effective and targets most common pitfalls.</p> <ul> <li><a href="https://docs.pmnd.rs/zustand/getting-started/introduction">Docs</a></li> <li><a href="https://codesandbox.io/s/dazzling-moon-itop4">Live</a></li> </ul> </li> <li> <p><strong>React Query</strong><br> Most of the frontend work involves dealing with API calls and caching/storing response data when required.<br> So this library can help you get all the features with minimum code to setup.</p> <ul> <li><a href="https://tanstack.com/query/latest">Docs</a></li> <li><a href="https://codesandbox.io/p/sandbox/tanstack-query-example-react-basic-086cq0">Live</a></li> </ul> </li> </ul> <h2> Optimizing 🛠️ </h2> <ul> <li> <strong>Profiling + Hooks + lazy loading (Inside the box)</strong>: Optimizing using the already existing features of react <ul> <li><a href="https://blog.logrocket.com/optimizing-performance-react-app/">Blog</a></li> </ul> </li> <li> <strong>Million.js (Outside the box)</strong>: This library works by replacing React's virtual DOM with its own and can increase the speed by 70%! <ul> <li><a href="https://million.dev/">Docs</a></li> </ul> </li> </ul> <h2> Testing 🧪 </h2> <ul> <li> <strong>RTL + Jest (Unit testing)</strong> For component testing, focusing on testing components' rendering, behavior, and interactions in isolation, in a more developer-centric testing environment <ul> <li><a href="https://www.digitalocean.com/community/tutorials/how-to-test-a-react-app-with-jest-and-react-testing-library">Blog</a></li> </ul> </li> <li> <strong>Cypress</strong> For E2E testing, simulating user interactions, and testing complex user flows across multiple pages or components. <ul> <li><a href="https://www.cypress.io/">Docs</a></li> </ul> </li> </ul> <p>Looking forward to your feedback or any other resource worth sharing. 🙌</p> webdev react beginners opensource