Best of React — July 2024

  1. 1
    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.

  2. 2
    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.

  3. 3
    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.

  4. 4
    Article
    Avatar of devtoDEV·2y

    Top 6 React Hook Mistakes Beginners Make

    Learning React involves not just grasping its basics but also writing clean, efficient code. Common mistakes include using state unnecessarily, not using the function version of useState, misunderstanding state updates, and unnecessary useEffect dependencies. Optimizing component rendering can be achieved through proper use of useRef and useMemo. Additionally, it's crucial to manage fetch requests properly by using AbortController to prevent memory leaks.

  5. 5
    Article
    Avatar of communityCommunity Picks·2y

    Patterns For JavaScript Frontend Applications

    Patterns are crucial in managing the complexity of JavaScript frontend applications, much like they were in desktop and enterprise applications. By drawing on architectural patterns like MVVM, CQRS, and Flux, developers can better manage the state and interactions within their applications. Frameworks like Angular, React, and Vue help streamline these processes through structured state-management techniques. Understanding these patterns allows for sustainable and maintainable application development.

  6. 6
    Video
    Avatar of wdsWeb Dev Simplified·2y

    How To Debug React Apps Like A Senior Developer

  7. 7
    Article
    Avatar of devsquadDev Squad·2y

    Introducing Eldora UI

    Eldora UI is an open-source UI library designed for creating stunning web interfaces using React, TypeScript, Tailwind CSS, and Framer Motion. It offers customizable and animated components that are perfect for building responsive and visually appealing websites. Unique components like Cobeglobe and Spotlight Card are highlighted, and there is an active GitHub community for collaboration and innovation.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    Top 15 Animation Libraries for React & Modern Javascript Apps

    Animations enhance web applications by making them more engaging and interactive. This guide explores the top 15 animation libraries for React and modern web apps, ranging from simple CSS-based options like Animate.css to powerful JavaScript libraries such as React Spring, Framer Motion, and GSAP. Specific use cases are addressed with libraries like Remotion for video generation and Vivus for SVG animations, while advanced needs can be met with Three.js and Theatre.js. Each library is evaluated based on its best use case, pros, and cons, helping you choose the right tool for your project.

  9. 9
    Article
    Avatar of devtoDEV·2y

    Image Lazy Loading

    The post introduces image lazy loading as a technique to improve React application performance. It highlights advantages such as faster initial load times, reduced bandwidth usage, smoother scrolling, and improved search engine ranking. It provides an example using both native lazy loading attributes and the `react-lazy-load-image-component` npm package. The author advises caution for certain use cases like carousels and above-the-fold images.

  10. 10
    Article
    Avatar of devtoDEV·2y

    Building a CRUD Application with the MERN Stack: A Step-by-Step Guide

    This guide walks you through building a CRUD application using the MERN stack. It covers setting up the backend with Express, MongoDB, and Mongoose, creating API routes for CRUD operations, and setting up the frontend with React. The frontend components include TodoList, TodoItem, and TodoForm, and the guide explains how to integrate these components and run the application.

  11. 11
    Article
    Avatar of syncfusionSyncfusion·2y

    React Hooks vs. Redux in 2024

    The post explores the differences between React Hooks and Redux for state management in React applications in 2024. React Hooks are ideal for simpler, component-level state management and faster development, while Redux is better suited for complex, large-scale applications with global state management. It provides an in-depth comparative analysis and examples of both approaches, highlighting their advantages, common use cases, and performance considerations.

  12. 12
    Article
    Avatar of logrocketLogRocket·2y

    7 best product tour JavaScript libraries for frontend apps

    Modern web applications often contain numerous features which can overwhelm users if not presented properly. Product tours are a structured way to guide users through these features, enhancing user experience. This post reviews seven JavaScript libraries suitable for creating product tours, highlighting their features, pros, cons, and use cases. Libraries discussed include Intro.js, Onborda, Bootstrap Tour, Driver.js, TourGuide.js, Flows, and Shepherd.js, each catering to different needs and frameworks, helping developers make an informed choice for their projects.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    From Web to Native with React

    React Native enables web developers with experience in React to create native mobile apps using JavaScript or TypeScript. It allows for multi-platform code sharing between iOS and Android from a single codebase. Expo is recommended as a framework to bridge the gaps in React Native core capabilities, providing essential tools for production apps. Key differences between web and native development include the use of UI primitives and styling methods. Developers should avoid certain common pitfalls, such as using array.map for rendering large lists or the logical AND operator in rendering. Key native-specific concepts include build signing, deep linking, gestures, haptics, and handling the on-screen keyboard.

  14. 14
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Optimize Next.js App Performance With Lazy Loading

    Learn how to optimize Next.js app performance by implementing lazy loading techniques for client components. By deferring the load of client components and imported libraries until needed, initial load times can be significantly improved. The post covers techniques using `next/dynamic` and `React.lazy()` with `Suspense`, along with handling lazy loading for named exports and considerations for server components.

  15. 15
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    A Very Exciting New Chart Library

    Shaden has released a new chart library that promises ease of use and powerful customization options, built on top of technologies like D3 and Recharts. The setup process is straightforward, involving just a few commands, and the library includes numerous pre-configured chart types and components. Users can easily integrate and customize these charts to suit their needs, making it a versatile tool for developers looking to enhance their projects with dynamic data visualizations.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    Installation • Tremor Raw

    Tremor Raw can be set up with React v18.2.0+ and Tailwind CSS v3.4+. It is compatible with frameworks like Next.js, Vite, and Remix. Additional resources include Tremor Blocks for production-ready components and a Figma UI Kit for design purposes. The Remix Icon set, licensed under Apache License 2.0, is recommended for use.

  17. 17
    Video
    Avatar of wdsWeb Dev Simplified·2y

    Learn React Generic Components In 6 Minutes

  18. 18
    Article
    Avatar of syncfusionSyncfusion·2y

    What’s New in React 19?

    React 19 introduces async functions and the useTransition hook, revolutionizing state management and data handling. New features such as Actions for data mutations, optimistic updates with useOptimistic, streamlined form handling with useActionState, and server components enhance the development experience. The update also improves hydration error reporting, ref handling, stylesheet management, and support for custom elements and document metadata.

  19. 19
    Article
    Avatar of devsquadDev Squad·2y

    Introducing Animata

    Animata is a free and open-source project designed to simplify the addition of animations to React and Tailwind projects. It offers a diverse collection of 40+ customizable animation components. Users can browse for inspiration, utilize pre-built animations, and dive into the code to learn the principles of CSS animations. The project encourages contributions and provides detailed documentation to assist with implementation. Feedback is welcome to improve the project, which is currently in its beta phase.

  20. 20
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    What's the Difference Between the useMemo and useCallback Hooks?

    React provides hooks like useMemo and useCallback to optimize application performance. useMemo caches the return value of an expensive calculation to avoid recomputation on re-renders, while useCallback caches function references to prevent unnecessary re-creations and re-renders. Understanding when and how to use these hooks can significantly improve your app's performance.

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    React Wrap Balancer

    React Wrap Balancer is a lightweight React component designed to make titles more readable by avoiding single hanging words on the last line. It offers easy installation with npm and simple usage by wrapping text content with its <Balancer> component. It supports server-side rendering, works well with web fonts, and integrates with Next.js 13. Custom balance ratios can be set, and it switches to native CSS text-wrap: balance if available. Despite minor performance overhead, it significantly improves text layout, especially in tooltips and multi-line content.

  22. 22
    Article
    Avatar of codemotionCodemotion·2y

    Excalidraw: Diagrams Set in Stone

    Excalidraw is an open-source online drawing tool designed for creating flowcharts, sketches, and wireframes. Its user-friendly interface, real-time collaboration features, and flexibility make it an excellent choice for developers and teams. Installation is straightforward using npm or yarn, and integration into projects is seamless. Excalidraw's focus on simplicity and rapid prototyping distinguishes it from more complex alternatives like Draw.io.

  23. 23
    Article
    Avatar of communityCommunity Picks·2y

    React Components Demystified: Your Ultimate Guide from Newbie to Ninja

    This post delves into various types of React components, offering insights from basic functional components to advanced higher-order components (HOCs). The benefits and use cases of functional, class, and arrow function components are discussed, alongside the setup of class components with constructors. The importance of HOCs for reusing component logic is highlighted.

  24. 24
    Article
    Avatar of communityCommunity Picks·2y

    10 reasons why React JS is very popular in 2024

    React JS remains a top choice for web developers in 2024 due to its strong community support, performance optimizations, component-based architecture, and backing from Facebook. The library boasts an extensive ecosystem, rich documentation, and versatile tools for both web and mobile development. Its SEO-friendliness and continuous innovation, along with a robust job market for React developers, further solidify its popularity.

  25. 25
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    Node FINALLY Supports TypeScript

See all React archives