React Bootstrapping - Quick Start with Typescript, Linting, Redux & Router
Setting up a new project can be a daunting task. So many packets that need to work in concert and so many things to keep track of, that could go wrong or be incompatible in certain versions. Add typescript to the mix and you are in for a fun journey with untyped packages, missing return types and complex interfaces.
I've recently set up a new project base for one of our customers with a well planned and fully functional stack and I'm about to offer the finished project (minus some customer-specific features) as a starter template for you to save some time. Or maybe you have your own project running but want to see how to set up some packages in combination? Just lean back and enjoy the show.
All code is online on GitHub including separate commits per feature so either code along or copy what you need. This is a two-sessions tutorial, this week we will take care of the business logic and next week we will add styled-components, storybook and testing.
To start, we will use create-React-app to start with a fresh typescript template using the
This gives us a preconfigured react app using typescript with all of the configs taken care of and webpack fully set up, loaders and all.
GitHub Commit (not worth looking as it's just the boilerplate from create-react-app)
Check the controls
The next step in every project I work on is setting up eslint, prettier and the .editorcofig file.
If you run this command in your terminal, it will install all dependencies, plugins and presets needed for this setup.
In this guide, I'll keep it short and point you to my files, but I've recently written a longer article about linting in typescript projects so if you would like more information on this topic, head over to my other article about linting in react native projects. Even though this article is for React Native / Expo, the linting is basically the same so I recommend to take a look at it if you want to know more.
To continue with our current step, go to this repository and copy the following files and put them into your project's root:
Then head over to your package.json and add the following 2 lines in your scripts object.
If you run
npm run lint in your terminal, you will get the linting output and running
npm run fix will try to fix and prettify all your files according to your linting rules.
GitHub Commit A Changes
GitHub Commit B Applied Linting
Keep track of your state
Next step on our fast-paced journey is adding redux, using the redux toolkit (rtk).
Again, grab the necessary packages from npm and we can continue.
Mind the version number. At the time of writing (01/02/2021), using a v5 of history will break stuff because of incompatibilities. If you run into other issues, feel free to copy my package-lock.json to get the exact working setup I'm using.
With this in place, we need a file to export our store and another for our rootReducer where we register all the reducers we are going to write. We will add them under src/redux/.
Again, you can grab them including a demo file using the created react hooks from my repo.
What's special about this? We are using the default react hooks for useSelector and useDispatch but we wrap them in our own variations including all the typing needed to satisfy typescript and export them again as
We don't have middleware yet so this line is commented out but I've left it there for when I write my middleware in the future.
If you look at the rootReducer, you can see how we hooked up the demo counter reducer and our route reducer. I've added a TODO marker to keep track of the fixed history package version here as a reminder to check for updates when going through my TODOs.
Last but not least, this is the counterReducer, small and readable thanks to Redux Toolkit.
Next stop is our router. In the past, it was seen as an anti-pattern to pair routing and state/redux but over the last few years, this has become a proven setup that allows us to control user navigations and state in a more fine-grained and state-checked manner. To make this work, we will ad React-router and connected-React-router for easy integration of both.
To check if Redux and Routing work, we will add a demo/counter example and set up some basic routing.
Create or copy the following files from my repostitory:
In the Counter component, you can see the typed redux hooks at work. It's your well known basic counter example, just a bit shorter.
Our demo version of the routes is similarly simple but it should be enough for you to understand the general idea and expand on it. We're creating a reusable NavBar Component here to simulate a real navigation and a couple of stand-in pseudo page components for home, hello and our counter page as well as a generic 404 for broken/unmatched URLs.
By adding the counter.tsx component to the project in one of the routes, we can see that routing and redux work. If you run
npm run lint again, the linter and ts compiler won't flag any typescript issues either. Another hurdle taken.
If you check the redux tools in your browser, you can see that every navigation action triggers an action on our store and that our counter actions are clearly discernable by their
We've covered a lot of ground today, skipping some of the finer details. As mentioned before, the idea is to allow for a quick setup. I will add more articles in the future, looking in-depth into some of those topics I have not covered yet in other articles.
Next week we will add Storybook and styled-components. Having a dynamic and interactive UI library as part of a project can be a real asset. Storybook has proven it's worth for us many times over, allowing us to show UI elements on their own with adjustable attributes and toggles in an intuitive web UI. Your QA and Design/Concept teams will love it.