croaky/App.tsx

## README.md

      
    Raw
  

              README.md
            
          
    Directory tree:
.
├── package.json
├── src
│   ├── entrypoint.tsx
│   ├── index.html
│   └── ui
│       ├── App.tsx
│       └── shared
│           └── Reset.ts
├── start.sh
└── tsconfig.json

TypeScript's tsconfig.json sets paths to
Parcel's ~ module resolution convention
and baseUrl to src directory.
Parcel is given src/index.html as its input,
which references src/entrypoint.tsx.
All TypeScript files in src
may use the ~ non-relative import paths.

  
## App.tsx
import * as React from 'react'
// routing, etc.

import { Reset } from '~/ui/shared/Reset'

export class App extends React.Component {
  public render() {
    return (
      <div>
        <title>Dashboard</title>
        <Reset />
      </div>
    )
  }
}

## entrypoint.tsx
import * as React from 'react'
import { render } from 'react-dom'
// App wrapped with redux Provider, store, etc.

import { App } from '~/ui/App'

render(
  <App />,
  document.getElementById('root')
)

## index.html
<!doctype html>
<html>
  <body>
    <div id='root'></div>
    <script src='./entrypoint.tsx'></script>
  </body>
</html>

## package.json
{
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.4.2",
  },
  "devDependencies": {
    "@types/node": "^10.7.0",
    "@types/react": "^16.7.17",
    "@types/react-dom": "^16.0.7",
    "parcel-bundler": "1.10.0",
    "typescript": "^3.0.1"
  },
  "scripts": {
    "build": "$(npm bin)/parcel build ./src/index.html",
    "start": "./start.sh"
  }
}

## start.sh
#!/bin/bash

set -e

"$(npm bin)/tsc" --noEmit --watch &
"$(npm bin)/parcel" ./src/index.html

## tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./*"]
    },
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["src/**/*"]
}
	import * as React from 'react'
	// routing, etc.

	import { Reset } from '~/ui/shared/Reset'

	export class App extends React.Component {
	public render() {
	return (
	<div>
	<title>Dashboard</title>
	<Reset />
	</div>
	)
	}
	}
	import * as React from 'react'
	import { render } from 'react-dom'
	// App wrapped with redux Provider, store, etc.

	import { App } from '~/ui/App'

	render(
	<App />,
	document.getElementById('root')
	)
	<!doctype html>
	<html>
	<body>
	<div id='root'></div>
	<script src='./entrypoint.tsx'></script>
	</body>
	</html>
	{
	"dependencies": {
	"react": "^16.6.3",
	"react-dom": "^16.4.2",
	},
	"devDependencies": {
	"@types/node": "^10.7.0",
	"@types/react": "^16.7.17",
	"@types/react-dom": "^16.0.7",
	"parcel-bundler": "1.10.0",
	"typescript": "^3.0.1"
	},
	"scripts": {
	"build": "$(npm bin)/parcel build ./src/index.html",
	"start": "./start.sh"
	}
	}
	#!/bin/bash

	set -e

	"$(npm bin)/tsc" --noEmit --watch &
	"$(npm bin)/parcel" ./src/index.html
	{
	"compilerOptions": {
	"baseUrl": "./src",
	"paths": {
	"~/": ["./"]
	},
	"typeRoots": ["node_modules/@types"]
	},
	"include": ["src/*/"]
	}