← Back

React Tapas 4: Parcel

Quick Parcel setup for React development.

1. Create a node project with parcel #

npm init -y
npm install parcel-bundler

2. Create an index.html file #

<html>
  <title>Hello React</title>
  <body>
    <div id="root"></div>
    <script src="index.tsx"></script>
  </body>
</html>

3. Create an index.tsx file #

import * as React from "react";
import { render } from "react-dom";

const App: React.FC = () => <h1>Hola 👋</h1>;

render(<App />, document.getElementById("root"));

4. Start parcel #

npx parcel index.html

Or add a script inside package.json:

  "scripts": {
    "start": "npx parcel index.html"
  }

Enjoy!