是否可以将 React 代码转换为 HTML、CSS、JavaScript？

Question

我正在尝试使用 React 制作一个没有任何后端的网站，我只想使用组件和类似的东西。我还想将它转换为 HTML、CSS 和 JavaScript 文件，因为这样发布它对我来说更容易。我听说 Angular 有这样的功能，但我不确定 React 是否有。

如果没有办法做到这一点，有人可以回答说不可能吗？另外，如果它实际上在 Angular 中是可能的，那么该怎么做呢？我可能会为此学习 Angular。

我知道将它作为 React 应用程序上传更容易，但我不能这样做，所以我需要一个 HTML、CSS 和 JavaScript 文件。我也是初学者，所以我不明白他们的意思是我应该在我的代码中做什么。我跑了

npm run build

但是，当我尝试将其放入我的域时，它不起作用，this is what i see

还有this is the structure I have on CPanel. 不知何故我没有得到任何结果，在 npm run build 命令之前这是代码（有效）：

我的 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;

我的 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>
    )
}

还有我的 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

听起来你指的是静态渲染，这是 React 的一个特性。这就是服务器端渲染 (SSR) 的完成方式。 React 应用程序在服务器上呈现，使用 ReactDOM.renderToString() 转换为 HTML，然后发送到客户端。

通常情况下，客户端上会有一个“补水”，然后应用程序会使用 javascript 重新渲染，但这不是必需的。您可以静态提供 HTML，并且永远不要在客户端上“水合”应用程序。

事实上，这是我在我的应用程序中用于某些不需要动态的路由的方法。我“静态渲染”该路由并将输出保存到一个 .html 文件，然后当请求该路由时，我的服务器将其发送给客户端，就好像它只是一个静态创建的 .html 文件一样。

See React's documentation on this here