Best of React — 2024

  1. 1
    Article
    Avatar of devtoDEV·2y

    React Mindset: How New React Developers Should Think

    React, a prominent JavaScript library for building user interfaces, enhances front-end development through reusable components and efficient UI management. New developers should adopt key principles such as thinking in components, embracing declarative programming, understanding state and props, prioritizing composition over inheritance, managing unidirectional data flow, mastering JSX, using hooks, and testing/debugging early to create modular, scalable, and maintainable applications.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    30+ app ideas with complete source code

    Discover over 30 exciting project ideas with complete source code to help developers generate revenue or build their reputation. Learn to integrate AI features into React apps using CopilotKit, build backends with Appwrite, and use various other tools like Resend, Shadcn UI, Buildship, Taipy, XYflow, Pieces, and Typesense. Each project description includes a popular app built with that tool, showcasing its practical application.

  3. 3
    Article
    Avatar of devtoDEV·2y

    onClick={someFunction} VS onClick={()=>someFunction}

    Using `onClick={someFunction}` directly references the function and executes it on click without creating an extra function, making it more efficient for simple handlers. In contrast, `onClick={() => someFunction()}` creates a new function on each render, ideal for scenarios where arguments need to be passed or additional operations are required before executing the function.

  4. 4
    Article
    Avatar of opensourcefrontendOpen Source Front End·1y

    I built a Flexbox Playground with Awesome Animations

    Flexbox labs is an open source visual tool designed to help you create and customize CSS Flexbox layouts. Key features include an edit tab, save tab, pre-built layouts, and options for customizing the app. The tool is built using React, TypeScript, Sass, and Framer Motion.

  5. 5
    Article
    Avatar of communityCommunity Picks·2y

    How I Use ChatGPT as a Frontend Developer (5 Ways)

    A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working with regular expressions, and finding code solutions. By leveraging ChatGPT, tasks such as creating Material UI skeletons or finding regex solutions become more efficient, saving time and enhancing productivity.

  6. 6
    Article
    Avatar of devtoDEV·2y

    🖥️ Windows 11 Clone with React.js

    A developer created a Windows 11 clone web app using React.js, mimicking various Windows 11 functions like an interactive desktop environment, taskbar with start menu, and applications such as Chrome, Calculator, and VS Code. Other features include a responsive frontend and a simulated login screen. The technical stack includes React.js, Tailwind CSS, React Router DOM, Framer Motion, and React Draggable. The source code and demo are available on GitHub.

  7. 7
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    React Best Practices Ever Developer Should Know

    This guide offers crucial tips on optimizing React development using hooks. It covers the importance of maintaining immutability in state management, avoiding the overuse of useState, leveraging useMemo for performance improvements, ensuring unique keys for list items, and properly handling dependencies in useEffect. The guide also advises on alternatives to useEffect for managing side effects efficiently, contributing to cleaner and more efficient code.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    React Design Patterns

    React design patterns are essential for frontend development as they offer solutions to recurring challenges in component design. They promote consistency, modularity, and scalability by simplifying state management, logic, and element composition. Examples include custom hooks, higher-order components, and prop-based rendering techniques. These patterns not only solve technical problems but also enhance code efficiency, readability, and maintainability. This guide provides insights into various patterns like Custom Hook, HOC, Extensible Styles, Compound Components, Render Props, Control Props, Props Getters, State Initializer, and State Reducer, along with their benefits and implementation examples.

  9. 9
    Article
    Avatar of reactjsxReactTsx·1y

    Cursify - Cursor Animation Library

    Cursify is an open-source library designed for creating stunning cursor animations. It is built with React, TypeScript, Tailwind CSS, and Framer Motion, making it 100% customizable and easy to integrate into projects, enhancing interactivity effortlessly.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    Glass: an AI copilot for React and Next.js developers.

    Glass provides an AI-powered assistant for React and Next.js developers, enabling them to create components, modify props, and write Tailwind CSS directly from the browser. It also allows developers to visualize component structures by hovering over elements and instantly jump to the source code of the selected element.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    ⚛️ Folder Structures in React Projects

    Explore different folder structures in React projects for maintainability, scalability, and ease of navigation. Group files by type, feature, or module depending on the project's size and complexity.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Frontend resources! 🚀

    A collection of frontend resources for UI creation, performance optimization, and more.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    New Features in React 19 – Updates with Code Examples

    React 19 introduces new features such as the React compiler, server components, actions, web components, enhanced hooks, asset loading, and form hooks. These changes aim to improve performance, simplify coding, and enhance the user experience.

  14. 14
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    React Libraries to Use in Your Projects in 2024

    Learn about helpful libraries for building React applications in 2024, including the recommended React framework, styling options, state management, data fetching, routing, authentication, database and ORM options, date/time libraries, form libraries, drag and drop libraries, mobile app development, deployment platforms, and the importance of TypeScript. Don't miss out on the React Bootcamp for comprehensive React learning resources!

  15. 15
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Master React by Building 25 Projects

    Learn React and build 25 projects to enhance your understanding of React's capabilities. Course covers various projects including accordion, random color generator, star rating, image slider, and more. Watch the full course on the freeCodeCamp.org YouTube channel.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    35+ Free React templates and themes

    This collection offers over 35 high-quality free React templates and themes suitable for various projects such as admin dashboards, landing pages, blogs, and online portfolios. The list includes resources specifically designed to kickstart your development process with pre-designed components, dark and minimalistic designs, and modern UI elements. Each template comes with unique features like responsive layouts, customizable elements, and extensive documentation to facilitate easy setup and use.

  17. 17
    Article
    Avatar of devtoDEV·2y

    Best Icon Libraries

    The landscape of icon libraries has significantly evolved in 2024, offering designers and developers more options, better integration, and enhanced customization. Notable mentions include Lineicons V5 with over 30,000 icons and advanced features like a free CDN and icon editor. Heroicons, Uicons, Iconify, Streamline Icons, and others are also highlighted for their unique offerings and ease of use. Many of these libraries are free or open-source, making them accessible for various project needs.

  18. 18
    Article
    Avatar of devtoDEV·2y

    Best Icon Libraries for a Dev in 2024

    Discover the top icon libraries every developer should consider in 2024. These libraries offer high-quality icons, extensive collections, and easy integration with React projects, enhancing the visual appeal and functionality of digital experiences.

  19. 19
    Article
    Avatar of communityCommunity Picks·2y

    dotUI

    dotUI offers a collection of accessible, mobile-friendly, and modern UI components for building React applications. Components include various input elements like Checkbox, NumberField, and Radio Group, as well as tools for handling dates and colors. The project is open-source and available on GitHub for contributions.

  20. 20
    Article
    Avatar of faunFaun·2y

    Top Tips and Tricks with Tailwind CSS

    Learn top tips and tricks to enhance your Tailwind CSS projects, including how to properly delegate classes, manage spacing between elements, and avoid overuse of the @apply utility. Discover how to add opacity, transitions, and animations, utilize group hover and pseudo-classes, and customize input values. Check out the provided resources for pre-made components and use the Tailwind IntelliSense plugin for an improved workflow.

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    17 Libraries You Should Know if You Build with React

    Discover 17 open source projects for React developers, covering various areas like AI chatbots, UI building, validation, testing, database, UI components, animations, internationalization, and more.

  22. 22
    Article
    Avatar of medium_jsMedium·2y

    We Forgot Frontend Basics

    This post discusses how frontend development has become overcomplicated with endless trends and paradigms, and highlights the importance of mastering basic skills, such as vanilla JavaScript, HTML, and CSS. It also provides tips for improving frontend development skills.

  23. 23
    Article
    Avatar of communityCommunity Picks·2y

    Every React Concept Explained in 5 Minutes

    React is a versatile JavaScript library for building front-end code efficiently. Key concepts include Components, JSX, Fragments, Props, State, Lifecycle Methods, Purity, Strict Mode, Hooks, Context API, Lists and Keys, Controlled and Uncontrolled Components, and React Router. Understanding these concepts enables efficient development of interactive and dynamic web applications using React.

  24. 24
    Article
    Avatar of devtoDEV·2y

    How I Structure my React Projects

    Learn how to structure your React projects for better organization and clarity. Use absolute imports for cleaner and more readable import statements. Use the index.ts file as the public API of each feature.

  25. 25
    Article
    Avatar of devsquadDev Squad·1y

    Web Development Tools You Should Consider Using in 2025

    Discover five web development tools that promise to enhance productivity and efficiency in 2025, including an intelligent terminal with AI features (Warp), a powerful Git client for managing branches (GitButler), a comprehensive Tailwind components library for React and HTML (Wind UI), a tool for better terminal log readability (Logdy), and a utility platform for creating engaging web animations (Glaze).

See all React archives