Skip to content

Instantly share code, notes, and snippets.

@croaky croaky/App.tsx
Last active Jan 3, 2019

Embed
What would you like to do?
Parcel + TypeScript + React

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 resultion 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.

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/**/*"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.