React

Fix bug in React Native Expo: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.

by
Fix bug in React Native Expo: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build.

Tiempo de lectura: < 1 minuto Today we are going to learn how to fix an error that occurs when creating a new project with Expo and TypeScript. This error is: The Kotlin Gradle plugin was loaded multiple times in different subprojects, which is not supported and may break the build. This might happen in subprojects that apply the Kotlin plugins … Read more

Pass a parameter/attribute from one React screen to another

by
Pass a parameter/attribute from one React screen to another

Tiempo de lectura: 2 minutos Hello, today we are going to learn how we can pass a parameter from one React screen to another. Step 1: Installing React Router v6 If you haven’t already, install React Router v6: npm install react-router-dom@next Step 2: Configuring React Router In your App.js file, set up routes using BrowserRouter and Route: // App.js import … Read more

Creating a Fragment with React

by
Creating a Fragment with React

Tiempo de lectura: 2 minutos Hello and welcome to my new article on React. Today we are going to see how we can create a fragment with React. A fragment is an area on the screen that changes when we press a button or a menu. To create this fragment, first, we are going to create the menu that allows … Read more

Create Pagination Component for React

by
Create Pagination Component for React

Tiempo de lectura: 2 minutos Today I wanted to share a simple way to implement a pagination component using Material-UI in React. This component is useful when working with extensive lists, allowing navigation between different pages. First, we create the pagination component with its attributes so we can use it wherever we need it. import React from ‘react’; import Pagination … Read more

Configure SonarQube to allow analysing TypeScript and React code

by
Configure SonarQube to allow analysing TypeScript and React code

Tiempo de lectura: 2 minutos If you want to analyse a React project that includes TypeScript files (.ts and .tsx) with SonarQube, you’ll need to configure SonarQube to support TypeScript and adjust your project for effective SonarQube analysis settings. Below are the general steps: 1. Configure SonarQube to Support TypeScript: Ensure SonarQube is installed and running. Also, you need the … Read more

Docker container to generate a React build

by
Docker container to generate a React build

Tiempo de lectura: < 1 minuto Hello, today I’m going to share a very useful container for generating a React build. It already contains everything needed to generate it. Additionally, it is compatible with Vite.js. The first thing we are going to do is create the file docker-compose.yml version: ‘3.1’ services: react-app: container_name: react-app build: context: . dockerfile: Dockerfile volumes: – … Read more

How to change the Favicon in a React Application

by
How to change the Favicon in a React Application

Tiempo de lectura: 2 minutos Changing the favicon in a React application is a simple process and can be achieved in a few steps. Here’s a step-by-step tutorial: Step 1: Prepare the Icon Make sure you have an icon in the desired format (.ico, .png, etc.). You can create an icon using online tools or graphic design programs like Photoshop, … Read more

Creating a React Build Using Vite

by
Creating a React Build Using Vite

Tiempo de lectura: 3 minutos Here is a step-by-step tutorial on how to create a build with Vite and deploy it for testing on a local server using Nginx. This tutorial assumes you already have Node.js and npm installed on your machine. Step 1: Create a new Vite application (skip this step if you already have one) Open the terminal … Read more

Create a 3D planet viewer with React

by
Create a 3D planet viewer with React

Tiempo de lectura: 2 minutos Here’s a step-by-step tutorial to create the React component “QuantumUniverseExplorer,” allowing you to explore a 3D universe interactively. This tutorial uses WebGL and Three.js for visualization. Let’s dive into the quantum cosmos! Step 1: Project Setup :rocket: Create a new React project with Create React App: npx create-react-app universe-explorer cd universe-explorer Step 2: Library Installation … Read more