React

Best Open Source React framework and libraries for Building Enterprise B2B apps

Building a Modern SaaS Dashboard with Saas UI and Next.js App Router

Dashboards are essential for every SaaS app, and UI libraries do help you build them fast, but Emotion.js-based libraries are problematic in Next.js 13. Let's look at how Saas UI can help.

5 Must-Have Tools for Building Web Applications with Next.js App Router

Server-only, Saas UI, TailwindCSS, Turbopack, the use() hook - know the tools that can enable you to build web applications with Next.js App Router faster

7 Best VSCode Extensions for React Devs in 2023

Enhance your React development with these top VSCode extensions in 2023.

Factors to consider when researching React development companies

5 Free Figma Component Libraries for Your SaaS App

Elevate your SaaS app’s UI design with these five free Figma component libraries.

Notifications in React: A Deep Dive into Visual Feedback for SaaS Apps

Maximizing user engagement and satisfaction: Unveiling the impact of visual feedback with Saas UI for SaaS applications.

Simplifying the Complex: A Comprehensive Look at React Native App Development

Deploy Your React App with AWS EC2

How to deploy your React or Node.js application using the EC2 Amazon Web Service

How to Create a User Management Page for a SaaS App

Designing SaaS apps doesn’t have to be difficult. Let’s find out how, using Saas UI, a component library meant specifically for this purpose.

Best Practices for Documenting React Components

React continues to grow more complex with each release, and it has become crucial for React-based dev teams to create effective internal documentation. Let’s explore how we can do just that, making documentation not only less painful, but also joyful to engage with.

How to Force a Page Refresh in Next.js

How to Build and Deploy a Next.js App on AWS Apache Server

This article will take you through the steps required to prepare a Next.js application for production and deploy it onto an Apache server running on an Amazon Web Services (AWS) EC2 instance. I…

Authentication Made Easy: Setting Up Supabase Auth for Your SaaS

Dodging the Vercel Tax: How to use an open-source alternative for Serverless Postgres, Redis, and Blob Storage

Find out how to get the same DX wins of Vercel Storage by using its Postgres, Redis, and Blob providers with WunderGraph - a free and open-source technology without the Vercel markup, and without vendor lock-in to boot.

Using Design Tokens to Easily Theme Your SAAS Application

Learn how to easily theme your SAAS application using design tokens and Saas UI

How to Build a User Settings Page in Five Minutes

5 Best React UI Frameworks and Component Libraries in 2023 - A Developer's Guide

MUI, Saas UI, Mantine, Tailwind. There are a ton of options out there for React. Here’s how to choose the right UI library based on component variety, performance, and developer experience.

How to Fix the Issue Where We Can’t Type in a React Input Text Field?

In this article, we’ll look at how to fix the issue when we can’t type inside a React input text field. To fix the issue when we can’t type inside a React input text field, we should make sure the…

Working with styled-components in the Next.js

Styled-components is a popular CSS-in-JS library that allows you to write component-based styling in your React projects. When combined with the capabilities of Next.js, the result is a powerful…

It’s 2023 Now! React State Management: Context or Redux, Which Side Are You On?

Hi there. Today, I am going to discuss when to use what and why. Before I lay down my points and the foundation of my discussion, I would like to first get all of us on the same page about what…

I Built a Serverless Live Chat App with Next.js, Fauna, and WunderGraph for GraphQL Live Queries

A step-by-step guide to creating a scalable, real-time chat app using Serverless technologies, with a little help from NextAuth.js for GitHub sign-ins. Who needs WebSockets when you've got Live Queries?"

How to Create Guarded Routes using React Router v6

If you have worked on a React App with React Router Dom, you would have felt the need to restrict user access to some specific part of your app. It can be authentication-based, permission-based, etc…

How to Open a Link in a New Tab in React

Data Fetching with Next.js 13's Bleeding-Edge Features — A Primer

