Best of React — February 2024

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

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

  3. 3
    Article
    Avatar of devtoDEV·2y

    Goodbye Electron. Hello Tauri!

    Learn about Tauri, a Rust-powered backend framework paired with a React frontend for creating standalone desktop applications. Discover its advantages, including smaller binary sizes compared to Electron.

  4. 4
    Video
    Avatar of fireshipFireship·2y

    They made React great again?

    React has made significant improvements with the introduction of a compiler, eliminating the need for certain features like 'useMemo' and 'forwardRef'. The major frameworks are becoming more similar, leading to a call for a standardized framework.

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

    React 19 Is Finally Coming

  6. 6
    Article
    Avatar of povioPovio·2y

    How to React in 2024

    Learn about the latest developments in React, including the use of TypeScript, the TanStack tools, and UI component libraries, and how they contribute to the evolving landscape of web development.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    Optimizing our post page performance

    daily.dev optimized post page performance by addressing issues with excessive DOM size and JavaScript execution on pages with heavy user interactions and comments. They utilized Chrome's content-visibility property and lazy rendering comments with the IntersectionObserver API to improve page responsiveness and reduce main thread work, resulting in enhanced user experience and SEO.

  8. 8
    Article
    Avatar of devtoDEV·2y

    NodeJS Security Best Practices

    Learn how to improve the security of your NodeJS application by using packages like helmet for preventing attacks, toobusy-js for preventing DOS attacks, and express-rate-limit for rate limiting.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    React 19 Will Be Compiled

    React 19 will introduce auto-memoization to fix the main issues with hooks in functional components. The evolution of React from class components to functional components led to the need for memoization. Memoization plays a significant role in improving performance in React applications.

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

    MarioKart.js Blew My Mind (Open Source + React + ThreeJS)

    A developer has recreated the classic multiplayer game Mario Kart using react and threejs, and the project is now open source. The game utilizes react 3 fiber, a wrapper for threejs that simplifies 3D rendering in webgl. The code is easy to read and understand, and the developer has included additional open source projects related to gamepad control and cart physics. The camera in react 3 fiber allows for easy manipulation of the game's viewpoint. The project also incorporates the use of libraries such as zustand for managing game state.

  11. 11
    Article
    Avatar of robinwieruchRobin Wieruch·2y

    React Trends in 2024

    Exciting trends in React for 2024 include Astro with React, new authentication alternatives, tRPC for full-stack React applications, React Server Components and Next.js, TanStack Router for SPA React, Vercel pushing React on the Edge, bundlers for React, React Compiler, Biome, and headless UI libraries for React.

  12. 12
    Article
    Avatar of devtoDEV·2y

    Tailwind CSS under the hood

    Learn about utility-first CSS and the benefits of using Tailwind CSS. Discover how Tailwind CSS works under the hood.

  13. 13
    Article
    Avatar of devtoDEV·2y

    Inside React Labs: REACT 19 is coming!

    React 19 brings major changes such as the React compiler for optimizing rendering, server actions for client-only applications, and the introduction of a Canary release with new features. The release date is expected to be either this year or the beginning of next year.

  14. 14
    Video
    Avatar of communityCommunity Picks·2y

    This UI component library is mind-blowing

    Discover a mind-blowing UI component library that offers a collection of reusable components for lazy developers. Learn how to use it in your project and explore advanced animations that can be achieved with this library.

  15. 15
    Article
    Avatar of devtoDEV·2y

    🍿 Lazy loading

    Lazy loading is a technique used to tackle the issue of a large bundle size in a bundler. It involves breaking down an app into smaller logical chunks and loading components only when they are requested. Lazy loading is also known as chunking, code splitting, dynamic import, dynamic bundling, and on-demand loading.

  16. 16
    Article
    Avatar of devtoDEV·2y

    Create VS Code Extension with React, TypeScript, Tailwind

    This post provides a step-by-step guide on how to create a VS Code extension using React, TypeScript, and Tailwind CSS. It covers topics such as extension creation, Webview API for UI, styling UI, scripting, implementing React, TypeScript, and Tailwind, and also includes a bonus section on using the VS Code UI Toolkit.

  17. 17
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    React Optimization Techniques to Help You Write More Performant Code

    Learn about various React optimization techniques including list visualization, lazy loading images, and memoization. Discover the importance of performance optimization in React applications and how it can improve user experience, SEO, and cost savings. Explore the use of React Fragments, Web Workers, and the useTransition hook. See how code splitting, throttling, and debouncing events can enhance performance.

  18. 18
    Article
    Avatar of phProduct Hunt·2y

    Tailframes - Open Source components library for React & Tailwind CSS

    Tailframes is an Open Source components library for React & Tailwind CSS that aims to speed up your workflow by providing a copy-paste interface, code snippets on CodePen, UI components, landing page sections, and more.

  19. 19
    Article
    Avatar of builderiobuilder.io·2y

    Why React Server Components Are Breaking Builds to Win Tomorrow

    Explore how React Server Components (RSC) revolutionize web development by combining the strengths of server-side rendering and client-side rendering. RSCs offer benefits such as zero-bundle sizes, direct access to server-side resources, improved SEO, faster initial page load, and enhanced data fetching. By leveraging RSCs, developers can build cost-effective, high-performance React applications that deliver exceptional user experiences.

  20. 20
    Article
    Avatar of medium_jsMedium·2y

    Collection of Custom Hooks For Your Nextjs-React Project

    Learn about custom hooks in React and how they can streamline and enhance React development. Explore examples of useful custom hooks that can be leveraged in Next.js-React projects.

  21. 21
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Build a Mobile Swiping Component in React

    Learn how to create a mobile swiping component in React without relying on libraries. The tutorial covers simulating a mobile device in Google Chrome, creating a MobileSwiper component, and disabling scrolling behavior when swiping on mobile.

  22. 22
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Render an Array of Components in React

    Learn how to render arrays of components in React and handle array rendering issues with unique identifiers.

  23. 23
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Create Animations in React 18

    Learn how to create CSS animations in React 18 for a better user experience. Get a quick introduction to the 2048 game and see examples of highlighting and sliding animations. Find out the prerequisites for creating animations and discover a course on Udemy to build your own 2048 game.

  24. 24
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Learn the Hard Parts of React – and Tips to Conquer Them

    A guide to mastering React, including its fundamentals, the good and bad parts of React, and how to overcome challenges like key prop mishaps, mutating states directly, and bugs with conditional rendering. It also covers the importance of using dependency arrays, optional chaining for API data, and React Fragments for grouping JSX elements.

  25. 25
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    How to Create a Custom React Hook – a Hands-on Tutorial

    Learn how to create a custom React hook, the benefits of using custom hooks, and how they can improve the quality of your code. The tutorial focuses on creating a specific custom hook called usePreviousProps, which tracks previous values of component props. The use case for this hook is highlighted by an example of creating highlighting animations. The post also provides a summary of React hooks and encourages readers to experiment and create their own custom hooks.

See all React archives