The modern way of getting started with React and TypeScript
Bright Inventions Jun 15
But out of this failed attempts the new generation solution was born at Facebook for React.
create-react-app (often shortened to CRA) is an all-in-one integrated development tool, preconfigured with webpack for bundling and packaging, Babel for ES6 support, powerful dev server with all the modern conveniences, a test runner with coverage tool, etc. There is even a Service Worker ready to kickstart your PWA journey.
All is wrapped together in a single updatable NPM dependency. It abstracts away everything but the actual application code from the developers that don't need to dig deeper – no build process is visible, no dev tools configuration is required, no tests wiring is necessary, no boilerplate needs to be generated before we can actually start writing our app code. CRA is THE way for the most small-to-medium React projects to avoid the whole build configuration hassle.
npx create-react-app my-app cd my-app npm start
This is all we need to get started and see the "Hello World" page served from the local development server, auto-refreshing whenever a source code change happens.
Fortunately, I'm not the only one who thinks this way and Open Source does not like void. There is a fork of create-react-app that replaces Babel with TypeScript, surprisingly named
create-react-app-typescript. Let's rewind and start from scratch, with TypeScript this time:
npx create-react-app my-app --scripts-version=react-scripts-ts cd my-app npm start
Note something important – we are not invoking
create-react-app-typescript fork's own binary. CRA is designed in such a way that it is open for customizations without the hassle of being bound to a fork that might stop being maintained. We're actually still using
create-react-app directly, we just replaced the piece of its inner machinery (
react-scripts) with the one that is TypeScript aware (
react-scripts-ts). It means that whenever there's an update available within
create-react-app for our development, bundling or testing environment, we are – as the first class citizens – still able to just
npm update and get all the goodies.
And here is what we get – almost the same thing as before, but with TSX (TypeScript-flavoured JSX) instead!
But what if we outgrow the offerings of
create-react-app and we need to dig down into the webpack bundler or jest test runner's shenanigans? It is possible, but unfortunately, in this case we need to say goodbye to the nice and clean abstraction that shielded us from dealing with ~30 direct dependencies and ~12 configuration files. When we run
npm run eject command, our project gets rewritten to include all of this directly and we can no longer
npm update our development environment as a single dependency. We should definitely know what we are doing before we decide to do so. And in most cases, until we start having non-standard requirements for the build process, we should not need to do it.
In the next post we'll see how we can benefit from having TypeScript support in our React app.
Originally published at brightinventions.pl