The app directory, Streaming, Suspense, and hybrid Server and Client Components demystified — with a little help from GraphQL + WunderGraph.

How to Use ChatGPT as an Educational Chatbot in a Next.js Frontend

Can you use OpenAI's GPT-3.5 on your website as a chat assistant? You bet. Here's how to get it done with an Express server, WunderGraph as a BFF, and GraphQL.

2023 Svelte vs React: Which Framework is Better to Learn?

Discover the differences between Svelte and React, and learn why one of them may be the better choice for your project.

Step By Step Guide To Dockerize React App Created Using Vite

React | Docker | Vite

Const vs. Function For React Functional Components

For some time now I have been wondering if there is a benefit to using function over const when declaring functional components, and vice versa. So, I decided to do a little research, and I will sum…

How to Compose and Integrate APIs Together as if You Were Using NPM for APIs

Learn how to bring React's paradigm of Composability to the world of APIs, microservices, and databases — powered by Wundergraph, build-time GraphQL, and the BFF/API Gateway pattern.

Batch Updates in React 17 or Earlier Versions

React batch updates for multiple setState() calls inside setTimeout, promises, and native event handlers

5 Things We Can Do to Decrease Load Time of the React Application

1. Clean Unused Lines Of Code, 2. Clean Unused React Components, 3. Splitting Up Into Components, 4. Server - Side - Rendering, & 5. State Management

How To Store JSON Data In Local Storage - JS, React, Angular

Learn how to store data in localStorage in JavaScript, React, or Angular.

5 Ways To Detect Mobile Browsers in JavaScript

Responsive web design is not only about CSS

Build a Multi-step Form With React Hook Form

A tutorial on how to build a multi-step form using React Hook Form.

How to Set Focus on an Input in React

Make the user experience better by automatically applying focus to inputs

React Router DOM: The Differences Between NavLink, Link, and <a>

How to use NavLink, Link, and <a> — explained with examples.

Why Create React App is Outdated in 2022

Create React App is what almost every developer (including myself) learned to use first when learning the JavaScript library React and I think this has led to a couple of significant flaws. While…

React Router: How to Use the useParams() Hook

A guide (with examples) on how you can use the useParams() hook to improve your web applications.

Build a landing page for your SaaS app using React, Chakra UI and Typescript

Overcome The Language Barrier in Your Surveys With Easy i18n Using SurveyJS

Discover how to use SurveyJS + React to build a properly internationalized, localized survey without using any i18n library at all.

10 Best React Notification Libraries in 2022

How to Use React.FC Children Prop in React 18 with TypeScript

How to deal with the new React 18 React.FC type and the children prop for TypeScript

Custom Dropdown Element with React & TypeScript

A guide on how to create a simple React dropdown component using TypeScript.

How to Create a Search Bar in React

How to Build Data-Driven Surveys With React + REST API + SurveyJS

Build dynamic forms and surveys in React with the open-source SurveyJS and RESTful services.

React and Next.js is DEAD — Something New is (Finally) Replacing It (For Good)

Is this the beginning of the next revolution for JavaScript Framework? Apparently, YES!

Theming and Theme Switching in React

How to build and switch modular theme components with Design Tokens, React, the Context API, and Bit

React Navigation v6 with TypeScript

How I Created A Secure, Self-Hosted Survey In Minutes With React + SurveyJS

The importance of fully owning survey data in a privacy-focused world.

How to Handle Mouse Hover Events in React

Addressing the absence of the onHover event handler in React

How to Create a Download Button Using React

A guide on creating a download button using React.

React 18 useEffect Double Call for APIs: Emergency Fix

React 18 API Calls need an Emergency Fix!

Custom Select Component in React and Styled Components

A guide on how to create a custom dropdown in React.

7 React Native Open Source Projects to Become a Better Mobile App Developer

One of the best ways to improve your development skills is to read a lot of code. The open-source project is the most valuable resource for learning about best practices, coding styles, and other…

