# Setting up a simple React app with Parcel

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:

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

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

```bash
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.

```bash
touch .postcssrc
```

```javascript
{
  "plugins": {
    "tailwindcss": {}
  }
}
```

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

```javascript
/** @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.

```bash
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.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

---

## Boilerplates

Add the below markup to `index.html`

```xml
<!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.

```javascript
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.

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

---

## Get it running

Finally, start your build process.

```bash
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!
