DEV Community

loading...
Cover image for Getting Started with React TypeScript and Parcel

Getting Started with React TypeScript and Parcel

grant_bartlett profile image Grant Originally published at grant-bartlett.com ・3 min 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.

Project starter on GitHub

GitHub logo GrantBartlett / react-typescript-parcel-starter

A very simple starter project for using React, TypeScript and Parcel.

React TypeScript Parcel Starter

A very simple starter project for using React, TypeScript and Parcel.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. Alternatively, you can follow the tutorial on Dev.to

Installing

Once you have forked and cloned off the project. Install the project dependencies by running:

yarn install

Development

Serves a webserver provided by Parcel to the build/debug folder.

yarn dev

Production

Compiles a production ready project to the build/release folder.

yarn build

Built With

  • React - JavaScript library for building user interfaces.
  • TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript.
  • Parcel - App bundler for JavaScript.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Feel free to give it a star if it's helped you out.

Webpack tutorial?

Check it out below ;-)

Discussion (0)

pic
Editor guide