Best of React β February 2023
- 1
- 2
builder.ioΒ·3y
useSignal() is the Future of Web Frameworks
Signals are a reactive way to store and track state in an application. They return a getter and a setter, unlike non-reactive systems which only return a value and a setter. This allows for more efficient updates and prevents unnecessary re-renders in the UI. In contrast, React's useState() returns only the state value and lacks the subscription tracking and notification features of Signals. Overall, Signals provide a more efficient and reactive approach to state management in web frameworks.
- 3
- 4
- 5
- 6
- 7
Community PicksΒ·3y
Building a real-time commenting app with Socket.io and React
Guide on building a real-time commenting app with Socket.io and React. Covers setting up the application, building the Node.js API server, creating comments in the server, creating the React app, styling the app, adding Socket.io for real-time communication, and using Knock for cross-channel notifications.
- 8
- 9
Community PicksΒ·3y
Building the largest Notifications Library in the world using ChatGPT, React, and NodeJS π€―
Learn how to create a notification library using ChatGPT, React, and NodeJS. Register to ChatGPT, set up the project, and generate different categories, notification types, and notifications.
- 10
DEVΒ·3y
Build a Profit Margin Calculator with Vite.js + React.js, TypeScript and Tailwind CSS
This tutorial explains how to build a profit margin calculator using Vite.js, React.js, TypeScript, and Tailwind CSS. It covers the setup process, building the UI with Tailwind CSS, and implementing dynamic theme color and dark mode. The tutorial also highlights the benefits of using Vite.js for faster performance and optimized static assets.
- 11
- 12
- 13
Bits and PiecesΒ·3y
How To Build Desktop Apps Using React: A Quick Introduction to Tauri
Learn how to build desktop apps using React with Tauri, an alternative to Electron. Tauri allows you to use web technologies like JavaScript, HTML, and CSS to create native applications. The tutorial covers setting up a project, building a To-Do app with sentiment analysis, adding native features using Rust, and packaging the app for distribution.
- 14
asayerΒ·3y
Data Fetching in Next.js
Data Fetching in Next.js is a perfect React framework that is fast, has more configuration, good image optimization features, and rendering capabilities. It also has methods that help in data fetching from the back end. Data is either from the client-side, server-side or static-site generation, or static site generation.
- 15
Community PicksΒ·3y
React Anti-Patterns and Best Practices - Do's and Don'ts
Learn about common React anti-patterns and best practices, including the use of useState instead of variables, declaring CSS outside of components, and when to use useCallback and useEffect to optimize function and effect triggers.
- 16
- 17
Hacker NoonΒ·3y
Maximize Your React Skills: Build a To-Do List App from Start to Finish (with TypeScript + Vite)
Maximize Your React Skills: Build a To-Do List App from Start to Finish (with TypeScript + Vite) Too Long; Didn't Read In this blog post we're going to go through everything you need to understand and build a basic React application.
- 18
- 19
- 20
asayerΒ·3y
A Guide to React's useEffect Hook
A Guide to React's useEffect Hook Back Reactβs hook is one of the trickiest and most powerful hooks in functional components, allowing you to perform side effects. In React, side effect effectively means any operations that affect something outside the component, such as making a REST API call, updating the DOM, etc.
- 21
LogRocketΒ·3y
Building a multi-framework dashboard with Astro
Building a multi-framework dashboard with Astro can be a powerful and efficient way to create complex and versatile software. As software systems and requirements evolve, it may become necessary to migrate to a new framework or set of frameworks. Using Astro, developers can easily integrate multiple frameworks, allowing them to take advantage of the best features of each.
- 22
asayerΒ·3y
Authentication in React with Supabase
Learn how to implement user authentication in React applications using Supabase. Supabase is an open-source alternative to Firebase that provides numerous features, such as authentication, database, storage, and real-time APIs. By following the step-by-step instructions in this article, you'll be able to set up a React project with Supabase, implement user registration, login, password reset, and handle page reloads. With Supabase, you can quickly add secure user authentication to your React applications without the need for a dedicated backend.
- 23
The Software HouseΒ·3y
Zustand. React state management set up in a few minutes
Zustand is a simple and fast state management solution for React. It requires minimal setup and is easy to use. It provides a flexible and unopinionated approach to state management. Zustand has several benefits, including minimal boilerplate code, easy access, flexibility, and the ability to create multiple stores. However, the documentation could be more specific and detailed, and it is a relatively new tool in the market.
- 24
- 25
SyncfusionΒ·3y
Virtual DOM vs. Shadow DOM
This post discusses the definitions of virtual DOM and shadow DOM, highlighting their significant differences. It explains that virtual DOM is used for solving performance issues, while shadow DOM is used for encapsulating and isolating elements. It also mentions that React.js and Vue.js are JavaScript libraries that implement virtual DOM.