This is a simple guide to create your own react app using parcel. Now traditional CRA is great to start your react app or you can use modern vite or other bundle options but it comes with lots of boilerplate. Which probably you won't need for small projects.
Besides that it is important to know how the react app actually working specially if you spent some time as a react developer.
Install Node.js and npm globally on your machine. While these are the only pre-requisites , It is recommended to install git bash CLI also.
- node js
- npm
mkdir react-app
cd react-app
npm init -y
npm i react react-dom
npm i -D parcel
Create a src folder in the root and create an App.js file.
import React from "react";
import { createRoot } from "react-dom/client";
const App = () => {
return (
<div>React App Spinning</div>
)}
const root = createRoot(document.getElementById('root'));
root.render(<App />)At this point there are many options to choose from such as .html, .js, .ts etc as entry point for react. I chose index.html. Following are the steps for the same.
- Create index.html in the root folder.
- Use ! shortcut to generate html boilerplate.
- Link App.js to the index file
- Create a css file and link to the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="/src/App.js" type="module"></script>
</body>
</html>🥳 You created your own react app. Lets spin it up using below command
npx parcel index.html
This will spin your app at localhost:1234
Below is the configuration to spin react app using npm start and create build using npm run build
{
"name": "netflixgpt",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"parcel": "^2.9.3",
"process": "^0.11.10",
}
}Now the app spin up using npm start command in the terminal.
This is it. The react app is ready
Same guide is available at tailwindcss official installation guide for parcel. See the steps below.
npm install -D tailwindcss postcss
npx tailwindcss initnpx tailwindcss init will create a tailwind.config.js file. Copy paste the below code .
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Create .postcssrc file in root and copy paste the below lines
{
"plugins": {
"tailwindcss": {}
}
}Add below code to your style.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;