Setting up a simple React app with Parcel

Setting up a simple React app with Parcel

Yaseen's photo
Yaseen
·

2 min read

This article is here so I can point my readers to it from other articles that require setting up a React environment.

Installations

Before we get started, you'll need to install Node and npm or yarn and create a directory for your project. Then, install Parcel into your app:

mkdir react-modal
cd react-modal
npm init
npm install --save-dev parcel

Awesome, let's install React, Tailwindcss and Postcss.

npm install react react-dom
npm install -D tailwindcss postcss
npx tailwindcss init

You may need to prepend these commands with sudo depending on your permissions.

Configs

Create a .postcssrc file in your project root, and enable the tailwindcss plugin.

touch .postcssrc

{
  "plugins": {
    "tailwindcss": {}
  }
}

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create ./src/index.html, ./src/index.js, ./src/index.css and ./src/App.js files.

touch src/index.html
touch src/index.css
touch src/index.js
touch src/App.js

Add the @tailwind directives for each of Tailwind’s layers to the index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Boilerplates

Add the below markup to index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

In index.js create a React root and render the App component into the DOM.

import { createRoot } from "react-dom/client";
import { App } from "./App";
import './index.css'

const container = document.getElementById("app");
const root = createRoot(container)
root.render(<App />);

In App.js create a simple component.

export function App() {
  return <h1 className='text-blue-500 text-4xl'>Hello world!</h1>;
}

Get it running

Finally, start your build process.

npx parcel src/index.html

In your browser, go to localhost:1234. If you see a large blue "Hello world" then you're all set!

ReactTailwind CSSparcel