Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/index.html

Created April 18, 2020 23:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JoelCodes/ddbd15a46744027e3abf92f0e86da04e to your computer and use it in GitHub Desktop.
Save JoelCodes/ddbd15a46744027e3abf92f0e86da04e 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>
</>
}
render(<Demo name="YouTube friends!"/>, document.getElementById('root'));
Raw
package.json
{
"name": "parcel-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel index.html"
},
"keywords": [],
"author": "Joel Shinness <me@joelshinness.com> (http://joelshinness.com)",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"parcel": "^1.12.4",
"sass": "^1.26.3",
"typescript": "^3.8.3"
}
}
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