Skip to content

Latest commit

 

History

History
63 lines (52 loc) · 991 Bytes

2.2-setup-parcel.md

File metadata and controls

63 lines (52 loc) · 991 Bytes
Raw

Setting up a React Application using Parcel

Setup

npm install parcel --save-dev npm install react react-dom --save

Scripts

{
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {    
    "parcel": "^2.12.0",
    "process": "^0.11.10"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

HTML Template

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

React root

index.js

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

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

React App

export function App() {
  return <h1>Hello world!</h1>;
}