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

Question

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

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

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

npm run build

但是，当我尝试将其放在我的域中时，它不起作用，这就是我所看到的

这就是我在 CPanel 上的结构。 不知何故，在 npm 运行构建命令之前，我没有得到任何结果，这是代码（有效）：

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

我的抽认卡列表.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>
    )
}

和我的抽认卡.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

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

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

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

在此处查看 React 的文档