javascript – Page 2970 – Blancer.com Tutorials and projects

Errors with local storage and Input field

I created a code with a local storage and so far so good every other thing saves when the page reloads but the text inside the input field vanishes. What should I do please?

I tried adding the local store data to an input field and created and I was expecting it to save the text when the page reloads but it just didn’t save it.
The input is inside a span element but was created with JavaScript

Is there a way to allow content Script iframe to requests with all cookies it has to in a chrome extension?

I am woorking on an extention that is intented for personal use. It purpose is to render a widget on everypage with my keep.google.com notes as an iframe.

So far I have been able to follow thos stackoveflow answer. And I have reached somewhere where I get an error accounts.google.com redirected you too many times. But I realised this error is only on the brave browser and I can go in the privacy settings and Allow all cookies insteady of Block third-party cookies and make it work.

Is there a way around this problem? Can I get it working without temparing with brave settings?

I currently have a

How to make an onClick event disables all other events?

I am trying to capture elements without triggering their original on click functionality.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="button">Test Button</button>
    <script>
        const Button = document.getElementById("button");
        Button.addEventListener("click", buttonClick)

        document.addEventListener("click", captureElement);

        function buttonClick() {
            console.log("I have been clicked!")
        }

        function captureElement(event) {
            event.preventDefault();
            console.log(event.target)
        }
    </script>
</body>

</html>

Here is the console result upon clicking the button:

So basically I want only the captureElement function to fire and all other on click functionalities to be disabled, whether a button, input or any element that has an onclick event listener on it.

React Sorting Issue when using UseState: Cannot read properties of undefined

I’m learning React, I’m still a beginner and I’m encountering an issue while attempting to sort an array of objects in a React component. The error message I’m receiving is “Cannot read properties of undefined (reading ‘price’). This happen only when I use UseState, I tried not to use it and use the sorting’s comparison function directly let productsPrice = productData.sort((a, b) => a.price - b.price)) and it worked very well.

Code:

import '../style/products.css';
import productData from '../products-data';
import Product from './Product';
import { useState } from 'react';

function ProductsList() {
  const compareAscendingPrice = (a, b) => a.price - b.price;
  const compareAscendingRate = (a, b) => a.rating.rate - b.rating.rate;
  const compareAscendingAlpha = (a, b) => a.title.localeCompare(b.title, 'en');

  // let type = compareAscendingAlpha;
  let [type, SetType] = useState(compareAscendingPrice); // useState hook
  let productsPrice = productData.sort(type);
  let products = [...productsPrice].map((item) => {
    return <Product item={item} key={item.id} />;
  });

  return (
    <>
      <div className="products__filter">
        <div className="products__filter__search">
          <input type="text" placeholder="Search" />
        </div>
        <div className="products__filter__sort">
          <label htmlFor="sort">Sort by:</label>
          <select
            name="sort"
            id="sort"
            onChange={(e) => {
              if (e.target.value === 'price') {
                SetType(compareAscendingPrice);
              } else if (e.target.value === 'rating') {
                SetType(compareAscendingRate);
              } else if (e.target.value === 'title') {
                SetType(compareAscendingAlpha);
              }
            }}
          >
            <option value="price">Price</option>
            <option value="rating">Rating</option>
            <option value="title">Title</option>
          </select>
          <div className="products__filter__direction">
            <label htmlFor="ascending">Ascending</label>
            <input type="checkbox" name="ascending" id="ascending" />
            <label htmlFor="descending">Descending</label>
            <input type="checkbox" name="descending" id="descending" />
          </div>
        </div>
      </div>
      <div className="products">{products}</div>;
    </>
  );
}

export default ProductsList;

What could be causing this issue, and how can I ensure that the price property is properly recognized during sorting?

I checked the data files, I looked on the internet, but I did not find any solution.

Note: I’m learning React I’m still a beginner.

Was learning to code a waste of time? Or how can I use the 100 hours of coding skills I learned [closed]

