概要
原著者の許諾を得て翻訳・公開いたします。
- 英語記事: Building a Reactjs project with Parceljs – StackDev
- 原文公開日: 2017/12/17
- 著者: Vignesh M
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で通しています。もっと読みたい方はフォローをお願いします。