admin管理员组文章数量:1025465
I'm trying to make a website with React without any back-end, I would only like to use the ponents 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 mand 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>
)
}
I'm trying to make a website with React without any back-end, I would only like to use the ponents 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 mand 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>
)
}
- 2 Yes, both Angular and React apps can be (and usually are) "built" to static HTML, CSS and JS. The default setups for both (using Angular CLI or Create React App) include a mand to do just that. – jonrsharpe Commented Mar 24, 2021 at 10:54
1 Answer
Reset to default 1It sounds like you're referring to static rendering, which is a feature of React. This is how server side rendering (SSR) is acplished. 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
I'm trying to make a website with React without any back-end, I would only like to use the ponents 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 mand 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>
)
}
I'm trying to make a website with React without any back-end, I would only like to use the ponents 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 mand 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>
)
}
- 2 Yes, both Angular and React apps can be (and usually are) "built" to static HTML, CSS and JS. The default setups for both (using Angular CLI or Create React App) include a mand to do just that. – jonrsharpe Commented Mar 24, 2021 at 10:54
1 Answer
Reset to default 1It sounds like you're referring to static rendering, which is a feature of React. This is how server side rendering (SSR) is acplished. 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
本文标签： Is it possible to convert React code to HTMLcssJavaScriptStack Overflow
版权声明：本文标题：Is it possible to convert React code to HTML, CSS, JavaScript? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1744914697a2123828.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论