是否可以將 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 的文檔