Setting up a simple React app with Parcel
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
No comments yet. Be the first to comment.
This article is here so I can point my readers to it from other articles that require setting up a React environment.
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.
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;
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>;
}
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!