JavaScript: Parcel.jsでReact.jsプロジェクトを作成する(翻訳)

概要

原著者の許諾を得て翻訳・公開いたします。

Parcel.jsでReact.jsプロジェクトを作成する(翻訳)

Parcel.jsはJavaScript界隈に登場した新しいbundlerです。誕生後2週間も経たないうちにGitHubで★11,000以上も獲得しています。本記事はParcel.jsで最初のReactプロジェクトを作成するためのガイドです。

Parcel.jsは、(マルチコア処理で驚異的な高速性が実現されるまでは)JavaScript bundlerとして最速であることと「設定ゼロ」を誇っています。詳しくはParceljs.orgをご覧ください。


  • 1. Parcel.jsは、インストールするだけですぐ使えるようになります。
npm install -g parcel-bundler
  • 2. プロジェクトディレクトリで以下のコマンドを実行し、package.jsonファイルを作成します。
npm init -y
  • 3. ReactとReact-domをインストールします。
npm install --save react react-dom
  • 4. 開発用の依存ライブラリをインストールします。
npm install --save-dev parcel-bundler babel-preset-env babel-preset-react
  • 5. Reactのプリセットを使うための.babelrcを作成します。
// .babelrc

{  "presets": ["env", "react"]}
  • 6. package.jsonに起動スクリプトを追加します。
// package.json

"scripts": {  "start": "parcel index.html"}
  • 7. index.htmlを作成し、index.jsを指すscriptタグを追加します(Gist)。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

  <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-Parcel-Example</title>
  </head>

  <body>
    <div id="root"></div>
  </body>

  <script src="./index.js"></script>

</html>
  • 8. index.jsを作成し、コンポーネントのimportとページのレンダリングを行えるようにします(Gist)。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import ExampleApp from './ExampleApp';

ReactDOM.render(<ExampleApp />, document.getElementById('root'));
  • 9. コンポーネントファイルとCSSファイルを作成します。
    • ExampleApp.jsは画像とタイトルを持つコンポーネントを単に返します(Gist)。
// ExampleApp.js
import React, { Component } from 'react';

import './ExampleApp.css';

class ExampleApp extends Component {
  render() {
    return (
      <div className="App">
        <img
          className="App-Logo"
          src="https://user-images.githubusercontent.com/19409/31321658-f6aed0f2-ac3d-11e7-8100-1587e676e0ec.png"
          alt="Parcel Logo"
        />
        <h1 className="App-Title">React-Parcel Example</h1>
      </div>
    );
  }
}

export default ExampleApp;
  • ExampleApp.css(Gist
/* ExampleApp.css */

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.App {
  text-align: center;
  margin: 2rem auto;
}

img {
  height: 100px;
}
  • 10. 以上でおしまいです。Parcelのdevサーバーを起動すると変更が即座に反映されるようになります。
npm run start

ここでご紹介したコードはGitHubリポジトリでご覧いただけます。また、実際にサンプルアプリを見ることもできます。


お読みいただきありがとうございました。JavaScriptとPythonの開発者およびメンターのVignesh Mです。ユーザー名は@vigzmvで通しています。もっと読みたい方はフォローをお願いします。

関連記事

JavaScript: 5分でわかるPromiseの基礎(翻訳)

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか (翻訳)

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

BPSアドベントカレンダー

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