Wczytanie <script></script> do react Component. Jak to zrobić?

Question

Witajcie forumowicze w pogodną Majóweczkę, 

W związku z grupowymi zwolnieniami na które się załapałem, rozpocząłem naukę ReactJS i Vue.js i inne które wymagają na JustJoin, zacząłem myśleć o przebranżowieniu się - znalezieniu chociaż praktyk, zostawiłem już ten PHP i jQuery

Próbuję przepisać na początek swoją stronę www.yohabs.prv.pl

Doszedłem do momentu gdzie chciałbym załadować skrypt z "Matrix'a" i trafiłem na ścianę. 

 

Pytanie: Jak dodać w react tagi z odnosnikiem do skryptu <script></script> ?

przeszukałem już kilka rozwiązań ale albo nie działa albo nie umiem tego zaimplementować :/

mam tak <script type="text/javascript" src="matrixScript.js"></script> i

 

import React from "react";
// import showMATRIX from "./matrixScript";
// import MMA from "./matrixScript";



function Matrix(){
    return(
        <div className="windowLife">
            <div id="about">
                <canvas id="c"></canvas>
                    <script type="text/javascript" src="matrixScript.js"></script>
                    {/* <MMA /> */}
            </div>
            <div className="underLink">
            <a class="matrix-fullscreen" target="_blank" href="matrix-fullscreen/index.html"> Pełny ekran </a>    
            </div>
        </div>
    )
}

export default Matrix;

matrixScript.js -> kod

		var c = document.getElementById("c");
		var ctx = c.getContext("2d");
		c.height = window.innerHeight;
		c.width = window.innerWidth;
		
		var chinese = "/\\ANLO甶 男甸甹町!$%$#SWZ\\//";
		chinese = chinese.split("");
		
		var font_size = 8;
		var columns = c.width/font_size;
		
		var drops = [];
		for(var x = 0; x < columns; x++)
			drops[x] = 1; 
		
		function draw()
		{
			ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
			ctx.fillRect(0, 0, c.width, c.height);
			
			ctx.fillStyle = "#0F0";
			ctx.font = font_size + "px arial";
			for(var i = 0; i < drops.length; i++)
			{
				var text = chinese[Math.floor(Math.random()*chinese.length)];
				ctx.fillText(text, i*font_size, drops[i]*font_size);
				if(drops[i]*font_size > c.height && Math.random() > 0.975)
					drops[i] = 0;
		
				drops[i]++;
			}
		}
		
		setInterval(draw, 43);
	

Gdy chce wejść w zakładkę Matrix to mi wyskakuje

Jak na chwile za komentuje 2 linijkę, a po chwili od komentuje to działa, mimo że showMATRIX to nie komponent :/ tylko sam skrypt w pliku j.w

Comments

Czemu nie zrobisz z tego skryptu modułu? Wtedy mógłbyś inicjację Canvasu wywołać z komponentu Reacta, gdy ten już się wyrenderuje (https://react.dev/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means).

Answer 1

Jeśli chcesz uczyć się Reacta to czemu nie chcesz napisać tego w React ;) Zapomnij o czymś takim jak getElementById i poczytaj jak używać referencji za pomocą propsa ref.  Resztę wrzucasz np do useEffect tak jak wrzucił link ScriptyChris. 

setInterval to też staroć teraz używa się requestAnimationFrame do renderowania czegoś w canvas ;) 

Warto się zastanowić w czym chcesz pisać React i Vue to moim zdaniem za dużo. Dobry FE developer specjalizuje się tylko w jednej z bibliotek. Więc jeśli Ci zależy na czasie skup się tylko na React. 

Jeśli bardzo potrzebujesz wrzucić jakiś znacznik <script> jakiejś zewnetrznej usługi to wszystko zalezy od twojej konfiguracji i użycia Reacta. Możesz używać CRA (Create react app) i wtedy wrzucasz prosto do pliku html. Możesz też używać frameworka next.js(wcześniej czy później warto poznac ale na początku może cię przytłoczyć) i w nim masz plik pages/_document.tsx

Comments

 

Jeśli chcesz uczyć się Reacta to czemu nie chcesz napisać tego w React ;)

Dobre pytanie, nie wiedziałem jeszcze że tak można tego używać, dopiero 3 dzień siedzę przy nim :) 

Zacząłem od poprawienia skryptu w js

<script>

const fps = 29;
const interval = 1000/fps;
let then;

let c = document.querySelector("#c");
let ctx = c.getContext("2d");
c.height = window.innerHeight;
c.width = window.innerWidth;


let znak = "/\\ANLO甶 男甸甹町!$%$#SWZ\\//";
znak = znak.split("");

const font_size = 8;
let columns = c.width/font_size;

let drops = [];
for(let x = 0; x < columns; x++)
    drops[x] = 1; 
  
function draw(timestamp) {
     
    requestAnimationFrame(draw);
     
    if(then === undefined){
        then = timestamp;
    }

    const delta = timestamp - then
     
    if (delta > interval) {       
        then = timestamp - (delta % interval);
         
        ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);
        
        ctx.fillStyle = "#0F0";
        ctx.font = font_size + "px arial";
        for(let i = 0; i < drops.length; i++){
            let text = znak[Math.floor(Math.random()*znak.length)];
            ctx.fillText(text, i*font_size, drops[i]*font_size);
            if(drops[i]*font_size > c.height && Math.random() > 0.975)
                drops[i] = 0;
    
            drops[i]++;
        }
        }
}
 
draw();

</script>

Dotarłem tutaj na razie, czy to o to chodziło o czym piszecie?

Ale mam pierwszą linijkę Matrix'a :D jest dobrze, dalej się nie renderuje

Dzięki za podpowiedzi

Jak próbuję dodać gdziekolwiek requestAnimationFrame(); to mi wyskakuje

---

Jeśli wyskakują Ci te błędy przy requestAnimationFrame to dlatego że requestAnimationFrame przekazuje Ci parametr do funkcji :) Spróbuj dodać wraper w postaci funkcji bez parametrów 

requestAnimationFrame(() => draw(context))

Zeby całość działała to musisz wywoływać requestAnimationFrame w pętli więc proponuje takie rozwiązanie w useEffect 
 

useEffect(() => {
   const context = ....
   const callback = () => {
      draw(context);
      requestAnimationFrame(callback)
   }
   callback();
}, [])

Warto pamiętać że możesz mieć potrzebe dodawania i usuwania komponentów więc warto w useEffect zwrócić funkcje która Ci zatrzyma pętle. 

 

useEffect(() => {
   let run = true;
   const context = ....
   const callback = () => {
      draw(context);
      if (run) {
         requestAnimationFrame(callback)
      }
   }
   ​​​​​​​callback();
   return () => {
      run = false;
   }
}, [])

skoro już masz taki komponent możesz się teraz pobawić w dodawanie kilku canvas na raz :D W tym jest potęga Reacta że jeśli zrobisz komponent dobrze to możesz go sobie wywoływać pare razy. Gdybyś używał ID nie był byś w stanie zrobić dwóch ;)