TL;DR did I waste 100 hours learning HTML, CSS, and JS to start my fashion website with a small shop or is there a simple framework so that I can use my skills? Is anyone able to help me with a simple framework to work within where I can have a couple of pages of HTML, a CSS page for styling, and a JS script for laying out images in a CSS grid with some cheap and cheerful e-commerce integration (maybe Snipcart, Medusa.js or…) on a host where they keep the technical side up to date so I don’t have to worry?

Hi everyone,

I am a 23-year-old fashion designer who has recently found some success in the fashion world and have now realised that I need a website…

I was keen to have a unique and custom feeling for my web presence to enhance how people feel about my brand and start to build the world that it lives in. For my website, I was thinking I will need pages for home, shop, media coverage, and archives of previous work. I am not yet expecting to be taking lots of orders through my website so I was trying to avoid using website builders (squarespace, wix etc.) as their e-commerce plans are normally quite pricey.

What I wanted from my website is quite simple (but unique in the fashion world) so I decided that it would be a good idea to learn how to code (and fun), so I ended up doing about 100 hours of the Scrimba front-end development course. I finished the javascript lessons and stopped before learning about react and APIs as I felt like I could get what I wanted from my website from what I had learned already.

Feeling ready to get started on my own website using vanilla javascript, HTML, and CSS I downloaded VS code and got to building. I was having a lot of fun and as someone who works visually in fashion, I found it very rewarding to be able to type strange strings of words and have it produce a website.

Jumping ahead of myself I wanted to research the next step of how I would get this website out to the world. One thing led to another and I got in over my head in a research rabbit hole that is your guys’ world of web development. I signed up for a managed Site Ground WordPress plan and thought it would have a great level of customizability mixed with plugins that would make my life as an amateur much easier + it would have totally free WooCommerce.

Now I have realised that WordPress websites are dynamic, not static and it makes the 100 hours of coding school I did redundant.

So what I want to ask is if there is no use in having a little bit of coding knowledge, is it either you know everything about web development or nothing? Since thinking of getting my money back from Site Ground and wondering what my options are I have been inundated with information and abbreviations, jamstack, node.js, headless commerce, APIs etc. there is just so much to learn in this world!

Is anyone able to help me with a simple framework to work within where I can have a couple of pages of HTML, a CSS page for styling, and a JS script for laying out images in a CSS grid with some cheap and cheerful e-commerce integration (maybe Snipcart, Medusa.js or…) run on a managed server (like a managed WordPress hosting) where the host keeps the technical side up to date so I don’t have to worry?

Thank you SO much for making it to the end of that.

I tried to research this all around and feel like my head might explode!

How to select correct text in html with Javascript/HTML

The code as blow is shown some within , I want select correct text.
But now when mouse down on SPAN and start selecting text and mouse move to the div ,a large text is selected as the image as blow.
Can I select the correct text?

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conditional Text Selection</title>
    <style>

    .textLayer{
        position:absolute;
        inset:0;
        overflow:hidden;
        font-family:monospace !important;
        line-height:1;
        -webkit-text-size-adjust:none;
         -moz-text-size-adjust:none;
              text-size-adjust:none;
        forced-color-adjust:none;
        transform-origin:0 0;
        z-index:2;
    }

 /*   .textLayer :is(br) {
        user-select: none;
    }*/

    .textLayer :is(span, br){
        position:absolute;
        white-space:pre;
        cursor:text;
        transform-origin:center left;
        display: inline;
    }

    /* 标记选中的文本 */
    ::selection {
        background: yellow;
    }
    </style>
