More than 1 year has passed since last update.

React: Parcel の使い方

Last updated at 2022-07-08Posted at 2022-07-08

こちらを参考にしました。
Building a web app with Parcel

プロジェクトの用意

mkdir proj01
cd proj01
yarn init -y
yarn add react react-dom
yarn add --dev parcel

プログラムの作成

フォルダー構造

$ tree src
src
├── App.js
├── index.html
└── index.js

src/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>

src/index.js

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

const app = document.getElementById("app");
ReactDOM.render(<App />, app);

src/App.js

export function App() {
  return (
<>
<h1>Hello world!</h1>
<blockquote>
<p>Jul/08/2022 PM 19:55</p>
</blockquote>
</>
)
}

package.json

{
  "name": "proj01",
  "version": "1.0.0",
"source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "parcel": "^2.6.2",
    "process": "^0.11.10"
  }
}

サーバーの起動

yarn start

ブラウザーで
http://localhost:1234
にアクセス

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up