Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/index.html

Created April 18, 2020 16:51
Show Gist options
  • Save JoelCodes/bff67102bfe75bb004263895e8118862 to your computer and use it in GitHub Desktop.
Save JoelCodes/bff67102bfe75bb004263895e8118862 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.scss">
</head>
<body>
<div id="root"></div>
<script src="./index.tsx"></script>
</body>
</html>
Raw
index.tsx
import { render } from "react-dom";
import React from "react";
type DemoProps = { name:string };
function Demo({ name }:DemoProps){
return <>
<h1>Hi, { name }!</h1>
<img src='/BillMurray.jpg'/>
</>
}
render(<Demo name="YouTube friends & frenemies!!!"/>, document.getElementById('root'));
Raw
package.json
{
"name": "parcel-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "parcel index.html"
},
"dependencies": {
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"parcel": "^1.12.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.8.3"
},
"devDependencies": {
"parcel-plugin-static-files-copy": "^2.3.1"
}
}
Raw
styles.scss
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
$roboto: 'Roboto', sans-serif;
html {
background: #333;
color: white;
font-family: $roboto;
}
Raw
tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"esModuleInterop": true
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment