React TypeScript Boilerplate

This boilerplate aims to provide quick bootstrap for new projects in React with TypeScript.

Features:

React framework
TypeScript support
Linting with TSLint and Stylelint
Testing with Jest
Bundled with Webpack

Quickstart

clone this repository
run yarn setup

You're ready to go!

Development

run yarn start
go to http://localhost:3000

Tip: Wonder what's the size of your bundle? Run yarn start:analyze to use webpack-bundle-analyzer tool.

Testing

Single run

run yarn test

Watch mode (re-run tests on file change)

run yarn test:watch

Build

run yarn build

Bundled files are in ./dist directory

Useful commands

yarn lint - lint scripts and styles
yarn start:analyze - starts the app with webpack-bundle-analyzer
yarn generate <name> - generates boilerplate code (available generators: view, component, container)
yarn clean - cleans ./dist directory

Project structure

Base directory of source code is ./src folder. Only this path is processed by Webpack.

├── containers // connected components
├── components // dumb components
├── fonts // local fonts
├── images // images processed by Webpack
├── typings // custom typings you use in your projects
├── public // files here are not processed
├── styles // base styles
├── utils // directory for helpers and utils
├── views // views in application
├── constants.ts // file for configuration constants
├── index.hbs // html template
├── index.tsx // root file
└── routes.ts // file with routes configuration

Bonus

If you want to import .svg images you have two options:

import ImageUrl from './image.svg - common way, will return an url

import ImageComponent from './image.svg?inline - JSX way. ?inline will return React StatelessComponent, so that you can use it like <ImageComponent /> in your code.

SwingDev/react-ts-boilerplate