Getting Started with React TypeScript and Parcel

July 17, 2019

4 minute read

This will be a tutorial on getting a project up and running using React, TypeScript and Parcel.

What is Parcel?

Quoted from their website: “Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.”

Getting Started

1. Initialize your project.

Create a new project, installing React and it’s Types as dependencies.

yarn add react react-dom @types/react @types/react-dom --dev

2. Add Parcel

How you install Parcel is up to you.

Globally on your machine:

yarn global add parcel-bundler

Or by installing it as a project dependency.

yarn add parcel-bundler --dev

3. Add TypeScript

Again, how you install TypeScript is up to you.

Globally on your machine:

yarn global add typescript

Or by installing it as a project dependency.

yarn add typescript --dev

4. Configure TypeScript

Create a tsconfig.json file in the root of your project. (You can do this by running tsc --init or manually creating the file)

We need “jsx” specified as “react”, and “include” for telling TypeScript where to look for our source files. I also had to specify “moduleResolution” as node to get it to play nice with Parcel.

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "jsx": "react",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es5",
            "es6"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

5. Creating a basic app

Create a src folder and inside an index.html file. Note we will be directly referencing the App.ts file in our src folder as our main App entry.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TypeScript, React, Parcel Starter!</title>
</head>

<body>
    <div id="app"></div>
    <script src="App.ts" type="text/javascript"></script>
</body>

</html>

Inside the src folder, create an App.ts file. This will initialize React in our DOM.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Main } from "./Main";

export class App
{
    private _appName: string = "Awesome TypeScript, React, Parcel App!";

    constructor()
    {
        this.render();
    }

    private render(): void
    {
        ReactDOM.render(React.createElement(Main, { app: this }), document.getElementById("app"));
    }

    public get appName(): string { return this._appName; }
}

new App();

Create a file called src/Main.tsx. This is our main React UI class.

import * as React from "react";
import { App } from "./App";
import { Hello } from "./components/Hello";

export interface IMainProps
{
    app: App;
}

export class Main extends React.Component<IMainProps, {}>
{
    constructor(props: IMainProps)
    {
        super(props);
    }

    public render(): JSX.Element
    {
        return (
            <>
                <Hello name={this.props.app.appName} />
            </>
        );
    }
}

Create a file called Hello.tsx in a new folder src/components. Inside add the following:

import * as React from "react";

export interface IHelloProps
{
    name: string;
}

export class Hello extends React.Component<IHelloProps, {}>
{
    public render(): JSX.Element
    {
        return (
            <>
                <h3>Oh hey - {this.props.name}</h3>
            </>
        );
    }
}

6. Running the app

Everything is in place to get Parcel compiling our app.

Add two scripts to package.json:

  "scripts": {
    "dev": "parcel src/index.html --out-dir build/debug",
    "build": "parcel build src/index.html --out-dir build/release --public-url ./"
  }

Now we can run two commands. One for developing locally and the other for production.

  • Running yarn dev will compile our app to the build/debug folder. This will also serve up the project on a local web-server. The link to which will be outputted in the terminal.
  • Running yarn build will compile our app ready for production. (Minified js etc).

Notes

  • Parcel performs no type checking (yet). “You can use tsc --noEmit to have typescript check your files”. From reading the issue this is apparently coming to Parcel v2 (which as it stands is currently in Alpha).
  • yarn build will ensure paths are relative. Without specifying --public-url ./ paths are absolute by default.
  • For both yarn build and yarn dev, I have specified a build/release and build/debug folder to keep things tidy. Without specifying --out-dir, both tasks would have compiled un-minified and minified code into a folder called dist.

Full source to tutorial

Can be found on my GitHub. Feel free to give it a star if it’s helped you out.


Grant Bartlett

Front end JavaScript lover, more specifically TypeScript and React. Give us a follow - @grant_bartlett