Is it possible to convert React code to HTML, CSS, JavaScript?

Question

I'm trying to make a website with React without any back-end, I would only like to use the components and stuff like that. I also want to convert it to a HTML, CSS, and JavaScript files because it is much easier for me to publish it like that. I heard that Angular has a feature like this, but I'm not sure if React has it.

If there is no way to do it, can someone just respond that it is not possible? Also, if it is actually possible in Angular than how to do it? I might learn Angular for it.

I know it's just way easier to upload it as a React app, but I can't do that, so I need a HTML, CSS and JavaScript file for it. I am also a beginner, so I don't understand what they mean I should do in my code. I ran

npm run build

However, when I tried to put it on my domain, it didn't work, this is what i see

And this is the structure I have on CPanel. Somehow I get no result, before the npm run build command this was code (which worked):

my app.js:

import React, { useState } from 'react';
import FlashcardList from './FlashcardList'
function App() {
  const [Flashcards, setFlashcards] = useState(HIRAGANA_FLASHCARDS)
  return (
    <FlashcardList flashcards={Flashcards} />
    );
}
const HIRAGANA_FLASHCARDS = [
  //bunch of data
]
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Used like so
shuffle(HIRAGANA_FLASHCARDS);
export default App;

my flashcardlist.js:

import React from 'react'
import Flashcard from './Flashcard'

export default function FlashcardList({flashcards}) {
    return (
        <div className="card-grid">
            {flashcards.map(flashcard => {
                return <Flashcard flashcard={flashcard} key={flashcard.id}/>
            })}
        </div>
    )
}

and my flashcard.js:

import React, {useState} from 'react'
import './main.css'
export default function Flashcard({flashcard}) {
    const [Flip, setFlip] = useState(false)
    return (
        <div className="text" onClick={() => {
            setFlip(!Flip)
        }}>
            {Flip ? flashcard.answer : flashcard.question}
        </div>
    )
}

Answer 1

It sounds like you're referring to static rendering, which is a feature of React. This is how server side rendering (SSR) is accomplished. The React app is rendered on the server, converted to HTML using ReactDOM.renderToString(), then sent to the client.

Normally there is a "rehydration" on the client where the App then re-renders using javascript, but that is not required. You could serve the HTML statically and never "hydrate" the app on the client.

In fact, this is the approach I'm using for certain routes in my App that do not need to be dynamic. I "statically render" that route and save the output to a.html file, which my server then sends to the client when that route is requested as if it were only ever a statically created.html file.

See React's documentation on this here