Best of React — December 2023

1. 1
   Article

   builder.io·2y

   Next.js 14: Layouts vs Templates

   Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates remount with each page transition. Layouts ensure consistency, maintain state, and boost performance, while templates provide isolation, behavioral flexibility, and the ability to alter default behaviors. Choosing between layouts and templates depends on the specific needs of each page and the desired balance between user experience and performance.

   249

   5
2. 2
   Article

   Bits and Pieces·2y

   A Modern Approach to React Development

   Learn about a modern and efficient solution for React development called Bit. It allows for component isolation, code sharing, specialization, collaboration, and better testability. See how to install Bit in a React project and explore the benefits of using it for React development.

   207

   8
3. 3
   Article

   Hacker News·2y

   Tailwind CSS Application UI Kit

   Tailwind CSS Application UI Kit, Catalyst, offers modern UI components built with Tailwind CSS, Headless UI, and React. The components are customizable, easy to use, keyboard accessible, and available in TypeScript and JavaScript. The templates can be purchased individually or with an all-access license, with free updates included.

   198

   5
4. 4
   Article

   DEV·2y

   Personal Roadmap for becoming a better software developer in 2024

   Suggestions to become a better software developer: focus on building a strong foundation, learn data structures and algorithms, improve communication and writing skills, solve problems on LeetCode and HackerRank, be active on LinkedIn, enhance frontend skills, create a new portfolio, invest in courses and books, prioritize consistency and discipline.

   168

   6
5. 5
   Article

   DEV·2y

   Frontend Development in 2024: Crafting a Dynamic Skillset for Success

   Explore the essential skills and technologies shaping the frontend realm in 2024. Master HTML, CSS, and JavaScript, embrace React and state management libraries, optimize web performance, understand backend environments, and prioritize Core Web Vitals. Continuous learning is crucial.

   141

   2
6. 6
   Article

   Collections·2y

   Understanding Micro Frontend Architecture and Module Federation in React

   Understanding micro frontend architecture and module federation in React can help developers build modular and scalable web applications with enhanced flexibility, improved code reusability, and simplified maintenance.

   135
7. 7
   Article

   Community Picks·2y

   The new wave of React state management

   React applications face challenges in managing shared global state, leading to the development of various state management libraries. These libraries need to address problems such as reading and updating stored state, optimizing runtime performance, and managing memory usage. Different libraries take different approaches to solve these problems. Understanding these problems and the available solutions can help choose the right state management library for specific application needs.

   116

   4
8. 8
   Article

   DEV·2y

   Understanding Virtual DOM in React

   A comprehensive guide to understanding the virtual DOM in React, including its implementation and drawbacks of updating the real DOM.

   76
9. 9
   Article

   freeCodeCamp·2y

   How to Fetch API Data in React

   This article discusses different methods and tools to fetch API data in React. It explains the importance of APIs in web development, the types of HTTP requests, and provides examples of how to use the stale-while-revalidate (SWR) method, the fetch() method, React Query, Axios library, and the useFetch custom hook from react-fetch-hook to fetch data. Each method has its advantages and can improve programming skills in creating reliable apps.

   67

   1
10. 10
    Article

    DEV·2y

    React is Slow, What to do now?

    This post discusses the I/O and CPU performance challenges in React applications and provides solutions to improve performance.

    66

    6
11. 11
    Article

    LogRocket·2y

    Diving into Server Actions in Next.js 14

    Next.js Server Actions are functions that execute on the server side and address the problems of data fetching and mutations. They provide a better way of thinking about data fetching and allow for easier handling of database mutations within components.

    64
12. 12
    Article

    freeCodeCamp·2y

    How to Use React Hooks – useEffect, useState, and useContext Code Examples

    React hooks, including useState, useEffect, and useContext, have transformed the way developers write components by providing a more intuitive and flexible approach to managing state and side effects.

    60
13. 13
    Article

    freeCodeCamp·2y

    Build and Deploy a Hotel Management Site with Next.js, Sanity.io, Stripe

    Learn how to build a hotel management website using Next.js, React, Sanity.io, Tailwind CSS, and Stripe. The course covers CRUD operations with Sanity.IO, room booking and review, payment processing with Stripe, React Context for UI themes, advanced search and authentication, TypeScript and useSwr hook, and deployment on Vercel.

    56
14. 14
    Article

    Auth0·2y

    Using Next.js Server Actions to Call External APIs

    Next.js is a React framework that enables static site generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR). One of the most exciting new features in Next.js 14 is Server Actions, which allow you to execute server-side code without creating dedicated API routes. Server Actions can be used for fetching data from external APIs, performing business logic, and updating databases.

    55

    1
15. 15
    Article

    DEV·2y

    Building a collaborative whiteboard app using ReactJS, Socket.io and NodeJS

    Learn how to build a collaborative whiteboard using ReactJS, Socket.io, and NodeJS. The project uses HTML canvas to create the whiteboard and implements real-time communication with Socket.io. Multiple users can use the whiteboard simultaneously.

    54
16. 16
    Article

    DEV·2y

    How to manage user authentication With React JS

    Learn how to manage user authentication in React JS with a comprehensive guide covering authorization, authentication, and session management. Set up a React project, build a login component, create authentication logic, protect routes with authorization, and integrate APIs. Improve your understanding of the Context API and React Router for seamless and secure user authentication in React applications.

    46
17. 17
    Article

    LogRocket·2y

    How to test React Hooks

    This article provides a practical guide to testing React Hooks using tools such as React Testing Library, Jest, and Enzyme. It covers the importance of testing in the frontend, the benefits of React Hooks, and how to write tests for React Hooks using different testing frameworks. It also compares Jest, React Testing Library, and Enzyme in terms of performance, usability, mocking capabilities, scalability, and maintenance. The article also addresses common pitfalls when testing React Hooks and provides solutions for them, such as mocking API requests and testing side effects. Overall, it serves as a comprehensive resource for developers looking to test React Hooks effectively.

    46

    2
18. 18
    Article

    Bits and Pieces·2y

    Building a Component Library with React and StyleX

    Learn how to build a component library with React and StyleX using Bit as a build system. The tutorial covers creating a new Bit workspace, creating components with StyleX, using tokens and themes, pushing components to bit.cloud, and installing components in a project.

    45
19. 19
    Article

    LogRocket·2y

    Understanding React’s useFormState and useFormStatus Hooks

    Learn about React's useFormState and useFormStatus Hooks for form management in React. These Hooks provide native form control options without relying on external dependencies.

    42

    1