Best of React — January 2025

  1. 1
    Article
    Avatar of gcgitconnected·1y

    Frontend Developer Roadmap 2025: The Complete Guide

    This guide provides a comprehensive roadmap for aspiring frontend developers in 2025, covering essential skills such as understanding web basics, setting up a coding workspace, HTML, CSS, JavaScript, version control with Git and GitHub, and learning popular frameworks like React. It also includes bonus skills like advanced JavaScript techniques, TypeScript, automated testing, and hosting options, all designed to help developers stand out.

  2. 2
    Video
    Avatar of huxnwebdevHuXn WebDev·1y

    50+ HOURS REACT.JS 19 MONSTER CLASS

  3. 3
    Video
    Avatar of huxnwebdevHuXn WebDev·1y

    ADVANCE REACT: THE BIGGEST REACT.JS COURSE ON THE INTERNET ( PART 3 )

    This React.js course covers advanced topics including React design patterns, React Query, JavaScript unit testing, and React testing. It is part of a series that thoroughly explores React fundamentals, hooks, Redux toolkit, Zustand for state management, and Frame Motion. Future parts will delve into tools like Storybook, React design systems in Figma, and micro frontends.

  4. 4
    Article
    Avatar of frontend_developerFrontend developer·1y

    React animated library

    React Bits is an open-source library by David Haz that offers various animated components and useful snippets for React.js projects. Key features include text animations like Split Text and Wave Text, general animations such as Animated Container and Blob Cursor, and components like Stack and Masonry, simplifying the implementation of animated elements in React applications.

  5. 5
    Article
    Avatar of communityCommunity Picks·1y

    RizzUI

    RizzUI is a modern and minimal React UI library built with TailwindCSS, designed to offer simple, customizable, and accessible components. It includes a variety of production-ready elements categorized under buttons, inputs, navigation, feedback, overlays, data display, typography, and integrations. RizzUI emphasizes ease of use, full customization, type safety, and accessibility compliance.

  6. 6
    Article
    Avatar of tigerabrodiTiger's Place·1y

    Become expert in React Query

    This post aims to deepen your understanding of React Query, highlighting its capabilities beyond simple data fetching to being a server state manager. It clarifies key concepts like stale data, cache, and invalidation, and provides best practices for using query keys and query functions. Practical examples cover common mistakes, the defaults of React Query, and advanced techniques like prefetching, handling optimistic updates, and configuring infinite queries. The guide emphasizes reading the official documentation and leveraging dev tools for debugging.

  7. 7
    Article
    Avatar of communityCommunity Picks·1y

    Computer Science for Frontend Developers

    Discusses the importance of computer science fundamentals for frontend developers, debating whether knowledge of data structures and algorithms is necessary. Provides a nuanced perspective, suggesting developers understand basic concepts to optimize performance when needed, especially with graphics or animations. The post also includes a simple roadmap for learning key concepts and recommends resources for further education.

  8. 8
    Video
    Avatar of huxnwebdevHuXn WebDev·1y

    THE MOST ADVANCE REACT.JS COURSE: THE BIGGEST REACT.JS COURSE ON THE INTERNET ( PART 4 )

    This comprehensive React.js course covers React fundamentals, hooks, TypeScript, UI component libraries, state management with Zustand and Redux Toolkit, animations with Framer Motion, and the testing of components. The final part delves into building a design system in Figma, leveraging tools like Storybook, Style Dictionary, and CLsx. It also includes setting up a complete authentication system and using Figma for creating design systems, and generating style tokens for consistency.

  9. 9
    Video
    Avatar of asaprogrammerAs a Programmer·1y

    Next.js Tutorial 2025 - Build a Full Stack Social App with React & Next.js

    Learn to build a full stack social media application using React and Next.js. This detailed guide covers implementing core features like user authentication with Clerk, post creation, comments, likes, and notifications. The project also includes updating profiles, enabling dark mode, and ensuring a responsive UI design with Tailwind CSS. You will also integrate a PostgreSQL database using Prisma ORM and Neon, demonstrating key functionalities step-by-step.

  10. 10
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    My Biggest Tutorial Ever (Build A FULL Google Drive Clone with React, Next, TypeScript and more)

    In this extensive tutorial, the author shares a comprehensive guide on building a full Google Drive clone from scratch using React, Next.js, TypeScript, and other modern tools. By diving into real-world development scenarios, including debugging and using AI tools, the tutorial aims to provide a holistic learning experience. Key points include setting up the project, using various tools and technologies, deploying early, and ensuring smooth development workflows with effective debugging and deployment strategies. The tutorial is made possible by the support of several sponsors and is designed to be accessible to learners for free.

  11. 11
    Article
    Avatar of logrocketLogRocket·1y

    Onlook: A React visual editor

    Onlook is an open source visual editor designed specifically for React applications, bridging the gap between design and development by offering features like real-time preview, drag-and-drop editing, and seamless code generation. It allows developers to visually manipulate components and make real-time changes directly in their codebase. Onlook compares favorably to traditional design tools and no-code builders by maintaining direct integration with React projects, thus improving workflow efficiency and collaboration between designers and developers.

  12. 12
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Build a Dynamic Web Scraper App with Playwright and React: A Step-by-Step Guide

    Build a web scraper app with Playwright and React to scrape data from Airbnb and display it in a grid view. Utilize local storage for efficient performance and an Express.js server to handle API requests. Follow detailed steps for setup, including installing Vite, TailwindCSS, and Playwright, creating a server, and implementing retry mechanisms for reliability. Learn how to deploy the app on render.com and understand the importance of ethical and legal considerations in web scraping.

  13. 13
    Article
    Avatar of webdevelopementWeb Developement·1y

    Roadmap to master React in 02 months

    This post provides a comprehensive guide and timeline to help individuals become proficient in React within two months, outlining essential skills and steps for effective learning.

  14. 14
    Article
    Avatar of the_react_communityThe React Community·1y

    React Portfolio with Framer Motion

    A developer shares their 2023 portfolio, built with ReactJS and Framer Motion, and seeks feedback to improve its travel section. They aim to enhance interaction and animation and are looking for tips to improve UX/UI.

  15. 15
    Video
    Avatar of wdsWeb Dev Simplified·1y

    Build A Course Platform LMS With Next.js 15, React 19, Stripe, Drizzle, Shadcn, Postgres

    The post provides a detailed tutorial on how to build a course platform LMS using Next.js 15, React 19, Stripe, Drizzle, and Postgres. The platform allows users to purchase individual courses or bundles, with functionalities for signing in, processing payments, viewing purchase histories, and marking course progress. The admin side includes dashboards to manage sales, refunds, courses, and products. Key practices include setting up databases with Drizzle, using the canary version of Next.js for the latest features, and integrating Clerk for user management. This comprehensive guide also covers best practices and the technical reasons behind various coding choices.

  16. 16
    Article
    Avatar of tigerabrodiTiger's Place·1y

    How React's Render, Effects and Refs work under the hood

    Understanding React's render cycle is crucial for writing efficient code. This detailed guide explains the render cycle phases, the differences between useEffect and useLayoutEffect, and how refs work. It also covers the concepts of the Virtual DOM and its role in batching updates, making React flexible across different platforms. The post includes practical examples to solidify your understanding.

  17. 17
    Video
    Avatar of bytegradByteGrad·1y

    Build A Next.js SaaS From Scratch (Step-By-Step)

    Learn to build a full-stack Next.js SaaS application from scratch. The tutorial covers the creation of a landing page, a private dashboard for tracking expenses, user authentication, integration with Stripe for payments, and adding analytics using Posthog. Key Next.js concepts such as server components, routing, and database interaction are also explained.

  18. 18
    Video
    Avatar of asaprogrammerAs a Programmer·1y

    Video Calling Interview Platform: Build a Full Stack Project with React & Next.js

    The post provides a comprehensive guide to building a video calling interview platform with React and Next.js. Key features include video and audio calls, screen sharing, a code editor with support for multiple programming languages, and interview management functionalities for candidates and interviewers. The project utilizes Convex for a real-time database, Clerk for authentication, and Stream for video calls, ensuring that all required tools are free to start. Detailed instructions are provided for setting up and deploying the application.

  19. 19
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    Abort Controller is criminally underrated (every react dev should use this)

    Abort Controller in JavaScript is a powerful tool for canceling asynchronous operations like API requests, event listeners, and streams. This feature is particularly useful for React developers, simplifying the management of useEffect cleanup functions, event listeners, and fetch requests. The Abort Controller can enhance code clarity and reduce bugs by providing a consistent way to abort operations through the controller's signal and abort methods.

  20. 20
    Article
    Avatar of devtoDEV·1y

    The Ultimate Frontend Developer Roadmap for 2025

    Frontend development in 2025 integrates advanced tools, frameworks, and AI. Mastering basics like HTML5, CSS3, and modern JavaScript is crucial. Proficiency in version control, CSS frameworks, and JavaScript frameworks such as React.js, Next.js, Angular, or Vue.js is essential. AI tools enhance coding, design, and testing workflows. Advanced concepts include TypeScript, performance optimization, design systems, and next-gen technologies like edge computing and server components. Integration of AI/ML libraries, backend skills, CI/CD, deployment strategies, and soft skills round out the skill set of a versatile frontend developer.

  21. 21
    Article
    Avatar of reactjsxReactTsx·1y

    Roadmap to master React in 02 months

    Guide providing a step-by-step plan to become a proficient React developer in three months.

  22. 22
    Article
    Avatar of communityCommunity Picks·1y

    Building a CRUD app with Shadcn UI and Refine

    Learn how to integrate Shadcn UI components with a Refine app using Vite and TypeScript. This post walks you through setting up TailwindCSS, configuring TypeScript and Vite, and generating Shadcn components such as tables, buttons, and pagination for a seamless UI experience.

  23. 23
    Article
    Avatar of devopsDevOps.com·1y

    Master Building Scalable Micro-Frontend Application Using React

    Micro-frontend architecture divides monolithic applications into smaller, independent units, offering enhanced flexibility and development speed. This guide explains the benefits and steps to build scalable micro-frontend applications using React, including creating a parent application, developing components, and integrating them using single-spa. It also highlights best practices such as lazy loading, shared libraries, and effective testing strategies to ensure optimal performance.

  24. 24
    Video
    Avatar of bytegradByteGrad·1y

    Stream Video In React & Next.js OPTIMALLY (WebM, CDN, m3u8 / HLS / ABS, ImageKit)

    Learn how to optimally stream videos using React and Next.js, including adaptive bitrate streaming for different network conditions. The tutorial explains the use of the native video tag and Video.js player for HLS streaming, and the benefits of hosting videos on ImageKit, such as automatic format and quality optimization, CDN integration, and using signed URLs for security.

  25. 25
    Video
    Avatar of programmingwithmoshProgramming with Mosh·1y

    From Zero to Blockchain Developer in 10 Months: Complete Roadmap

    A complete roadmap to become a blockchain developer in 8-10 months by studying 3-5 hours a day. It covers learning Python or JavaScript, using Git for version control, mastering data structures and algorithms, writing smart contracts with Solidity using Remix IDE, deploying them with Hardhat, and building decentralized applications using React and web3 libraries like web3.js or ethers.js. Supplementary resources like tutorials and courses are provided.

See all React archives