Tiempo de lectura: 2 minutos Today 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 minuto Let’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 minuto For 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 minutos Returns 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 minutos Today 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
Tiempo de lectura: 2 minutos Today we are going to learn how we can add the mandatory ad consent message to comply with GDPR. The first thing we need to do is to have our message set up: https://devcodelight.com/mensaje-consentimiento-conforme-rgpd-para-admob/ NOTE: I am using version 12.2.0 of react-native-google-mobile-ads at least (https://github.com/invertase/react-native-google-mobile-ads) Once configured, let’s go to android/app/proguard-rules.pro and add: -keep class … Read more
Tiempo de lectura: < 1 minuto Today we are going to learn how we can implement the GDPR consent message with React Native. Lets install the following library (https://www.npmjs.com/package/@ulangi/react-native-ad-consent) npm install @ulangi/react-native-ad-consent –save <p.Now let’s add this key in info.plist of iOS: <p.Now we open AndroidManifest.xml in case of Android. And add: And now we create our component called consentAdmob.ts To … Read more
Tiempo de lectura: 2 minutos I tried to run an application developed in React Native on an Android device, and I encountered the following error. To solve it, I went to the network and Internet settings of my computer, after clicking on ‘Connection status’ as shown in the following image. We are now going to click where we are connected … Read more
Tiempo de lectura: < 1 minuto Today we will learn how to connect our React Native application to a WebSocket using the react-native-websocket library Setting up React Native Application npm install –save react-native-websocket Make sure to replace ws://localhost:8000/ws/1 with the URL of your FastAPI server. npx react-native run-android or npx react-native run-ios Visit http://localhost:3000 in your browser and you will see … Read more
Tiempo de lectura: < 1 minuto Today we're going to learn how to connect our web application developed with React to a WebSocket. Configuration of the React Application npm install –save react-websocket Make sure to replace ws://localhost:8000/ws/1 with the URL of your FastAPI server. npm start Visit http://localhost:3000 in your browser, and you'll see the React application. You can type messages, … Read more
