lks/frontends
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize files

Browse Source
This commit is contained in:
Lucas Schumacher 2024-06-18 14:36:46 -04:00
parent a98d4bada5
commit 78ed72234a
3 changed files with 45 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -1,40 +1,9 @@
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
const blurb_data = {
title: "Fart Man Comes To Town!",
blurb: "Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town believe the imminent winds of change will revitalize the towns central business district."
};
function Blurb({ title, blurb }) {
return (<div>
<h1>{ title }</h1>
<p>{ blurb }</p>
<a href="#">Read more...</a>
</div>);
}
function HomePage() {
const [blurbs, setBlurbs] = React.useState([ blurb_data ])
function addBlurb() {
setBlurbs(blurbs.concat([blurb_data]));
}
return (<>
{blurbs.map((blurb, i) => (
<Blurb key={i} {...blurb} />
))}
<br />
<button onClick={addBlurb}>Load More</button>
</>);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);
</script>
<h1>Frontends</h1>
<ul>
<li><a href="react/index.html">React</a></li>
<li><a href="vanillaJS/index.html">vanillaJS</a></li>
</ul>
</body>
</html>

40
react/index.html Normal file
View File

@ -0,0 +1,40 @@
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
const blurb_data = {
title: "Fart Man Comes To Town!",
blurb: "Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town believe the imminent winds of change will revitalize the towns central business district."
};
function Blurb({ title, blurb }) {
return (<div>
<h1>{ title }</h1>
<p>{ blurb }</p>
<a href="#">Read more...</a>
</div>);
}
function HomePage() {
const [blurbs, setBlurbs] = React.useState([ blurb_data ])
function addBlurb() {
setBlurbs(blurbs.concat([blurb_data]));
}
return (<>
{blurbs.map((blurb, i) => (
<Blurb key={i} {...blurb} />
))}
<br />
<button onClick={addBlurb}>Load More</button>
</>);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);
</script>
</body>
</html>

0
vanillaJS.html → vanillaJS/index.html
View File