Tag: react

This image features the iconic React logo—a blue atom-like symbol with a central dot and orbiting curves—superimposed on a background of a city skyline. The city appears to be shrouded in soft pink and purple hues, giving the image a modern, tech-focused atmosphere. This image symbolizex the use of React for building modular, scalable frontend architectures. React's component-based approach aligns with the principles of micro-frontends, where different parts of the user interface are independently developed and managed, similar to how microservices operate on the backend. The cityscape in the background represents the larger, complex web applications that can benefit from a structured, flexible frontend framework like React.

Practical guidance between vertical and horizontal micro-frontends

Dev

Micro-frontends, like microservices in backend development, divide frontend applications into modular, self-contained components that can be independently developed, tested, and […]

Peter Aideloje
Sep 27, 2024 ⋅ 8 min read
How And When To Force A React Component To Re-Render

How and when to force a React component to re-render

Dev

Learn how and when to force a React component to re-render, exploring methods like `setState`, `forceUpdate`, and `key` prop manipulation.

Juan Cruz Martinez
Sep 25, 2024 ⋅ 10 min read
React logo displayed on a pastel sky background, representing the topic of migrating to React 19 using react-codemod.

Migrating to React 19 using react-codemod

Dev

In this tutorial, you will learn how to upgrade and refactor your React application to the latest version without having […]

Popoola Temitope
Sep 20, 2024 ⋅ 3 min read
An illustration of a hand holding a large hammer with a lightning bolt symbol. The background features a vibrant, gradient sky with shining stars. This image metaphorically represents the strength and flexibility of using Vike and vite-plugin-federation to build scalable micro-frontends. As discussed in the article, Vike allows for server-side rendering (SSR) and static-site generation (SSG), while vite-plugin-federation helps integrate shared components across different micro-frontend applications, enhancing the speed and modularity of modern web development frameworks like React, Vue, and Svelte

How to build scalable micro-frontends with Vike and Vite

Dev

Micro-frontends let you split a large web application into smaller, manageable pieces. It’s an approach inspired by the microservice architecture […]

Elijah Asaolu
Sep 18, 2024 ⋅ 6 min read
React Table: A Complete Guide With Updates For TanStack Table

React Table: A complete guide with updates for TanStack Table

Dev

We build a smart data table UI in React Table v7 and explore some of the new features available in Tantack Table v8.

Paramanantham Harrison
Sep 16, 2024 ⋅ 16 min read
Using The React Children Prop With TypeScript

Using the React children prop with TypeScript

Dev

Explore best practices for typing `children` props in TypeScript in both functional and class-based components.

Ohans Emmanuel
Sep 13, 2024 ⋅ 7 min read
Using DangerouslySetInnerHTML In A React Application

Using dangerouslySetInnerHTML in a React application

Dev

The `dangerouslySetInnerHTML` property in a React application is the equivalent of the `innerHTML` attribute in the browser DOM. Learn more in this guide.

Doğacan Bilgili
Sep 13, 2024 ⋅ 6 min read
The Top 9 React Chart Libraries

The top 9 React chart libraries

Dev

Review the top most popular React chart libraries, which simplify the process of building charts and visualizing large amounts of data.

Hafsah Emekoma
Sep 10, 2024 ⋅ 7 min read
Persist State With Redux Persist Using Redux Toolkit In React

Persist state with Redux Persist using Redux Toolkit in React

Dev

With Redux Persist, you can save the Redux store in persistent storage so even after refreshing the browser, the site state will be preserved.

Taminoturoko Briggs
Sep 10, 2024 ⋅ 14 min read

Build an image editor with Fabric.js v6

Dev

In web development projects, developers typically create user interface elements with standard DOM elements. Sometimes, web developers need to create […]

Shalitha Suranga
Sep 9, 2024 ⋅ 12 min read
Formik Adoption Guide: Overview, Examples, And Alternatives

Formik adoption guide: Overview, examples, and alternatives

Dev

Formik is a small JavaScript library built in response to the hardships experienced when creating large forms in React.

Alexander Godwin
Sep 4, 2024 ⋅ 14 min read

Creating an animated hamburger menu icon for React

Dev

The hamburger menu icon is a common design element in mobile and responsive websites and applications. It offers a compact […]

Ibadehin Mojeed
Sep 4, 2024 ⋅ 8 min read