builder.io·3yThe React Ecosystem in 2023
The React Ecosystem celebrates its 10th anniversary in 2023 as the ecosystem continues to flourish. For those who are new to React, getting started can be a daunting task. With a vast array of tools and libraries available within the React ecosystem, choosing the right combination for your project can be challenging.
Next.js·3yBlog - Next.js 13.4
Next.js 13.4 is a foundational release, marking stability for the App Router: App Router. The new router has an entirely different architecture, built on the foundation of React Server Components and Suspense. With the new App Router, you can import (and colocate) any CSS file in any component.
Community Picks·3y⚡refine.new - Introducing the Fastest Way to Create React Apps
Discover how refine.new is transforming the way developers create React apps with its fast and easy-to-use browser tool. Learn about the benefits of using refine and refine.new, including time-saving, high-quality code, enterprise-grade applications, and open-source availability.
Community Picks·3yTamagui 1.0 🎉 — Tamagui
Tamagui is a suite of React components and hooks that optimize React code and provide customizable styles and themes. It consists of Tamagui Core, Tamagui Static, and Tamagui UI. The key feature of Tamagui's performance gains is view flattening or tree-flattening. Tamagui Core is a complete cross-platform style library, while Tamagui Static is an optimizing compiler for frontend React code. There are several new components in Tamagui, and upcoming features include dynamic inline evaluation, container queries, and more. Tamagui is funded by Github Sponsors.
Community Picks·3yThe Interactive Guide to Rendering in React
React is a library for building user interfaces. Rendering in React occurs when there is a state change. React calculates state changes using a batching algorithm. StrictMode allows for extra renders in order to check for components' purity.
Community Picks·3yNaming Conventions in React JS
Naming conventions are important because they make code more readable and organized. The naming convention is how you name every single thing in your project. A well-named file or folder can help you and other developers find and understand your code more quickly. In React applications, there are 3 most common naming conventions: Camel case for file names, pascal case for component names.
Community Picks·3yUnderstanding React Concurrency
React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Despite a deluge of resources explaining how to use it, explanations of how it works are sparse. The basic premise of React concurrency is to re-work the rendering process such that while rendering the next view, the current view is kept responsive.
Community Picks·3yQwik Reaches v1.0
Qwik Reaches v1.0 The Qwik team is excited to announce that we are ready for the real world. Qwik offers a rapidly expanding universe of ready-to-use integrations with your favorite libraries and frameworks. We have adapters for Azure, Cloudflare, Google Cloud Run, Netlify, Node.
asayer·3yReact's Layout Component's Concept
React's Layout component's Concept Back a web application or website’s layout can be made consistent by using components. They offer a systematic and logical manner to specify the arrangement of various UI components. This article will show you how to use these components to simplify page design and implementation.
Community Picks·3yReact Server Components
React Server Components aim to enable modern UX with a server-driven mental model and result in smaller client-side JavaScript bundles. They are not a replacement for SSR but complement it. Automatic code-splitting is introduced with Server Components. Next.js will experiment with Server Components. The goal is to enable meta-frameworks to improve.
Permit.io·3ySend SMS Directly from the Browser (No Backend Code Required!)
We'll learn how to send SMS directly from the browser using Frontend Only Authorization (FoAz) standard. To authenticate our users in the browser, we'll use Clerk.dev, a frontend-first authentication platform that lets you add authentication to your application in minutes. Let's create a new React app by using Vite.
Hacker News·3yChris James -HTMX is the Future
A new approach is to put the ability to deliver this UX back into the hands of engineers that built websites before the SPA-craze. The costs of SPA SPAs have allowed engineers to create some great web applications, but they come with a cost: Hugely increased complexity.
Community Picks·3yBearStudio/start-ui-web: 🚀 Start UI [web] is an opinionated UI starter with 🟦 TypeScript, ⚛️ React, ⚫️ NextJS, ⚡️ Chakra UI, 🟦 tRPC, ▲ Prisma, 🏖️ TanStack Query, 📕 Storybook, 🎭 Playwright, 🐜 Formiz◽Fr
Start UI [web] is a frontend starter repository created and maintained by the BearStudio Team. It includes TypeScript, React, NextJS, Chakra UI, and other libraries. The project provides documentation and a live demo. Local development setup and database instructions are also included.
Community Picks·3yBuilding a modern design system in layers
Building a modern design system in layers is a good way to evolve it well, and to make it so good that developers are happy with it even if they don’t like the rigid choices that were made. Modern CSS can do so much these days. Start building out as much of the design system as possible with HTML and CSS.
Community Picks·3yunicodeveloper/awesome-nextjs: :notebook_with_decorative_cover: A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendere
This post is a curated list of resources, including books, videos, and articles, about using Next.js. It covers a wide range of topics and features related to Next.js such as instant site updates with on-demand revalidation and directus, dynamic CMS-driven redirects, using Next.js with FaunaDB, building a serverless Next.js blog with ButterCMS, and more.
builder.io·3yHow to Test Custom React Hooks with React Testing Library
Custom React hooks offer developers the ability to extract and reuse common functionality across multiple components. Testing these hooks can be tricky, especially if you are new to testing. In this blog post, we will explore how to test a custom React hook using React Testing Library.
asayer·3yOptimizing React's Performance
Maintaining a local component state can optimize the performance of a React application by keeping the Component self-contained and reducing the number of props and states that need to be passed down the component tree. This article will cover the techniques and explain why these optimization processes are essential and when to utilize them.
Medium·3yCallback Refs in React
Callback Refs are a way to set a ref to a function instead of directly to a DOM element. This function is called with the component instance or DOM element as its argument when the component is mounted or updated. Callback refs are particularly useful when you need to access properties or methods that are not directly available through props.
Community Picks·3yHow to use husky and lint-staged in React JS to push your error free code to GIT
How to use husky and lint-staged in React JS to push your error free code to GIT. How to configure the modules to check for linting errors before pushing your code to the repository. You can follow my previous project Config Eslint and Prettier in Visual Studio Code for React js development.
asayer·3yReact's Virtual DOM
React's Virtual DOM is a compact, in-memory duplicate of the real DOM that enables React to effectively track UI changes and update only the necessary components. This article focuses on how the Virtual DOM works and explains how it optimizes application performance compared to the Real DOM.
builder.io·3yUnveiling the Magic: Exploring Reactivity Across Various Frameworks
React can be broadly defined as the automatic update of the UI due to a change in the application's state. The framework does not need to execute any code and knows exactly which DOM nodes need to be updated. In real-world applications, the state, event, and binding are not always in the same component.