環境作成と依存ライブラリインストール

前提としてnode.jsが動作する環境を作っている想定で話して行きます

適当にプロジェクトを作って、npmやyarnを使って以下のものをインストールする

# プロジェクトディレクトリ作成
mkdir test_proj
cd test_proj

# npm
npm init -y
npm i react react-dom
npm i -D parcel

# yarn
yarn init -y
yarn add react react-dom
yarn add -D parcel

srcディレクトリ等を作る

# ディレクトリ作成
mkdir src
mkdir view

# ファイル作成
touch src/app.js
touch view/index.html

Reactのコードを書く

雑に"Hello World"を表示するReactのコンポーネントを作る

// src/app.js
import React from 'react'
import ReactDOM from 'react-dom'

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app')

読み込むhtmlを作る

さっき作ったReactのコードを読み込むhtmlファイルを作る

ここで注目するポイントは<script>タグでエントリーポイントのファイルを指定している部分で、parcelでビルドするといい感じにブラウザで動く状態に変換してくれる

<!-- view/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Sample</title>
</head>
<body>
  <div id="app"></div>
  <script src="../src/app.js"></script>
</body>
</html>

動かしてみる

作成したプロジェクトを動かしてみる

# npm
npx parcel view/index.html

# yarn
yarn run parcel view/index.html

上のコマンドを実行するとlocalhost:1234でサーバーが立ち上がり、"Hello World"が表示される

まとめ

ちょっと動かしたいだけなのにwebpackの設定面倒だなーと思ってたので、雑に試すならparcel最高だなと思った

まだ素振りと、ラズパイで動いてる雑なwebシステムにしか使ってなくてあんまりわかってないんだけど、一応productionコンパイル *1とかもできるみたいなのでちょっとずつ使ってみようと思ってる

*1:https://parceljs.org/production.html

ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

素振り環境にparcelのご提案

環境作成と依存ライブラリインストール

srcディレクトリ等を作る

Reactのコードを書く

読み込むhtmlを作る

動かしてみる

まとめ