</head>
<body>
<div class="textLayer" data-main-rotation="0" style="width: 1200px;height: 1300px;--scale-factor: 1.96078431372549;"><span  style="left: 10.59%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.953561, 0.75);">(or, more broadly, on</span>
<span  style="left: 27.13%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 27.73%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.914235, 0.75);">mathematics</span>
<span  style="left: 37.43%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span dir="ltr" style="left: 38.22%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.962099, 0.75);" aria-owns="pdfjs_internal_id_321R">generally).</span>
<span  style="left: 46.35%; top: 9.81%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">42</span>
<span  style="left: 47.73%; top: 9.81%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif;"> </span>
<span dir="ltr" style="left: 48.65%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.945475, 0.75);" aria-owns="pdfjs_internal_id_322R">To illustrate this converse, I single out ﬁve events in</span>
<br role="presentation"><span  style="left: 10.59%; top: 11.74%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.912819, 0.75);">ﬁve diﬀerent areas of mathematics (Figure 3), triggered or made possible by logic-based developments</span>
<br role="presentation"><span  style="left: 10.59%; top: 13.45%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.932114, 0.75);">in computer science, with each event deserving the distinction of being ‘ﬁrst’ in its respective area:</span>
<br role="presentation"><span  style="left: 13.25%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.912485, 0.75);">Boolean algebra</span>
<span  style="left: 27.3%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 28.22%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.970179, 0.75);">– a formal proof that every Robbins algebra is a Boolean algebra, using the</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 18%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.946777, 0.75);" aria-owns="pdfjs_internal_id_323R">automated theorem-prover EQP (1997).</span>
<span  style="left: 46.2%; top: 17.78%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">43</span>
<br role="presentation"><span  style="left: 13.25%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.929563, 0.75);">Graph theory</span>
<span  style="left: 25.08%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 25.75%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.906408, 0.75);">– a formal proof of the Four-Color Theorem using the automated interactive proof-</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 21.92%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.919253, 0.75);" aria-owns="pdfjs_internal_id_324R">assistant Coq (2008).</span>
<span  style="left: 31.51%; top: 21.7%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">44</span>
<br role="presentation"><span  style="left: 13.25%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.948306, 0.75);">Group theory</span>
<span  style="left: 25.34%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 26.24%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.94688, 0.75);">– a formal proof of the Odd-Order Theorem, also known as the Feit-Thompson</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 25.84%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.935484, 0.75);" aria-owns="pdfjs_internal_id_325R">Theorem, using the automated interactive proof-assistant Coq (2012).</span>
<span  style="left: 69.61%; top: 25.63%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">45</span>
<br role="presentation"><span  style="left: 13.26%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.909879, 0.75);">Three-dimensional geometry</span>
<span  style="left: 36.86%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
</div>
</body>
</html>

I expected:
enter image description here
Result actually:
enter image description here

Ajax call only passing id of the first element first row

I am outputting multiple dynamic links which use the same < a >. My AJAX call loads the content fine of all the links fine. But the new div which displays the ajax content only outputs the id of the first link when other links are clicked.

Javascript

$('.btn_add_remove_cart').click(function(e) {

            $.ajax({

                type: "POST",

                url: "<?php echo base_url(); ?>/directaddto_cart",

                data: $('#cartForm').serialize(),

                dataType: "JSON",

                success: function(data) {

                    var total = data.total;

                    $('.top-cart-count').html('<i class="fa fa-cart-plus"></i> <span class="label label-theme rounded-pill">' + total + '</span>')

                    

                }, //success fun end

            });

        });

How to define if string have a necessary substrings. With regular expression. In one step

I have a string, and I want to define if it a correct pathname and that at least one (/:)|(^/?:) pair of symbols exists and that all in one step.

