jspmでReactなセットアップ

はじめに

jspm を使った React 開発をするまでの準備です。

プロジェクト作成

適当なディレクトリで npm init

npm init

jspm インストール

npm install --save-dev jspm

jspm初期化

jspm の初期化。適当に答える

$ jspm init
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

index.html

なんの変哲もない index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import("src/index.js")
    </script>
  </body>
</html>

開発用サーバ

なんでもいいんですが、今回は開発用のサーバとして live-server を使うことにします。

npm install --save-dev live-server

npm start で起動できるように。

  "scripts": {
    "start": "./node_modules/.bin/live-server",
  },

React

とりあえず何か表示させます。

まずは jspm でパッケージをインストール。

jspm install npm:react npm:react-dom

src/index.js を作ります。

import React from "react"
import { render } from "react-dom"

class Hello extends React.Component {
  render() {
    return <h1>Hello, world!</h1>
  }
}

render(
  <Hello />,
  document.getElementById("app")
)

これでブラウザで表示させることができるようになったので、次のコマンドで確認できます。

npm start

おわりに

ボイラープレート作っとけって話ですね 😃