Previamente incrusté este código JS dentro de una página HTML con esto:
<SCRIPT LANGUAGE="JAVASCRIPT"> var r_text = new Array (); r_text[0] = "\"This is a test\""; r_text[1] = "\"This is another\""; r_text[2] = "\"This is a test\""; r_text[3] = "\"This is another\""; var i = Math.floor(r_text.length * Math.random()); document.write("<center>" + r_text[i] + "</center>"); </SCRIPT>Me permite definir un montón de oraciones y mostrar una al azar cada vez que se carga la página.
Ahora estoy rehaciendo mi sitio como una aplicación React (y usando TailwindCSS FWIW).
Intenté soltarlo directamente como a continuación:
import logo from './logo.svg'; import './App.css'; function App() { return ( <div class="container mx-auto"> <div class="max-w-md mx-auto bg-white text-center text-6xl m-10 overflow-hidden md:max-w-2xl"> site title </div> var r_text = new Array (); r_text[0] = "\"This is a test\""; r_text[1] = "\"This is another\""; r_text[2] = "\"This is a test\""; r_text[3] = "\"This is another\""; var i = Math.floor(r_text.length * Math.random()); document.write("<center>" + r_text[i] + "</center>");Esto no funciona, pero no estoy seguro de cómo compilarlo.
En ReactJS, es recomendable realizar todos los cálculos antes de renderizar el contenido. Te aconsejo que leas la documentación de React
import { useState, useEffect } from "react"; function App() { const [text, setText] = useState(""); useEffect(() => { let r_text = new Array(); r_text[0] = '"This is a test"'; r_text[1] = '"This is another"'; r_text[2] = '"This is a test"'; r_text[3] = '"This is another"'; var i = Math.floor(r_text.length * Math.random()); setText(r_text[i]) },[]) return ( <div class="container mx-auto"> <div class="max-w-md mx-auto bg-white text-center text-6xl m-10 overflow-hidden md:max-w-2xl"> site title </div> <p>{text}</p> </div> ); } export default App;