DEV·3yBuild a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma
This comprehensive WhatsApp clone comes packed with a range of awesome features to give you an authentic messaging experience. The Whatsapp Clone uses Next.js, Socket.io, Tailwind CSS, Node.js and Express and Prisma - DEV Community Features of the WhatsApp Clone.
builder.io·3yNext.js 13 Routing
Next.js employs a file-system-based routing mechanism, where URL paths in the browser are determined by files and folders in the codebase. Next.js offers support for nested routes, so you can to establish a hierarchical structure within your application. For a fresh start, delete the folder to create routes from scratch.
Community Picks·3yNext.js 13: complete guide to Server Components and the App Directory
Next.js 13 is a major release of the most popular React framework. It ships with a new routing system, also called App Router. The new directory brings many improvements to the existing directory, and it's the new default way to write Next.js apps.
builder.io·3yA Visual Guide to Layouts in Next.js 13
A layout in Next.js is a UI component that is shared between multiple pages in an application. It allows us to define a common structure and appearance for a group of pages, reducing redundancy and promoting code reusability. In version 13, Next.JS provides built-in support for layouts, making it simpler to create and manage them.
Community Picks·3yReact Tailwind CSS UI Components - Tailwind React Blocks
TailGrids is the ultimate library of over 500 Tailwind CSS React UI components. All components are carefully crafted to be compatible with popular React tools and features like React Router, Redux, and React Hooks, providing seamless integration and versatility. We offer developers a wide range of options and features that can help them build their React UI faster.
Livecycle·3yTop GitHub repositories to learn modern React development
Top GitHub repositories to learn modern React development is great for many things. Open Source repositories enable you to get involved in large-scale projects immediately. Open source gives every developer immediate access to information, feedback and hands-on experience that can help them grow and progress.
Community Picks·3y3+1 React common mistakes that triggers unnecessary re-renders
When objects or arrays are created inline within the component, they are considered new instances with every render, even if the data is the same. When rendering a list of components, it’s essential to provide a unique key for each child. Using an index as a key can lead to unnecessary re-renders and potential issues with the state.
freeCodeCamp·3yFront End JavaScript Development Handbook – React, Angular, and Vue Compared
Frontend frameworks offer structured approaches and pre-built components to streamline the coding process. These tools can help boost productivity by offering reusable components and abstracting complex tasks like DOM manipulation and state management. Frameworks promote code maintainability through modular development, making it easier to modify or replace individual components.
Community Picks·3yZedux: Is this the one?
Zedux is a molecular state engine for React. It's officially open-sourced and version 1.0.0 has been released. Zedux features a composable store model wrapped in a DI-driven atomic architecture. This article will break down why it exists and what problems it solves.
asayer·3yRemoving unused CSS with PurgeCSS
Unused CSS is one of the most common problems that can negatively impact website performance. This article will introduce you to PurgeCSS, a tool that can minimize the CSS sent to the browser. Let’s learn what Purge CSS is, how it works, and how to configure it in a Next.js app.
builder.io·3yHydration is a tree, Resumability is a map
Hydration as an algorithm is first seen when SPA frameworks like React, Vue, Svelte, or Angular added SSR support. The concept of partial hydration emerges from the understanding that not all parts of the tree need to be hydrated, particularly those that are entirely static.
Community Picks·3yIntroducing the Vercel AI SDK – Vercel
The Vercel AI SDK is an open-source library designed to help developers build conversational, streaming, and chat user interfaces in JavaScript and TypeScript. The SDK supports React/Next.js, Svelte/SvelteKit, with support for Nuxt/Vue coming soon.
Community Picks·3yIs React Having An Angular.js Moment?
React and Next.js teams have been promoting Server Components, a new way to build web applications that don't fit with most existing React apps. Server Components is entirely different from client-side JS, despite the fact that the base - JSX - remains the same.
asayer·3ySpeed up React development with Refine
Refine is an open-source, React-based framework used for building data-intensive front-end web applications. It excels at eliminating repetitive CRUD tasks by providing critical functionalities like routing, authentication, internalization, and state management out of the box. Refine offers developers total control over styling and customization options.
builder.io·3yMy Take on a Unified Theory of Reactivity
My Take on a Unified Theory of Reactivity: I want to share my understanding of the current reactivity approaches and landscape. I think there are fundamentally three approaches to reactivity that we have seen in the industry thus far: Value-based; that is, dirty-checking.
freeCodeCamp·3yHow to Upgrade Your React Skills with Three Helpful Tools
React.js is an open-source state management library developed by Facebook. It offers distinct advantages over other state management libraries like Redux, MobX, Zustand, and others. Recoil is a shareable piece of state that React components can read from and write to. Selectors in Recoil provide a powerful mechanism to manipulate state.
Syncfusion·3yReact useState Vs. Context API: When to Use Them
React is a feature in React that allows data to be passed down through a component tree without having to manually pass props down through every level of the tree. It provides a way to share data between components not directly related to each other in the component hierarchy.
Hacker Noon·3yDemystifying React Hooks: Usage, Examples, and Common Mistakes
Demystifying React Hooks: Usage, Examples, and Common Mistakes Too Long; Didn't Read React is a JavaScript library used for building user interfaces. Hooks are functions that allow you to use state and other React features in functional components.
Community Picks·3yTeleportation in React: Positioning, Stacking Context, and Portals
React: Positioning, Stacking Context, and Portals are all available in React. We need Portals to escape the "clipping" of content when rendering elements inside elements with. The real thing is not yet available, so let's just teleport components in the DOM for now.
This is Learning·3yReact Query - Infinite Queries
React Query - Infinite Queries - DEV Community Hey Folks, Today it's time to learn how you can build an infinite query with React Query. The hook is similar to the but with some more properties to handle the infinite loading in the best way. The key concepts, if you are working with are: Key.
Venture Beat·3yReact announces its first game jam for late July
React announced today that it plans to hold its first game jam for July 20-30. The web development platform intends to use React Jam to help developers create their first game. React is currently the leading framework for web development and powers websites for Facebook, Netflix, Airbnb and others.
Community Picks·3yYou Can Stop Hating React.FC
As of TypeScript 5.1 and React 18, it's now a perfectly fine way to type your components. The main criticism of came from its earlier iteration, which included in the props type. This meant that if you wanted to type a component that didn't accept children, you couldn't use.