Best of React β€” February 2023

  1. 1
    Article
    Avatar of medium_jsMediumΒ·3y

    4 React Tips to Instantly Improve Your Code

    Tips to improve React code, including using currying in handlers, separating responsibilities in components, using object maps instead of conditions, and putting independent variables outside of React lifecycle.

  2. 2
    Article
    Avatar of builderiobuilder.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. 3
    Article
    Avatar of communityCommunity PicksΒ·3y

    Creating a resume builder with React, NodeJS and AI πŸš€

    Learn how to create a resume builder using React, Node.js, and the OpenAI API. Set up the server and React application, upload images, communicate with the OpenAI API, display the response, and print React pages.

  4. 4
    Article
    Avatar of honeypotHoneypotΒ·3y

    React.js: The Documentary - How it All Began

    The post explores the early days of React.js, including the initial skepticism from the JavaScript community, the engineers involved in its development, and the first major tech company to adopt it.

  5. 5
    Article
    Avatar of communityCommunity PicksΒ·3y

    Building a forum with React, NodeJS

    Learn how to build a forum system with React and NodeJS. Set up the project environment, create the Node.js server, design the user interface, authenticate users, create and retrieve post threads, and send notifications using Novu Topic API.

  6. 6
    Article
    Avatar of builderiobuilder.ioΒ·3y

    TypeScript Utility Types You Need to Know

    Learn about the utility types in TypeScript, including ReturnType, Awaited, Parameters, NonNullable, DeepReadonly, Partial, Pick, Omit, Record, Exclude, Extract, ConstructorParameters, InstanceType, ThisType, and OmitThisParameter.

  7. 7
    Article
    Avatar of communityCommunity 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. 8
    Article
    Avatar of communityCommunity PicksΒ·3y

    Advanced React UI Components To Optimize Development Process

    Discover 5 lightweight free UI components for React that enhance the user experience on websites. Includes Mantine, react-easy-crop, react-colorful, React Syntax Highlighter, and TipTap.

  9. 9
    Article
    Avatar of communityCommunity 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. 10
    Article
    Avatar of devtoDEVΒ·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. 11
    Article
    Avatar of vercelVercelΒ·3y

    Less code, better UX: Fetching data faster with the Next.js 13 App Router – Vercel

    Fetch and render dynamic data directly inside React Server Components. Fetching data faster with the Next.js 13 App Router Engineering Friday, February 10th 2023.

  12. 12
    Article
    Avatar of communityCommunity PicksΒ·3y

    "Mastering Re-rendering in React: A Beginner's Guide"

    A Beginner's Guide to Mastering Re-rendering in React "Navigating the Fundamentals of Reconciliation and Techniques for Optimizing Re-rendereding" The highlight of the topic will be covered in this blog post.

  13. 13
    Article
    Avatar of bitBits 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. 14
    Article
    Avatar of asayerasayerΒ·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. 15
    Article
    Avatar of communityCommunity 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. 16
    Article
    Avatar of devtoDEVΒ·3y

    Next.js vs. React: Which is the Best for Your Project

    This post compares React.js and Next.js to help readers understand the differences and decide which one to use for their projects.

  17. 17
    Article
    Avatar of hackernoonHacker 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. 18
    Article
    Avatar of medium_jsMediumΒ·3y

    How to handle errors in React: full guide

    Learn about the importance of error handling in React, the limitations of using try/catch, and how to catch async errors and errors in event handlers with ErrorBoundary.

  19. 19
    Article
    Avatar of devtoDEVΒ·3y

    5 Custom React Hooks That Will Transform Your Code πŸ€–

    Discover 5 custom React hooks that can transform your code, including hooks for getting the window size, detecting key presses, using setInterval, debouncing functions, and throttling functions.

  20. 20
    Article
    Avatar of asayerasayerΒ·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. 21
    Article
    Avatar of logrocketLogRocketΒ·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. 22
    Article
    Avatar of asayerasayerΒ·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. 23
    Article
    Avatar of tshThe 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. 24
    Article
    Avatar of medium_jsMediumΒ·3y

    Simple ways to improve your React app performance without useMemo.

    Learn simple ways to improve your React app performance without using useMemo. Stop using useEffect excessively, push state down to minimize re-renders, and use React.lazy and Suspense to lazy-load components.

  25. 25
    Article
    Avatar of syncfusionSyncfusionΒ·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.