Skip to content

Opinionated toolbox boilerplate to create Typescript React components ๐Ÿ› :package:

License

Notifications You must be signed in to change notification settings

zzarcon/ts-react-toolbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

ts-react-toolbox

Opinionated toolbox boilerplate to create Typescript React components

Install

pnpm add ts-react-toolbox -D

Setup

After you have installed it, run this from the root of your package:

$ node_modules/.bin/ts-react-toolbox init

That will add all the boilerplate and scripts to your project

Contains

  • Typescript โœ…
  • React + ReactDom โœ…
  • Webpack + WebpackDevServer โœ…
  • Jest โœ…
  • Examples โœ…
  • StyledComponents boilerplate โœ…
  • Travis config โœ…
  • Static site generation with github pages โœ…
  • Prettier โœ…
  • ES5 support โœ…
  • ES2015 support โœ…
  • Git hooks โŒ
  • Bundle size analyzer โŒ

Folder structure

  • __tests__
  • custom-typings
  • example
  • src

Commands

  • init: Initializes project
  • dev: webpack-dev-server
  • test: jest + watch mode
  • build: Typescript build
  • release: build + run tests + version bump + publish to registry
  • static: deploys example to github pages
  • lint: TODO
  • format: prettier
  • analyze: webpack-bundle-analyzer

Entry points

  • package.json
"main": "dist/es5/index.js",
"jsnext:main": "dist/es2015/index.js",
"module": "dist/es2015/index.js",
"types": "dist/es5/index.d.ts"

Inspired by

Dan Abramov - The Melting Pot of JavaScript : https://www.youtube.com/watch?v=G39lKaONAlA

Changeset

1.0.0

All the dependencies are bumped to the latest major version.

TODO

  • migrate to ESLint / Prettier
  • replace Enzyme for RTL