Two Easy Ways to Get Started With TypeScript and React
Setting up a build process for a modern web application can be a tedious process. Knowing your tools is important when you're going to maintain the software. When you want to learn a programming language or experiment with an idea, you want to get started fast without learning all the nitty-gritty details of each step in the build process. In this blog post, I'll show two easy ways to bootstrap a TypeScript project with React installed.
Create-React-App-TypeScript
Create-React-App from Facebook is a way to get started with React without any configuration. CRA is a perfect starting point for JavaScript-based React development as it gives tested build configuration, development server, environment-specific settings, etc.
Unfortunately, TypeScript users lose one of the main advantages, the zero-configuration, as to support TypeScript the black box needs to be opened and configuration changes have to be made.
Will Monk and contributors have tackled this issue by forking the underlying create-react-app build scripts. The forked scripts are called create-react-app-typescript.
When you're creating an application using Create-React-App, you need to give the TypeScript configuration files to it.
create-react-app my-app --scripts-version=react-scripts-ts
The Microsoft GitHub organization has a repository with an extensive React + TypeScript guide. I highly recommend to read it if you choose to go Create-React-App-TypeScript route.
FuseBox
The FuseBox is a bundler/module loader that supports TypeScript out of the box. FuseBox contains a lot of useful features regardless if you're using TypeScript or not, so it is something to check out.
The FuseBox is configured using code. In its simplest form working TypeScript build configuration would look something like this:
const { FuseBox } = require("fuse-box");
const fuse = FuseBox.init({
homeDir: "src/",
output: "dist/$name",
});
fuse.bundle("app").instructions(">index.ts");
fuse.run()
After requiring the fuse-box package, the initialization takes source code folder (homeDir) and output file. Note the $name which is a variable that refers to the bundle name. The $name allows generating multiple output files to the same output folder.
The next step is to describe the bundle. By giving TypeScript entry file, the FuseBox determines the dependency graph. For example, TypeScript files could require/import SCSS stylesheet files, and those would be bundled also. Requiring something else than TypeScript files will require adding a plugin, but most of the plugins require zero configuration.
Finally, by executing run, the bundle will be created.
Other alternatives
TypeScript's home page has an article called Integrating with Build Tools which covers all the popular build tools. The article only describes the TypeScript part of the build process and doesn't cover React (files with .tsx filename extension).
Webpack is currently a popular choice for module bundling. It can be a bit overwhelming with all its plugins and configurations, but TypeScript team has written an article that covers TypeScript and React which should get you to productive phase quite quickly.
If you have found a tool that makes TypeScript and React set-up breeze, let me know!