Create Multiple Layouts Components with React Router

In a previous blog, we created our own React layout component with a header and footer. In this blog, we going to create multiple layout components. Follow the “Create Your Own Layout Component in…

7 React Frameworks for Developers to Use in 2022

Comprehensive list of React frameworks for software developers to increase website speed and responsiveness in 2022.

Upload Files to Google Cloud Storage from React

A tutorial on how to upload files to Google Cloud Storage from React using Node.js and Multer

Meet React useEvent(): The Latest and Greatest React Hook

Hailed as the “missing piece in the original Hooks release”, useEvent() will change the way you write modern React.

How to Pass Data Between Pages in react-router-dom V6?

3 ways of passing data between pages in react-router-dom V6

Mock Your Hooks to Make Testing Simpler

Mocking with Jest can have a weird learning curve. Let's see how to mock those hooks.

Advanced Page Transitions in Next.js with Router Events and GSAP

Build a Custom Theme Provider Using React's Context API

Add support for switching themes in your React App - no libraries, from scratch, in a simple way. All we need is React's Context API and CSS.

Advanced TypeScript: Type-Level Nested Object Paths

A Real-world use case of Conditional Types, Type Inference, Template Literal Types, and Recursion.

How to Create a Toggle Button in React Using Conditional Rendering

Create a toggle button to show and hide data using the useState hook.

Step-by-Step Tutorial: React Redux 2022 with Hooks

Create a store from the ground up and integrate it with hooks.

The Difference Between useState and useRef in React

useState vs useRef in React: everything you need to know.

React with TypeScript or JavaScript — Which Side are You on?

JavaScript is the beloved child of frontend development, but TypeScript is the father of this beloved child. Learn to embrace it and get ahead in 2022.

Build Your React Component Library with TypeScript and Rollup

A simple guide on building your React Component Library to save precious development time.

Animating SVGs as React Components

Learn how to edit your favorite SVG in Figma and render it as a React component, to animate it using CSS.

An Introduction to the useId() Hook in React 18

The useId() hook is a new way to generate a unique random Id in React 18

How to listen to Formik onChange event in React?

Angular vs React vs Vue.js: Which is the Best Choice for 2022

Angular vs React vs Vue: Which is the Best Choice of Framework in 2022?

How to Make an Aviation React Component with Flight Arrivals and Departures from Airports

How to Use Environment Variables in Next.js

Take a look at how to use environment variables in Next.js.

Sort React Components Using .sort()

A guide on the process of rendering child components from an array of objects and creating a Sort button using React.

Let's Create a Pagination Data Table with React and an External API

A guide on how to create a pagination data table with React using react-data-table-component

How Many Hooks are Present in React?

The hook is a way to write less and cleaner code in React.

Create a Full-Stack Web App Using React and Node.js

React and Node.js: Build a Full Stack Web App From Development to Deployment in 5 steps

Reduce your React Applications Bundle Size by 75% with Compression

Which is Better? Class Component Or Functional Component in React?

Differences between functional components and class components in React.

Introduction to Closures with React

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). If you are having trouble understanding what Closures are or…

The Evolution of Web Development 2022

Will JavaScript Frameworks Rule the World?

Create Your Own Layout Component in React

A guide on how to create basic layout components with Header, Footer, and content section.

React Conf 2021 - React Forget

A Christmas miracle - End of 'memo all the things'

How You Can Serve React Build Folder From an Express Endpoint

A guide on how to serve a React build folder from an Express endpoint.

How To Get Props Types in Next.js and TypeScript

Avoid boilerplate code with InferGetServerSidePropsType and InferGetStaticPropsType and Automatically Infer the Types for Your Page Component Props

Top-notch React Native talents: skills and tools

React Native — Infinite Scroll Pagination with FlatList

How to Use the Dialog Component with Headless UI and Tailwind CSS

Easily create a dialog component with Tailwind CSS