Correct pathname must include next symbols [a-zA-Z0-9.~!$&'()*+,;=@-_s:] in each portion, divided by ‘/’.

For example:

:param1/path1/:param2 – correct, with defining groups {param1, param2}
path1/path2/path3 – incorrect
path1/:param1 – correct, with defining group {param1}

Is it possible to do in one step with a help of regular expression?

Integrating CommonJS Module with Dynamic Require Statements into a Vite ES Module Project

I’m working on a Vite project that primarily uses ES modules. However, I’ve encountered a challenge where I need to integrate a package that is written in CommonJS format. This CommonJS package contains dynamic require statements, which seem to be causing compatibility issues when trying to import it into my Vite project.

I have tried a few approaches, but none have been successful so far:

Direct Import: Attempted to directly import the CommonJS module into my Vite project. This resulted in errors related to the dynamic require statements not being recognized.

Vite Plugin CommonJS: Utilized the vite-plugin-commonjs to try and bridge the compatibility gap. However, the dynamic require statements still caused issues, leading to failed module resolution.

// vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import commonjs from '@rollup/plugin-commonjs';


export default defineConfig({
    // other configs
    optimizeDeps: {
        exclude: ['dependency-package']
    },
    plugins: [commonjs(), react()],
});

Also as below

// vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
    // other configs
    optimizeDeps: {
        exclude: ['dependency-package']
    },
    build: {
        outDir: "build",
        chunkSizeWarningLimit: 1024,
        commonjsOptions: {
            transformMixedEsModules: true,
        },
    },
    plugins: [react()],
});

This resulted in Uncaught ReferenceError: exports is not defined

Conversion of the CommonJS package to an ES module format is not an option for me.

I’m looking for suggestions on how to effectively integrate this CommonJS package into my Vite ES module project, especially considering the dynamic require statements.

How to control a react-select component from a Chrome extension?

I’m trying to write a Chrome extension to automate the filling out of a new issue in Jira, and in order to do this, I need to control a react-select component from my content_script. These are very tricky beasts indeed since they are made up of lots of divs within which is an actual input (that is often hidden until you click on it).

I’ve created a small codesandbox demo which has a basic react-select example and a button that sets focus to the input and types the letters “Red” to filter the options. I’ve sprinkled lots of timeouts in there to slow it down in case I need to wait for things to process before I can type (such as focusing the input field), but my experiments have been futile.

In the basic example I copied from the react-select site, the hidden input field is in the DOM at all times (thankfully), but it doesn’t appear in Jira until you click on it (alas!). So that will be another challenge, but even in this basic example, I can’t even get it to work.

Is it possible to simulate user clicks and keyboard events like this, or is this behaviour seen as potentially suspicious and deliberately blocked by the browser? Am I asking the impossible?

Thanks.

Uncaught TypeError: Cannot set properties of null – Adding class to html

Reworking some old code for a project i need to resubmit and wrote this almost 6 months ago so i cant even remember much and i struggle with JS.

I have a onclick function that adds the class current to my html, it is a popup message for a user and when they click exit it removes the popup button, But looking now in my console it is give out an error of script.js:13 Uncaught TypeError: Cannot set properties of null (setting 'onclick') at script.js:13:19

This code does work fine but i cant have console errors for my project.

This is the javascript function that adds and removes the class current.

const quizStart = document.querySelector('.quiz-btn');
const quizPopup = document.querySelector('.start-quiz-popup');
const quizMain = document.querySelector('.main');
const quizExit = document.querySelector('.exit-btn');

// Add current tag for onclick targetting
quizStart.onclick = () => {
    quizPopup.classList.add('current');
    quizMain.classList.add('current');
};

// Remove current tag for onclick targetting
quizExit.onclick = () => {
    quizPopup.classList.remove('current');
    quizMain.classList.remove('current');
};

The popup is set to have opacity of 0 and then when the current tag is added to the class, another css element of .main.current has opacity to 1.

Before

<section class="main"></section>
<div class="start-quiz-popup"></div

After

<section class="main current"></section>
<div class="start-quiz-popup current"></div

I have looked at other guides and asked a couple people but they are not to sure, I struggle with javascript alot and not sure what is wrong when its working fine. This is a old project that i need to completly rework and have had to make alot of changes and more to come, html and css are fine but looks like i need to rewrite alot of css as originally followed a guide and was all built on one page, but it had 0 responsivness as i didnt know how to do all of that with the way it was setup.

It probably is very basic code but i just cant figure it out or what the best way to go about making a updated version. I have tried a couple examples but it just replaces my current tag in place rather than adding the “current” tag maybe the word “active” would be better so future i’ll use thaat, just need to get it working without a console error. Apoligies if this is so simple, im just stuck.

