Tiempo de lectura: 2 minutosThe KeyboardAvoidingView is a component in React Native that helps manage keyboard behavior on mobile devices, especially on small screens. When a text field or input is selected and the keyboard appears, The KeyboardAvoidingView adjusts the position of components on the screen to prevent them from being covered by the keyboard. You should use KeyboardAvoidingView … Read more
Tiempo de lectura: < 1 minutoToday we’re going to learn how we can add a YouTube video in React. The first thing we need to do is to add this dependency: npm install react-youtube –save Once installed, let’s create the component responsible for opening the YouTube video. We’ll call it YoutubePlayer.tsx You can customize the options by adding playerVars: reference. … Read more
Tiempo de lectura: 2 minutosToday we are going to learn how we can set up ESLint for a project that uses React and React Native with JavaScript or TypeScript. This will allow us to recognize errors that appear in our code and configure the type of error we want. First of all, we need to install ESLint: npm install … Read more
Tiempo de lectura: < 1 minutoToday I’m going to share a container setup for React based on Nginx. To do this, we are going to create this docker-compose.yml Now we are going to create our Dockerfile Finally, we will create the necessary folders: The nginx.conf file must contain: Remember that the React distribution folder generated with Vite is inside dist, … Read more
Tiempo de lectura: < 1 minutoToday we are going to learn how we can generate a development build with React Vite. This will generate the dist folder with development configuration. To do this, we need to go to the package.json file and add this command inside “scripts”: { Returns only the HTML translated, without any additions. npm build-dev This way … Read more
Tiempo de lectura: 2 minutosToday we are going to learn how we can install Vitest in a React environment with Vite. First, we will install Vitest: npm install -D vitest After we will install the necessary libraries: npm install vitest @testing-library/react @testing-library/jest-dom –save-dev Now let’s create the directory structure for the tests, outside our src folder: And within components, … Read more
Tiempo de lectura: < 1 minutoLet’s create a RadioGroup component composed of RadioButtons. First, we create the RadioGroup component. Now, let’s create a RadioButton component as shown below: Next, let’s use the components as follows: Finally, here’s the result: I hope this helps you. Have a great day! DevCodeLightdevcodelight.com
Tiempo de lectura: < 1 minutoFor this tutorial, we will use Material UI. First, we install the necessary dependencies: npm install @mui/material @emotion/react @emotion/styled Now, let’s create our theme by creating a file named theme.tsx (I use TypeScript, you can create it in JavaScript) In my case, I have set Roboto as the fontFamily and the colors to Teal. Now, … Read more
Tiempo de lectura: 3 minutosReturns only the HTML translated, without any additions. Deep links allow us to open sections of our APP using a link or URL. First we are going to implement deep links in Android. To do this: We are going to go to app.json and add: Assuming the URL we want to open is https://myapp.com/main. To … Read more
Tiempo de lectura: 2 minutosToday we are going to learn how we can integrate tests with Jest that allow us to test the React components created. The first thing we have to do is install Jest: npm install –save-dev jest Install testing-library/jest-dom: npm install –save-dev @testing-library/jest-dom We installed ts-jest npm install –save-dev ts-jest We installed: npm install –save-dev babel-jest … Read more