Build a Simple React Login Form using Event Handlers and React Hook

A simple beginner-friendly React login form tutorial using the onChange and onSubmit event handlers and the useState hook.

How to Structure Your React Redux App

Feature folder structure of the react-redux app for easy maintainability.

How to Create an Object of React Components

Why and How to Use Absolute Imports in React

An easy way to maintain clean code in React

Create Your Custom Drop-down Menu with a Search Option in React

How to create a custom drop-down menu with a search option using existing React libraries.

How to Create a “Read More” Collapsible Component in React

The -webkit-line-clamp way

React Query vs SWR

Which one should you choose for your next project?

Hosting a React App to EC2 using Nginx with SSL Certificate

Create User Acceptance Testing Environments on Pull Request for React Apps

How to create a UAT environment for a React application every time a PR is created to the default branch.

How To Keep Component State Across Pages in Next.js

Using the session storage & useLayoutEffect

How to Use React-Native-Image-Picker

How to select media from the gallery or camera

Render React Cards and Images Dynamically

Using JavaScript map()

How to Use Callback in the useState() Hook?

Use Callback function in React's useState()

5 useEffect Infinite Loop Patterns

Redux Toolkit -The Standard Way to Write Redux

Redux Toolkit, Store, Create Slice, Feature Folder

Run Python Code in React with Pyodide

How to Run Python Code in the Browser with Web Assembly, React, and Pyodide

Create a Country Select Component with React

How to create a country select dropdown in React using Material-UI and i18n-iso-countries.

How to Use Web Workers in React

What are web workers, why use them, and how to implement them in React?

How to Handle Network Connection in Your React Native App

How to Dynamically Load Scripts in React

Implement Debouncing in React in 3 Different Ways

How to Make the React useEffect Hook Not Run on Initial Render?

We can make the React useEffect callback not run on the first render by creating a ref that keeps track of whether the first render is done. Then we can check the ref’s value to see when the first…

10 Ways to Host Your React App For Free

Here are the 10 services that provide free hosting for your React App.

How to Create a Custom Cursor in React

Part 1: How to create a custom cursor in React without any module

How to Create a Ticket Booking Interface with React

How to Deploy React App with S3 and CloudFront (Updated for 2021)

Build a Blog App with React — Intro and Setup

Part 1: In the first part, we deal with the basics of the project and set it up.

How to Create a Page Load Animated Loader in React

Build a ToDo List App using React Native

How to Pass Props from Child to Parent Component in React

Learn this neat little trick to pass chunks of props back up the component tree!

Hiding DOM Elements in React Based on Scrolling

Using Zustand and TypeScript to Make a To-Do List in React

Today, let's learn how easy Zustand can make it to manage global client-side state in React by making a to-do list with it.

Creating an Interactive Background in React with Particles.js

A tutorial for making responsive and elegant interactive backgrounds in a few simple steps.

Basic React Login using External API

Custom Hook in React for calling API — useApi

5 Advanced React Patterns

An overview of 5 modern advanced React patterns, including integration codes, pros and cons, and concrete usage within public libraries.

HTTP Interceptors in React

Write supercharged interceptors for your React app.

How to Capture Images Using React Webcam

Passing Data From Child to Parent Component in TypeScript React

Generate 10x traffic from Google using Programmatic SEO with Next.js

Dealing with Code Splitting Network Failures

Reloading code split chunks to attempt to recover from network failures.

How to Migrate an existing React Web App to Desktop App with Electron

Create a Custom Video Controller Using ReactPlayer

Styling React Forms with CSS

How to Setup Path Resolving in Vite

A Guide to React Lazy Loading

A Guide to Code Splitting for React Components

How to Build a Contact Form in React that Sends Emails

How to Use The Autocomplete Component in Material-UI

Enhance your text input with a list of suggested options

How to Clone an App from GitHub

Clone and run a React app with this detailed tutorial

How to create a Rotation Animation in React Native

