title: Is it possible to convert React code to HTML, CSS, JavaScript?
body: <p>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.</p>
  <p>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.</p>
  <p>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</p>
  <pre class="lang-none prettyprint-override"><code>npm run build
  </code></pre>
  <p>However, when I tried to put it on my domain, it didn't work, <a href="https://i.stack.imgur.com/DsDwQ.png" rel="nofollow noreferrer">this is what i see</a></p>
  <p>And <a href="https://i.stack.imgur.com/OxQql.png" rel="nofollow noreferrer">this is the structure I have on CPanel.</a>
  Somehow I get no result, before the npm run build command this was code (which worked):</p>
  <p>my app.js:</p>
  <pre><code>import React, { useState } from 'react';
  import FlashcardList from './FlashcardList'
  function App() {
    const [Flashcards, setFlashcards] = useState(HIRAGANA_FLASHCARDS)
    return (
      &lt;FlashcardList flashcards={Flashcards} /&gt;
      );
  }
  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;
  </code></pre>
  <p>my flashcardlist.js:</p>
  <pre><code>import React from 'react'
  import Flashcard from './Flashcard'
  
  export default function FlashcardList({flashcards}) {
      return (
          &lt;div className=&quot;card-grid&quot;&gt;
              {flashcards.map(flashcard =&gt; {
                  return &lt;Flashcard flashcard={flashcard} key={flashcard.id}/&gt;
              })}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>and my flashcard.js:</p>
  <pre><code>import React, {useState} from 'react'
  import './main.css'
  export default function Flashcard({flashcard}) {
      const [Flip, setFlip] = useState(false)
      return (
          &lt;div className=&quot;text&quot; onClick={() =&gt; {
              setFlip(!Flip)
          }}&gt;
              {Flip ? flashcard.answer : flashcard.question}
          &lt;/div&gt;
      )
  }
  </code></pre>