Best of React — September 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 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.

  4. 4
    Article
    Avatar of devtoDEV·2y

    Why React Won the Front-End Race

    React has won the front-end race due to its powerful backing by Meta, flexibility as a library rather than a framework, component-based architecture with JSX, the impressive Virtual DOM, multiple state management options, and the introduction of hooks. Its vast ecosystem and the capabilities of React Native further solidify its dominance, making it a go-to tool for modern web development despite its inherent complexities.

  5. 5
    Article
    Avatar of devsquadDev Squad·2y

    Ground. your animation kit

    Animations have become easier to create with modern tools. This post introduces a set of handcrafted animated components built using Next.js, React, TailwindCSS, and Framer Motion, including elements like carousels, cards, and inputs. Check out Framer Ground for more examples.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    Shadcn Form Builder

    Quickly create forms using Shadcn along with react-hooks-form and Zod for efficient form building and validation.

  7. 7
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    New React 19 Features You Should Know – Explained with Code Examples

    React 19 focuses on simplifying the development process by automating performance optimizations and removing the need for manual memoization hooks like `useMemo` and `useCallback`. The new compiler transforms React code into optimized JavaScript, and features like the `use()` hook streamline data fetching and context handling. Simplified ref handling and form management enhancements also contribute to cleaner and more efficient code.

  8. 8
    Article
    Avatar of joshwcomeauJosh W Comeau·2y

    The Undeniable Utility Of CSS <code>:has<

    The CSS :has pseudo-class is a new and powerful tool that enables styling of parent elements based on their children, working in a 'bottom-up' fashion. This capability opens up numerous possibilities, such as cleaner state-based styling and global event detection without JavaScript. Although it offers compelling advantages, its current 92% browser support necessitates fallback strategies. Practical examples demonstrate :has's ability to solve complex problems effortlessly, although in some cases JavaScript may still be more suitable. The post also showcases practical applications and experiments to highlight its versatility and utility.

  9. 9
    Article
    Avatar of devtoDEV·2y

    100+ React Dashboard Components to Use in 2024

    TailGrids is a comprehensive toolkit designed to help developers effortlessly build modern, user-friendly, and powerful React-based admin dashboards. It includes over 100 essential components such as charts, calendars, and maps, all optimized for performance and scalability with Tailwind CSS. The toolkit also offers four pre-built admin templates to accelerate development.

  10. 10
    Article
    Avatar of webdevbeehiivWeb Developer·2y

    React Cheat Sheet 📄, JWT Best Practices 🔐, SAML Visualization 🔍, CSS Loaders ⏳

    This post offers a variety of resources and updates for web developers, including a React cheat sheet, best practices for JWT authentication, an in-depth visualization of SAML, and a collection of CSS loaders. Additionally, it promotes a free AI and ChatGPT masterclass aimed at enhancing workflow efficiency, covering diverse topics from modern CSS properties to tools for graphics and accessibility.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    Clean React with TypeScript

    The post explores how to integrate TypeScript seamlessly into React applications. It covers typing React components, managing state with useState and useReducer hooks, handling refs for DOM elements, and working with events. It provides practical examples and tips to ensure clean and maintainable code.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Leave useEffect Alone!

    Frontend development can be as intricate as backend work, especially when managing state and optimizing performance in React applications. The popular useEffect hook, while useful for synchronizing components with external factors, can often lead to issues like unnecessary re-renders and race conditions if misused. This post outlines common mistakes and best practices to avoid such pitfalls, offering solutions for proper cleanup, efficient data flow, and minimizing redundant renders. Guidance is provided on when it's appropriate to use useEffect, including initialization, managing external resources, and handling unmounted components without fear of memory leaks.

  13. 13
    Article
    Avatar of devtoDEV·2y

    100+ React E-Commerce Components for Modern Stores

    TailGrids offers over 100 eCommerce UI components specifically designed for React and Tailwind CSS, enabling developers to create scalable, high-performance, and user-friendly online stores with ease. These components cover every aspect of an eCommerce platform, from checkout flows to product carousels, and are fully customizable and responsive across all devices. Additionally, TailGrids provides three pre-built eCommerce templates to kickstart your development.

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    Why do React components need to start with capital letters?

    React components must start with capital letters for Babel to distinguish them from native HTML elements. When a name starts with a capital letter, Babel converts it to a React Fiber object, essential for React's rendering system. Lowercase names are treated as strings, not components.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Mastering Next.js Dynamic Imports for Performance and Efficiency

    Dynamic imports in Next.js help improve performance by loading JavaScript modules asynchronously, reducing initial load times and enhancing the user experience. By leveraging techniques like code splitting and React Suspense, developers can ensure efficient and responsive web applications. Best practices include prioritizing above-the-fold content and using appropriate loading indicators.

  16. 16
    Article
    Avatar of webaccidentsWeb Accidents·2y

    Building a SOLID Pokémon Game in React: A Developer’s Adventure!

    This post explores how to build a Pokémon game in React by applying SOLID principles. It provides examples of breaking down components for Single Responsibility, using Higher-Order Components for Open/Closed, a base component for Liskov Substitution, and context for Dependency Inversion. The post includes a cheatsheet summarizing each SOLID principle with practical tips.

  17. 17
    Video
    Avatar of youtubeYouTube·2y

    Next.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard

    Learn how to design a responsive school management dashboard using Next.js and Tailwind CSS. The dashboard displays different views for admin, student, parent, and teacher roles. Key features include animated charts, user-specific views, and a customizable form using React Hook Form. This project helps in understanding the latest versions of React and Next.js and improving frontend design skills.

  18. 18
    Article
    Avatar of asayerasayer·2y

    Why Choose Vite over Create React App (CRA)

    Create React App (CRA) has been a popular tool for starting new React projects, but it struggles with performance as applications grow. Vite, a modern build tool utilizing Rollup bundler, addresses these limitations with features like native ECMAScript Modules and hot module replacement, resulting in faster build times and optimized performance. Vite's flexible configurations and extensive ecosystem offer a robust alternative to CRA. The post also details the migration process from CRA to Vite, providing a step-by-step guide for React developers.

  19. 19
    Video
    Avatar of youtubeYouTube·2y

    The Most Important Design Pattern in React

    Learn the most important design pattern for React applications, which involves breaking down large components into smaller, reusable components that follow the single responsibility principle. This approach makes code more efficient, readable, and easier to maintain. The author also offers a free document with examples of 10 other crucial design patterns via their newsletter.

  20. 20
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Create a Reusable Modal Component in React

    Learn how to create a reusable modal component in React using principles like DRY (Don't Repeat Yourself) and the atomic design pattern. The guide covers component creation, state and callback function integration, and additional improvements. It emphasizes the use of React hooks like useEffect for better management of component behavior. The modal component is designed for flexibility, with options for custom content and actions.

  21. 21
    Article
    Avatar of logrocketLogRocket·2y

    Building Telegram Mini Apps with React

    Telegram recently launched Mini Apps integration, allowing developers to build various applications within the Telegram ecosystem. These apps offer a native-like experience, bypassing the lengthy app store approval processes. This tutorial covers the creation of a full-stack ecommerce application using React, Node.js, and Postgres with Stripe integration for payments, all to run as a Mini App on Telegram.

  22. 22
    Article
    Avatar of communityCommunity Picks·2y

    coolshapes demo for coolshap.es

    The post demonstrates how to use the coolshapes-react library to add a 'flower' shape to a React component. Two methods are shown: one importing the 'Coolshape' component and specifying the type as 'flower', and the other directly importing the 'Flower' component. Both methods include customizable parameters for index, noise, and size.

  23. 23
    Article
    Avatar of logrocketLogRocket·2y

    How to build scalable micro-frontends with Vike and Vite

    Micro-frontends allow large web applications to be split into manageable, independently scalable parts using different frameworks and tools. Vite's fast build times make it ideal for this architecture, especially with the addition of Vike for server-side rendering (SSR) and static site generation (SSG). This tutorial covers how to use Vike and vite-plugin-federation to build scalable micro-frontends, using Vike as the host and a Vite+Vue project for shared components.

  24. 24
    Article
    Avatar of syncfusionSyncfusion·2y

    React Styling: Essential Tips and Tricks for Designers

    Modern React styling techniques include CSS Modules, Styled Components, and Tailwind CSS. CSS Modules prevent class name conflicts by scoping styles locally. Styled Components integrate CSS in JavaScript for dynamic styling and the creation of reusable UI elements. Tailwind CSS uses utility-first classes, allowing for rapid and scalable design directly within HTML, promoting faster development. Each method offers unique advantages in modularity, customization, and performance optimization for web development.

  25. 25
    Article
    Avatar of communityCommunity Picks·2y

    React Design Patterns

    Discover how to apply design patterns in React to simplify state management, logic, and element composition. Patterns like custom hooks, higher-order components (HOCs), and prop-based rendering techniques enhance code consistency, modularity, and scalability. These patterns not only solve technical issues but also improve code efficiency, readability, and maintainability, enabling more effective collaboration in development teams and building resilient React applications.

See all React archives