React Typescript Starter

Overview

This repo provides an opinionated template for getting up and running with React and Typescript quickly.

What You Get

• React
• Typescript
• Jest (with coverage and junit reports for your CI)
• Linting against Airbnb's famous standard
• A logger capable of being extended to multiple transports

Getting Started

Serve

$ npm install
...
$ npm start

Build

$ npm run build

Test

To run the tests:

$ npm test

To run the tests with coverage (this is what you should run on your CI):

$ npm run test:coverage

To run the tests with a watch:

$ npm run test:watch

Note, by default Jest will only run tests which have changed or may be impacted by a change since the last commit when using a watch.

Lint

$npm run lint

Doing Stuff

Adding Tests

To add tests you have a couple of options:

• Place your test files in a __test__ folder
• Create a file ending in .test.ts| .test.tsx | .test.js (.spec.<ext> also works)

Of the two options creating a .test.<ext> right next to the file being tested is recommended as it gives clear transparency on what is tested and what isn't - and it also stops you hunting around.

Opinions

Platform Agnostic

This starter is intended to run on any OS capable of running node.

BYOIDE

It should be possible to execute all key functionality from the command line, and commonly used standards and tools are employed to provide as consistent a development experience across IDE's as possible.

Webstorm Support

Webstorm is a fantastic IDE once learned which includes killer features such as simplified and safe reactors as well as in IDE coverage and test runners.

When using Webstorm you will find that you have common tasks available to you in the top right and will not need to use the CLI.

You'll also find that there is a handy 'Debug' task to attach the debugger.

VS Code Support (help needed)

VS Code is also awesome, and a pull request to add some solid VS Code defaults would be very welcome.

Own Your Test Setup

The project is not ejected from react-scripts-ts, however your test configuration will always be somewhat unique to you - so it has been extracted already for you into jest.config.js to be found in the root.

Airbnb Code Style

Widely regarded as the best available ruleset for JS and JSX, we use the TS variant of these.

npm and not yarn

Why?

• The two have become very close in terms of functionality
• There is no known benefit at this point not to use the standard node pacakge manager

Notes

Create React App

This project was originally generated by create-react-app and makes use of react-scripts-ts.

The original README.md has been preserved.