Learn it from developers who built it.
Tutorials, how-tos and deep dives on AI, .NET, C#, cloud and developer tools, written by the community.
Learn methods for passing data between React components, including props, state lifting, Context API, custom hooks, and third-party state management libraries like Redux, each suited for different application needs.
Everything on React, not only its articles: the React page →
GetDerivedStateFromError is a lifecycle method in ReactJS used for error handling within components. It allows components to catch JavaScript errors during rendering, updating, and in lifecycle methods.
Custom Hooks in ReactJS empower developers to extract reusable logic from components into standalone functions, enhancing code organization and reusability. They encapsulate stateful logic, side effects, or context interactions, promoting cleaner and more maintainable code.
Learn how to enhance your Reactjs application's code quality with ESLint in this comprehensive guide. ESLint is a powerful tool for identifying and fixing code errors, enforcing coding styles, and maintaining consistency across your project.
The renderToNodeStream method in ReactJS enables server-side rendering with streaming support, enhancing performance by sending chunks of HTML to the client as they're generated.
Fix an Azure App Service deployment error where a Create React App NPM start script exits before the development server reports it is listening.
This guide covers the essentials of building a responsive, interactive interface for managing e-commerce data in real-time. Perfect for web developers looking to enhance their skills in front-end development with modern technologies.
In this article, we will explore step-by-step instructions to integrate Bootstrap's powerful UI components with React's flexibility, ensuring your navigation adapts seamlessly across devices.
Learn to build a React app with routing using react-router-dom. Set up a structured folder layout, define routes in Main.js, integrate components in App.js with BrowserRouter, and configure the entry point in index.js.
Learn how to build a CRUD application in React with this comprehensive guide. From setting up your development environment to implementing Create, Read, Update, and Delete functionalities, this tutorial covers it all.
Discover how to use the useNavigate hook in ReactJS with this beginner's guide. Learn to navigate programmatically within your React application using the useNavigate hook, part of React Router v6.
Learn how React Hooks work in functional components, including useState, useEffect, useReducer, and custom Hooks.
Routing in React JS for Beginners" is a comprehensive guide designed to introduce newcomers to the fundamentals of routing in React. Learn how to set up React Router, navigate between components, and manage dynamic routes.
Using Styled Components and TypeScript, Ziggy Rafiq illustrates how to enhance the styling of React applications. With Styled Components, you can write CSS in JavaScript, simplifying the management of styles in a modular and reusable way. When combined with TypeScript, your code will be type-safe and easier to maintain.
Learn to create a sample React JS application and containerize it using Docker. This guide covers prerequisites, step-by-step instructions for creating and running a React app, generating a Docker file, and building and running a Docker image. GitHub link included for reference.
This insightful guide by Ziggy Rafiq explains how React Router and TypeScript can be used to achieve type-safe routing in React applications. Set up static routes using TypeScript's robust type system, maximizing compile-time safety and reducing runtime errors by leveraging TypeScript's robust type system.
Learn how to simplify state management in your Redux applications by combining reducers. This guide explores the concept of reducer composition, demonstrating how to break down complex state logic into manageable pieces.
Middleware in Next.js, introduced in version 12, allows code execution before a request is processed. Useful for authentication, logging, URL rewrites, and modifying headers, it runs on the Edge Network for speed. Defined in _middleware.js or _middleware.ts, it enhances request handling and response management efficiently.
Learn how to seamlessly integrate GraphQL with React.js in your web development projects. Discover the fundamentals of GraphQL, set up GraphQL clients like Apollo Client, handle queries, mutations, and subscriptions efficiently.
React Strict Mode is a development tool in React that helps identify potential issues in an application by highlighting them early. It enforces best practices, improves performance, and ensures code quality by providing additional checks and warnings for components.
Learn how to create and maintain snapshots, handle changes in components, and integrate snapshot testing into your automated testing workflow for robust, reliable software development.
In this article, I explain how to make React applications faster by loading only the code that's needed at the moment. I talk about using methods like dynamic import(), React.lazy, and Suspense to load components when they're needed.
In this article we will learn about implementing webhooks in Next.js empowers our application with real-time capabilities, allowing seamless integration with external services and automating business processes.
We highlight the advantages of using Next.js to build PWAs, emphasizing their capability to provide a user experience similar to native apps. By utilizing Next.js, we maintain the benefits of web technologies while ensuring fast, reliable, and engaging PWAs that align with modern user expectations.
Discover how to effectively integrate jQuery into your React application. This guide covers the essentials of using jQuery with React components, handling DOM manipulation, leveraging React lifecycle methods, and ensuring smooth interoperability between the two libraries.
Learn how to use Fluent UI in React to create modern, responsive, and accessible user interfaces. This guide covers setting up Fluent UI, integrating its components, and customizing styles for your React application.
This article explains state management in React using Context API and Redux. It covers creating and using Context for state sharing without prop drilling and setting up Redux for more complex state needs.
Formik is a popular form management library for React applications. It simplifies the process of building and handling forms by abstracting away much of the boilerplate code associated with form handling, validation, and submission.
For every enthusiastic developer and progressive learner have initial setup to start the learning. For those devs this is going to help to start creating the react application in the vs code. Will see the step by step approach and install the necessary modules. Let's follow the same steps and create the react app.
Building a Chrome extension using a React app developed with TypeScript and bundled with Webpack offers a modern approach to browser extension development. In this blog, I will guide you through the steps to create a Chrome extension utilizing the npx create-react-app template with TypeScript.
Write an article and earn +1,000 SHARP when it is approved.
Write an article