In this tutorial, I’ll show you how to create a button that rotates 720 degrees when it’s pressed. We will be using the React Native Animated animation system to create the rotation animation. First…

Testing React Hooks

A guide to using React Hooks Testing Library

How to set up SonarQube locally on a React TypeScript Project

Create a React App from Scratch in 2021

Become a better coder by learning what create-react-app is doing under the hood.

How to Upload Files to AWS S3 in React

In 2 different ways

Connecting React with LocalStorage

A Guide to Creating a LocalStorage React Hook

Creating a Chrome Extension with React

React Fast Refresh — The New React Hot Reloader

A Comprehensive Guide to Using React Fast Refresh

Improving Webpack Developer Experience

With Create React App's React Developer Utilities

How to Setup and Add Google Analytics to your React App

The Complete Full Stack Web Developer RoadMap 2022

The ultimate guide to becoming a modern full-stack web developer.

Storybook Snapshot Testing

Automatic Jest Snapshot Testing with Storybook Stories

Compress Images Before Upload in React with React Image File Resizer

How to manipulate our image before uploading in a React app.

How To Reload a Page Whenever a User Makes a Change with React/Redux

Using forwardRef with React hooks

Document Your React Applications The Right Way

A step-by-step guide on properly documenting our React applications

Build an Auto Logout Session Timeout with React Hooks

A Guide to Documenting Controlled Components with Storybook

A Guide to Managing External Storybook State

How to Create a Custom Table Component in React

JavaScript Frameworks, Performance Comparison 2020

The ultimate performance battle between JavaScript frameworks

React 17: New JSX Transform

A guide to integrating the new JSX Transform

createAsyncThunk in Redux-Toolkit

Dispatching async actions never looked so good

Create Editable HTML in React

How To Embed VSCode Into A Browser With React

5 Tips to Perfect React Testing Library Queries

My strategy to retrieve any element with the Testing Library API

Generating PDF from Images on the Client-side With React

Convert images to PDF on the frontend with no server

Testing React Router with Jest

How to write unit tests that check if you're routing requests correctly using React Router with Jest

Simulate Browser Interactions with Testing Library's UserEvent

A guide to Testing Library's UserEvent API

How to Create, Download, and Upload Files in React Apps

No server needed!

Create a Browser with React.js and Electron

How To Alert A User Before Leaving A Page In React

Here Are 13 Advanced React Dev Interview Topics

A collection of topics that are frequently asked in React Front End Developers Interviews

Building an Animated Counter with React and CSS

A guide on how to create your own version of an animated counter component that you come across all over the web

Using React Hook Form in component tests

A hands-on guide for a Server-Side Rendering React app

In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by…

The Advanced Way to Style with Styled Components

A more in-depth look at the power of styled-components

The Modern Way to Style with Styled Components

An in-depth look at the power of Styled Components

A guide to creating a React app without create-react-app

Creating a React App from scratch

Using React's useEffect Hook to Fetch Data and Periodically Refresh The Data

Interaction Testing with React Testing Library

A window into React component testing

Public, private, and role-based routes in React

How to Create a Slider in JavaScript

Learning Web Development in Practice

How To Avoid Prop Drilling in React Using Component Composition

No Redux or Context API

Create a Full Stack Banking Application using React

Part 1: Create an application using PostgreSQL, Express, React and Node.js stack. “Create a Full Stack Banking Application using React” is published by Yogesh Chavan in JavaScript in Plain English.

Stripe Payment Form with React and Material-UI

Part 4 - Implement Stripe

A Practical Guide To Become a Senior Frontend Developer

An actionable roadmap to becoming a senior front end developer by enhancing your skills in whether you are using react or angular or vuejs.

How to Use React Router with Layouts: A New Approach

Using Array to Make Router in a Simple React App

Creating a Confirm Dialog in React and Material UI

Creating a generic text-input component with React

