TABLE OF CONTENTS

Building App With React, TypeScript, and Parcel

Why using Parcel in React app?

Create React App is a common suggestion as a way to start our adventure with React.

There is one little problem, though, with CRA – hidden Webpack (static module bundler). When the application grows and the developer needs to add something more advanced, he is forced to eject the application.

The result is the whole huge webpack configuration and a lot of programmers who are Webpack during the React js app development have a bad experience with that.

They often spend hours correctly configuring Webpack before they can start coding and let’s agree and be honest here, everyone prefers to write code rather than configure the environment.

And this is the moment when Parcel comes into play – a JavaScript bundler to help you build a React app without any configuration.

In other words, it solves one of the biggest programmers’ desires – they can just write code and don’t have to waste their time on unnecessary things.

react, parcel and typescript logos

In this article I will show you how to bootstrap a React application in TypeScript, fast and without any pain by using Parcel bundler.

Want to start a new project with React and TypeScript?

Creating a React application with TypeScript and Parcel

First, we have to create a folder which will contain our application.

Let’s open a terminal. We are using the bash command to create the folder:

mkdir react-ts-parcel

Then we have to go into it:

cd react-ts-parcel

Let’s initialize our application.

To do so, I am using yarn but npm can be used as well. If you have never done it, it is worth mentioning that you will have to answer a bunch of initialization questions.

yarn init

The next step is add React, React-dom, Parcel bundler and TypeScript types:

yarn add react react-dom @types/react @types/react-dom --save
yarn add parcel-bundler --save-dev

Then create a src folder, where you can store your development files:

mkdir src

Now this is the moment when we can run our IDE, do the rest of the basic configuration and start the code:

We need to create an html file, where we will hook our React application.

So in src folder, create index.html file.

That’s how it looks in my repository:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React + Typescript app using Parcel bundler</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.tsx"></script>
  </body>
</html>

I have added an empty div with id app where I hook up the application. Also, add a script which contains bundled JavaScript file with react app.

Next, we have added index.tsx file but it doesn’t exist yet, so we should add it together with some React code.

import * as React from "react";
import { render } from "react-dom";
 
const App = () => <div>Pagepro best react team in the world</div>;
 
render(<App />, document.getElementById("app"));

We have created a simple component and told it to render it in an element with id “app”.

Now we should add scripts to package.json. The scripts are for starting and for building applications. Open it and add:

"scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },

If you run:

yarn start

You should see something like this in your terminal:

yarn run v1.22.4
$ parcel src/index.html
Server running at http://localhost:1234
√  Built in 114ms.

Let’s open a browser and go to http://localhost:1234.

If all is correct, you should see the message you have written in your component.

Adding TypeScript

The first thing we will add is a TypeScript configuration.

TypeScript is an open-source programming language. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript is designed for large application development and trans-compiles to JavaScript.

The tsconfig.json file contains a bunch of rules like, for example, compiler options.

To generate it you can run:

node_modules/.bin/tsc --init

That command creates an example tsconfig which set some rules.

One thing we should add to this basic is:

"jsx": "react"

That means: adding support JSX in .tsx.

It’s time to check if our TypeScript is working in the project.

Add a new component called Hello. I get it from TypeScript documentation:

import * as React from "react";
 
export interface HelloProps {
  compiler: string;
  framework: string;
}
 
export class Hello extends React.Component<HelloProps, {}> {
  render() {
    return (
      <h1>
        Hello from {this.props.compiler} and {this.props.framework}!
      </h1>
    );
  }
}

So, it is a class component which displays information about the compiler and framework we are using in this app.

Above the definition of component, you can see a HelloProps interface.

It informs us how does the Hello component props shape look like.

We should also update App component and add our Hello component.

import * as React from "react";
import { render } from "react-dom";
import { Hello } from "./Hello";
 
const App = () => {
  return (
    <div>
      <p>Pagepro best react team in the world</p>
      <Hello compiler="Parcel" framework={123} />
    </div>
  );
};
 
render(<App />, document.getElementById("app"));

If we’re adding something like this we have got a TypeScript error:

TypeScript error seen in the developer's console

Let’s try to add a number value to the framework property.

We should pass here a string as we defined it in Hello interface:

a code console showing hello interface

After the change of framework value on a string, the error disappears.

Try to run the application and check the result.

If everything is working fine should see something like:

result of aplication check in localhost

Conclusion

As you can see, there is another way how to start a React project than just using the create react app.

Using Parcel to build an app in React with TypeScript is extremely convenient to developers, as they can focus on coding instead of environment configuration.

I hope you found it as practical as I did, and you will use it to start coding your new awesome application.

Article link copied

Close button