I found myself copy pasting the same configuration over and over every time I start new “create-react-app” project, so here is how I always start.

I’m using create-react-app v3.1.1 as of writing this document (September 18th, 2019)

I will show here how to setup a project in a certain configuration:

create-react-app with TypeScript

VSCode as code editor

eslint with prettier (style on save)

set up root alias for local imports (“components/Button.tsx” instead of “../../../../components/Button.tsx”)

Bootstrap a new typescript project:

npx create-react-app create-react-app-boilerplate --typescript && cd create-react-app-boilerplate

Install all dev dependencies (eslint + prettier):

Add ./.eslintrc.js file

Add ./.eslintignore file

Add ./.prettierrc.js file (it’s up to you what settings you like here, don’t judge me for “semi: true”)

Add ./.vscode/settings.json file

Edit ./package.json file and update “scripts” section so that you will actually run eslint on npm run test along with unit tests. Also it’s sometimes useful to run eslint with --fix flag (just change “scripts” section, don’t change other settings):

Add “baseUrl” option equal to“src” within “compilerOptions” section in ./tsconfig.json file (just add this option, don’t change other settings):

You should also install these extensions in your VSCode:

ESLint (dbaeumer.vscode-eslint)

Prettier — Code formatter (esbenp.prettier-vscode)

Testing

Another thing worth mentioning is that it is nowadays a popular solution to use react-testing-library by Kent C. Dods. Here’s how you can add it to your project:

Install these deps:

Add src/setupTests.ts file with this import:

import '@testing-library/jest-dom/extend-expect';

And finally update default test src/App.test.tsx

import React from 'react';

import { render } from '@testing-library/react'; import App from './App'; it('renders without crashing', () => {

const { getByText } = render(<App />);

expect(getByText('Learn React')).toBeInTheDocument();

});

Repo

You can check this diff with all the configuration I showed you here:

https://github.com/michal-wrzosek/create-react-app-boilerplate/compare/c329d3dc3892bc3e19c78d06a840edb8975078c3...master