React Bootstrapping — Quick Start with Typescript, Linting, Redux & Router

Kick-off

create-react-app yourProjectName --template typescript

Check the controls

npm i -S eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier
"lint": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx ./ || true",
"fix": "tsc --noEmit && eslint --fix --ext .js,.jsx,.ts,.tsx ./ || true",

Keep track of your state

npm i -S react-redux @reduxjs/toolkit react-router react-router-dom connected-react-router @types/react-redux @types/react-router @types/react-router-dom history@4.10.1
  • components/demo/Counter.tsx
  • routes/index.tsx

Conclusion

Some words about me:

--

--

--

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Everything to React at a glance for Beginners

Design Patterns: Strategy Pattern in JavaScript

Koa vs Express

[TypeScript] What is TypeScript?

Day 2 of my re-introduction to programming

How to Build Mobile and Web Apps with a Common Code Base

Integrating DropzoneJS with a JavaScript Image Cropper to Optimise Image Uploads

Patterns for Deriving State in Your App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Konrad Abe

Konrad Abe

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

More from Medium

How to use React Router Dom v6

SPA? SSG? SSR?

React Custom Hook : useFetch()

React Router