data.json

{
  "name": "Yes, That Joel Shinness"
}

index.tsx

import { render } from "react-dom";
import React from "react";
import BillMurray from './BillMurray.jpg';

type DemoProps = { name:string };

function Demo({ name }:DemoProps){
  return <>
    <h1>Hi, { name }!</h1>
    <img src={BillMurray}/>
  </>
}

render(<Demo name="YouTube friends!"/>, document.getElementById('root'));

package.json

{
  "name": "parcel-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "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"
  }
}

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;
}

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true
  }
}