best approch for filtering

I have a list of entities (profiles)
I have another list of entities (openapis)

each openapi can be pointed at by several profiles

ex: openapis: “Alpha”, “Beta”

profiles: profile1 > “Alpha” profile2 > “Alpha” profile3 > “Beta”

I need to display list of openapis [“Alpha”, “Beta”] and their pointing profile
ex:

“Alpha” : profile1 ,profile2

“Beta”: profile3

I dont have database Im using “kebernetes” CRs what is the best approch for this ?
I know I can just filter profiles for each openapi but is there a better approch ?

Error: ENOENT, buildindex.html not found

I use electron-builder to pack my React electron app. After installing and launching my application I’m getting this error:

Error: ENOENT, build\index.html not found in D:\Test\MyApp\resources\app.asar
at createError (node:electron/js2c/asar_bundle:2:1574)
at Object.lstat (node:electron/js2c/asar_bundle:2:4546)
at node:electron/js2c/asar_bundle:2:4950
at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

(I think) This problem caused by my express server, that streams index.html file.

Code, that starts express server using index.html, builded by npm run build:

const startServer = () => {
    const app = express();
    app.use(express.static(path.join(__dirname, 'build')));

    app.get('/*', function (req, res) {
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    });

    app.listen(7865);
}

Creating window code:

const createWindow = async () => {
    win = new BrowserWindow({
        width: 1080,
        height: 720,
        minWidth: 1350,
        minHeight: 860,
        title: 'MyApp',
        webPreferences: {
            nodeIntegration: true,
            devTools: true,
            contextIsolation: false,
            enableRemoteModule: true,
        },
    })

    win.removeMenu()
    win.setMenu(null)

    isDev ? null : startServer()
    isDev ? win.loadURL('http://localhost:3000')
        : win.loadURL('http://localhost:7865')

    win.maximize()

    win.webContents.on('before-input-event', (_, input) => {
        if (input.type === 'keyDown' && input.key === 'F12') {
            win.webContents.isDevToolsOpened()
                ? win.webContents.closeDevTools()
                : win.webContents.openDevTools({ mode: 'right' });
        }
    })
}

//const {app, BrowserWindow} = require('electron')
app.whenReady().then(() => {
    createWindow()
})

Build field in package.json:

"build": {
    "productName": "MyApp",
    "appId": "com.test.myapp",
    "extends": null,
    "win": {
      "target": "nsis",
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false,
    }
  }

directory structure:
https://i.stack.imgur.com/fCxOz.png

I’m sure that problem is in built application. When I use this code in dev mode (with changing isDev -> !isDev) server with index.html works fine, as I expect.

How can it be fixed?

React Native: Issue with Navigation – Stack Navigator not Navigating to Next Screen

I’m encountering a navigation issue in my React Native project using React Navigation. The Stack Navigator is not navigating to the next screen as expected. Here’s a simplified version of my code:

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// HomeScreen.js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  const handleNavigate = () => {
    navigation.navigate('Details');
  };

  return (
    <View>
      <Text>Welcome to the Home Screen!</Text>
      <TouchableOpacity onPress={handleNavigate}>
        <Text>Go to Details Screen</Text>
      </TouchableOpacity>
    </View>
  );
}

Despite having a simple navigation setup, pressing “Go to Details Screen” does not navigate to the DetailsScreen. There are no error messages, and I’ve verified that the screen names match.

Can someone please provide guidance on how to troubleshoot and resolve this issue with the Stack Navigator not navigating to the next screen? Any insights or suggestions would be appreciated. Thank you!

Three.js BVHLoader in React/React Native

I am trying to make an application and/or website where BVH animation is displayed. I found the example in Three.js: BVHLoader example. I also know it is possible to use React and React Native with Three.js. However, I am unable to replicate this particular example in React in any way. Is there a straightforward way to transform this code to React and eventually React Native?