stoopkidddd / react-typescript-template

A starter react-typescript template that avoids the extra fluff of CRA. Includes Jest/RTL, ESLint/Prettier support, and react-intl-hooks.

React Typescript template

This is a starter template for a React project with Typescript enabled. This does NOT use create-react-app, but is instead a more barebones template that exposes a basic babel/webpack setup.

The template is already set up to use Jest/RTL for testing and react-intl-hooks for localization.

Theming is purposefully left out for the user to decide (Material UI/Tailwind/Bootstrap/etc).

Documentation references npm, but yarn may be used as well.

• React Typescript template
• Setup
  • Recommended Extensions for VSCode
• Available Scripts
  • npm run dev
  • npm test
  • npm run build
  • npm run start
• Testing
• Documentation and References
  • Typescript
  • Jest
  • React Testing Library
  • React-Intl-Hooks
  • ESLint
  • Webpack
  • Babel

Setup

NPM/Yarn install and go.

Recommended Extensions for VSCode

Some of these extensions will make development easier in VSCode.

• ESLint
• Jest
• Jest Runner
• Prettier

Available Scripts

npm run dev

Runs the app in development mode

npm test

Runs jest runner for react-testing-library unit test suite

npm run build

Creates static HTML/JS in dist folder

npm run start

Servers up the static build files in dist folder

Testing

Take note of src/utils/test-utils.tsx. This file is used to setup unit tests to supply any providers to the unit tests. In this template, only IntlProvider is used, but others can be added as needed. See App.test.tsx or SampleComponent.test.tsx for examples on how it can be used.

Documentation and References

Typescript

Jest

React Testing Library

React-Intl-Hooks

ESLint

The project is using the Airbnb Style Guide with Typescript support

Webpack

Babel