Gracefully managing forms and input values in React State (Part II)

How to display images from local assets/images folder when working with React

It's not as straightforward as it might seems to be

React: Updating a value in state array

How to update just one value in an array of objects in a state

How to Pass Data From One Component to Other Component in React?

Passing data from one component to another component

How to View Your React App on a Mobile Device

If you have ever worked on a React project, one important thing that you will more than likely have to tackle at some point is the display of your website for mobile users. You can, of course, accomplish this through the use of media queries and the in-browser display, but what if you want to see your project on your own device to see how it really looks? Today, we will talk about how to do just that.

I created the exact same app in React and Svelte. Here are the differences.

React vs Svelte. Finally, a side-by-side code comparison! Because you've heard the fuss about Svelte, and now you want to know what the hype is all about.

How to use async function in React hook useEffect (Typescript/JS)?

Set up React JS with ESLint, Prettier and Airbnb

One of the easiest way you can improve your code is to use a linter!

Building a Point of Sale system with Node & React

Build the front and back end of a real-time application with React and Node!

Can you console.log in JSX?

TLDR: Embed the expression

How to loop through arrays in React

When should I use curly braces { } and parenthesis ( ) in React?

In the beginning of your career when learning React and ES6 JavaScript syntax, it can be confusing when to use curly braces { } and when to use parenthesis ( )

You Probably Don't Need act() in Your React Tests

What you should do instead.

What Is The Best Way To Display A PDF In A Web App?

What is Ref Forwarding?

Passing refs to a child component

Understand Derived State in React

Learn about the hidden risks and how we can benefit from understanding them.

The Practical Guide to React Testing Library with TypeScript

Testing local storage with testing library

How to test changes to the local storage on synchronous cases and asynchronous ones using the testing library.

How to Send WhatsApp Messages From Your React App Easily

A very simple way to send messages on WhatsApp web in React.

React Tips — Async and setState

React onChange with input field & button

React Infinite Scrolling and Lazy Loading

Infinite Scrolling — Infinite scrolling is a concept used by many sites to enhance user experience and performance. In infinite scrolling, the sites load with some data and as the user keeps on scrolling, more and more data gets loaded. This concept saves time since data is loaded in parts and enhance performance as all the components need not be rendered all at once.

React Hooks and the “Observer” Pattern

How to integrate the “Observer” pattern when using React Hooks

React and TypeScript: Generic Search, Sort, and Filter

A step-by-step guide leveraging the awesome powers of TypeScript generics to implement reusable searching, sorting, and filtering.

Light and Dark Mode in React Web Application with Tailwind CSS

How to make a simple React web application using Tailwind CSS

How to Use the Geolocation API in Your React App

Get the user's coordinates and use them in your next React app

How to style <input/> field in React

Style that ugly generic Choose File button in React or any other framework

How to Push or Append an Element to a State Array with React Hooks?

How to convert any web page into a React web page

How to Animate with CSS Keyframes (in React)

How to Add a File Input Button and Display a Preview Image With React

Using the Material-UI library and the URL object

Create a Dropdown Menu Using Next.js & Headless UI

Part 6: Using the Next.js Link component.

Extend Material-UI theme in TypeScript

DangerouslySetInnerHTML in React JS Explained

Create A Hash Anchor Link Effect With React-Router

ComponentDidMount and useEffect Are Not The Same. Here's Why

Building a pagination component in React with TypeScript

How to create a pagination component in react with TypeScript

Let's Build a MERN Stack E-Commerce Web App

Part 1: Setting up the Project

Data Fetching with React Query & Axios

Implementing Hooks for Furry HTTP Requests in react-query

Quickly Deploy Your React App On Google's App Engine

This is a quick guide to make your app go from local to world-wide in five high level steps!

7 Free React Templates You can Use for Your Projects

Awesome React templates and themes you can start with to build your next project.

6 Best React Data Visualization Libraries

Level Up Your React Projects in No Time