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

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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; … Continue reading JavaScript: Parcel.jsでReact.jsプロジェクトを作成する(翻訳)