frankievalentine · October 9, 2020 16:33
diff --git a/README.md b/README.md
diff --git a/App.tsx b/App.tsx
 import * as React from "react";
 import { render } from "react-dom";
 import { Hello } from "./Hello";
 // import './styles/index.css'
 
 const App = () => {
  return (
    <div>
      {/* make sure Typescript is working by using number type */}
      <Hello compiler="Parcel" framework={123} />
    </div>
  );
 };
 
 render(<App />, document.getElementById("app"));
diff --git a/create.sh b/create.sh
 mkdir [dirname]
 cd [dirname]
 yarn init
 git init
 touch index.html .gitignore tsconfig.json .README
 echo -e "node_modules\nyarn.lock" >> .gitignore
 mkdir src && cd src && touch App.tsx && mkdir Components && cd Components && touch Hello.tsx
 code .
 # add code to files from gist
 cd ../..
 yarn add react react-dom  --save
 yarn add parcel-bundler typescript @types/react @types/react-dom --save-dev
 tsc --init
 # add to tsconfig.json from template in gist
diff --git a/Hello.tsx b/Hello.tsx
 import * as React from "react";
 
 export interface HelloProps {
  compiler: string;
  framework: string;
 }
 
 export class Hello extends React.Component<HelloProps, {}> {
  render() {
    return (
      <h1>
        Hello from {this.props.compiler} and {this.props.framework}!
      </h1>
    );
  }
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-typescript-parcel</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.tsx"></script>
  </body>
 </html>
diff --git a/package.json b/package.json
 "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
diff --git a/tsconfig.json b/tsconfig.json
 // assuming your ts sources are in ./src/
 {
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      "~*": ["./*"]
    },
  },
  "include": ["src/**/*"]
 }
	import * as React from "react";
	import { render } from "react-dom";
	import { Hello } from "./Hello";
	// import './styles/index.css'

	const App = () => {
	return (
	<div>
	{/* make sure Typescript is working by using number type */}
	<Hello compiler="Parcel" framework={123} />
	</div>
	);
	};

	render(<App />, document.getElementById("app"));
	mkdir [dirname]
	cd [dirname]
	yarn init
	git init
	touch index.html .gitignore tsconfig.json .README
	echo -e "node_modules\nyarn.lock" >> .gitignore
	mkdir src && cd src && touch App.tsx && mkdir Components && cd Components && touch Hello.tsx
	code .
	# add code to files from gist
	cd ../..
	yarn add react react-dom --save
	yarn add parcel-bundler typescript @types/react @types/react-dom --save-dev
	tsc --init
	# add to tsconfig.json from template in gist
	import * as React from "react";

	export interface HelloProps {
	compiler: string;
	framework: string;
	}

	export class Hello extends React.Component<HelloProps, {}> {
	render() {
	return (
	<h1>
	Hello from {this.props.compiler} and {this.props.framework}!
	</h1>
	);
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>react-typescript-parcel</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="./index.tsx"></script>
	</body>
	</html>
	"scripts": {
	"start": "parcel src/index.html",
	"build": "parcel build src/index.html"
	},
	// assuming your ts sources are in ./src/
	{
	"compilerOptions": {
	"jsx": "react",
	"target": "es6",
	"module": "commonjs",
	"strict": true,
	"baseUrl": "./src",
	"paths": {
	"~": ["./"]
	},
	},
	"include": ["src/*/"]
	}