Best of React — October 2024

1
Article
freeCodeCamp·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.
1.4K
54
2
Article
DEV·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.
844
19
3
Video
HuXn WebDev·2y
THE BIGGEST REACT.JS COURSE ON THE INTERNET ( PART 1 )
546
19
4
Article
Community Picks·2y
Top Next.js Tools for Next-Gen Developers
Next.js is a powerful React framework ideal for building performance and SEO-friendly web applications. This post highlights essential tools for developers to enhance productivity, including those for SEO, authentication, data management, UI component testing, and styling. Key tools such as NextAuth.js, Prisma, Tailwind CSS, Storybook, Jest, and Cypress are covered to help streamline development and ensure high-quality applications.
459
16
5
Video
Community Picks·2y
Build an Invoice App with Next.js 15
Learn to build a full stack invoice app using Next.js 15, TypeScript, Tailwind, and Shaden components. The app will allow invoice creation, payment processing through Stripe, and email notifications via Resend. It leverages new React 19 APIs and uses Drizzle ORM to manage Postgres data. The app includes social login, multi-factor authentication through Clerk, and is deployed on Vercel.
338
9
6
Article
Community Picks·1y
Drag to Select
A developer from Makeswift shares insights from a project focused on improving their file manager with drag selection. They detail challenges faced, specifically with state management, and present a solution using vectors to simplify the drag selection process. The final implementation addresses various edge cases and enhances user experience by preventing unwanted text selection and enabling auto-scrolling.
336
14
7
Video
HuXn WebDev·1y
THE BIGGEST REACT.JS COURSE ON THE INTERNET ( PART 2 )
242
2
8
Article
Community Picks·1y
Shadcnblocks.com: 250 premium blocks for Shadcn UI
A premium collection of 250 high-quality marketing blocks designed specifically for Shadcn UI, Tailwind, and React. Created by professional designers and developers, these components are fully interactive, responsive, and can be easily integrated into existing projects.
212
12
9
Article
Community Picks·2y
How to Use Web Workers in React
React applications can suffer performance issues when handling long tasks on the main thread. Using Web Workers, scripts can run in background threads, preventing the UI from becoming unresponsive. This guide covers the basics of Web Workers, their types, and their integration into a React app to offload intensive tasks. It includes examples of creating a Dedicated Worker, communication methods between the main thread and worker, and implementing these concepts in a React project to filter and display products efficiently.
210
5
10
Article
Community Picks·1y
Shadcn Form Builder
Minimalist templates for building your next product using React, NextJS, TailwindCSS, Framer Motion, and Typescript.
202
4
11
Article
Hacker News·1y
HTML Form Validation is heavily underused
HTML form validation is often underutilized despite offering several powerful methods. The `required` attribute prevents empty submissions, while `setCustomValidity` allows for complex validation logic. However, using purely imperative APIs like `setCustomValidity` in a declarative framework can create boilerplate issues. Implementing custom validations, such as async server checks or dependent input fields, showcases the power and flexibility of these APIs. Better native support in HTML standards could improve adoption.
172
6
12
Article
Community Picks·2y
Building a Google Meet Clone with React and TailwindCSS
This post is part two in a series on building a Google Meet clone using Next.js and TailwindCSS. It focuses on creating the meeting page UI, which includes custom video layouts, call controls, and integrating features such as screen sharing, chat messaging, and call recording. The custom components such as `ParticipantViewUI`, `VideoPlaceholder`, `GridLayout`, and `SpeakerLayout` are detailed. Additionally, the post explains how to add animations using GSAP and integrate call control buttons for toggling the microphone, camera, screen sharing, recording, and leaving the call. Finally, a Meeting Popup component is introduced to notify the meeting creator and provide the meeting link for sharing.
171
3
13
Article
Hacker News·2y
One, a React Framework
One is a new React framework built on Vite that simplifies web and native app development with universal typed routing and an innovative data solution. It aims for simpler code and better cross-platform results by leveraging client-side databases, eliminating server boundaries, and enhancing offline functionality. The framework is designed to address web limitations such as small bundles and storage issues by partnering with Zero for data management.
161
20
14
Article
Product Hunt·2y
UI Builder for shadcn/ui - React component for a visual way to create UIs
UI Builder for shadcn/ui is a new React component that offers a visual method for creating user interfaces. Featured on October 11th, 2024, this tool aims to simplify UI design for developers and designers.
152
4
15
Video
YouTube·1y
Build a Jira Clone With Nextjs, React, Tailwind, Hono.js | Part 1/2 (2024)
Antonio's step-by-step course teaches you how to build a full-featured Jira clone using Next.js, React, Tailwind CSS, and Hono.js. It's targeted at developers looking to enhance their skills with complex web applications and project management tools. The project includes building a comprehensive task management interface with different views, user management features, workspace customization, and more. It also covers the initial setup, selecting runtimes, and ensuring dependencies are correctly installed.
146
1
16
Article
freeCodeCamp·1y
From Concept to Code: How to Use AI Tools to Design and Build UI Components
Learn how to streamline your UI development process by using AI tools like Sourcegraph's Cody and Tailwind CSS. This guide walks you through setting up your environment, creating foundational components, and leveraging Cody for generating efficient, functional, and visually appealing UI elements. By integrating these technologies, you enhance productivity and ensure a better user experience for your web applications.
143
2
17
Article
LogRocket·1y
Advanced Next.js caching strategies
Next.js offers robust support for complex React applications, including various caching mechanisms like request memorization, data cache, full route cache, and router cache. Understanding these caching strategies is crucial to avoid bugs and stale data issues. Strategies such as cache invalidation and revalidation are essential for keeping data updated. Tools like `next-cache-toolbar` and `next-shared-cache` can simplify managing and debugging cache in your Next.js projects.
134
18
Article
Community Picks·1y
How to prevent re-render in React with Tailwind CSS
Learn how to prevent re-renders in React components by using Tailwind CSS and HTML, instead of JavaScript, to manage conditional class application. The post illustrates both traditional and alternative methods, emphasizing the benefits of the data-* attribute and group modifier for simpler, more efficient component design without triggering re-renders.
125
4
19
Article
asayer·2y
A Million Times Faster: Million.js vs React
Modern web development emphasizes performance, making the choice of a front-end library crucial. React, a mature tool with a component-based architecture, is often used for building dynamic interfaces but can be slower due to its size. Million.js, a newer library by Aiden Bai, focuses on highly optimized rendering, reducing overhead, and using performant algorithms, making it ideal for performance-sensitive applications. Detailed comparisons show Million.js to be faster in rendering speed, initial load time, update efficiency, memory usage, and time to interactive, despite React's broader ecosystem and more extensive features.
124
11
20
Article
Community Picks·2y
How to identify fetch waterfalls in React
Fetch waterfalls in React can lead to performance degradation by invoking multiple fetch requests sequentially rather than in parallel. Tracing can help identify these fetch waterfalls. By using Sentry’s React SDK, developers can trace HTTP requests and analyze their performance impact. Setting up Sentry involves installing the SDK, initializing it, and deploying the app to gather performance data. Tracing can help debug various issues including slow page loads, network latency, and bad Web Vitals.
112
1
21
Article
Community Picks·1y
17 Must-know React Projects for Developers 👩‍💻 🔥
Explore 17 must-know React projects that can significantly enhance your development experience. Highlights include Tolgee for seamless localization, Mantine Hooks for state and UI management, and Aceternity UI for copy-paste components. The list also features advanced tools like XYFlow for node-based UIs, cmdk for command menus, Magic UI for user-facing components, React Content Loader for skeleton loadings, and many more projects that offer unique utilities and features. Each project is accompanied by installation instructions, code snippets, and documentation links.
99
7
22
Article
Community Picks·1y
nuqs 2
nuqs 2.0.0 introduces several new features and improvements, including support for various React frameworks (like Next.js, React SPA, and Remix), a built-in testing adapter, and notable bundle size reductions. The update also involves breaking changes, such as the introduction of adapters and deprecated APIs. Community feedback helped shape these updates, and there's a focus on future enhancements like type-safe routing and better validation integration.
97
7
23
Article
Community Picks·1y
Create a Blockchain App Using React
Learn to build a decentralized application (dApp) using React, Vite, and Tailwind CSS that allows users to send Ethereum transactions, view their transaction history, and connect their MetaMask wallet. The tutorial covers the entire process from setting up the development environment and writing smart contracts using Solidity to deploying and testing the smart contract on the Ethereum Sepolia test network.
94
24
Article
Sentry Engineering·1y
Perfectly Fitting Text to Container in React
This post discusses the challenge of dynamically scaling text to fit within a container in React, specifically within the context of a Sentry dashboard. It reviews several approaches, including SVGs, CSS transforms, container queries, and JavaScript, before settling on a JavaScript-based solution. The final solution leverages React hooks, ResizeObserver, and a resizing algorithm to dynamically adjust text size efficiently, ensuring excellent performance and user experience. The post also includes code examples and performance insights derived from real-user telemetry.
94
25
Video
Community Picks·2y
Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind
Learn to build a comprehensive booking app for meeting rooms using Next.js, React, Appwrite, and Tailwind CSS. The tutorial covers UI design, authentication, image storage, database integration, and preventing double bookings. Step-by-step, you'll implement features like adding rooms, booking forms, and managing bookings, all while utilizing Appwrite for backend services.
90

See all React archives