React 環境構築からHelloWorldまで

こんにちは!tonです

今回はJavascriptライブラリのReactについて!今まで聞いたことはあるけど、触ったことはありませんでした。学習を進めて、最終的には簡単なアプリケーションを作れたらと思います。

今回のゴール

ReactをPCに導入して「Hello World」をブラウザ表示させるまで

Reactってなに?

Facebookが作った、Javascriptライブラリです。

環境構築

※前提として、Windows PCに環境を構築していきます。

Node.jsをインストール

Node.jsはサーバサイドのJavascript実行環境。(なぜ必要なのかいまいち良くわかってません。後述のnpm用??)

以下のリンクからインストーラをダウンロードしてインストールします。

Node.jsダウンロードサイト

npmで必要なパッケージをインストール

Node.jsをインストールすると、npmというものも一緒にインストールされています。npmとは色々と便利なパッケージをインストールすることができるものです。Reactもnpmでインストールできます。

mkdir hello
cd hello

まずはコマンドプロンプトからアプリケーション用のディレクトリを作成します。

\hello>npm init -y
Wrote to
\hello\package.json:
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

次にnpm init コマンドでアプリケーションディレクトリを初期化。パッケージを管理するpacakge.jsonファイルができます。

\hello>npm i react react-dom

npm i で必要なパッケージをインストールしていきます。-Dをつけると開発時に使用するパッケージをインストールします。-gでグローバル環境にインストールします。

  • react・・・javascriptライブラリ。今回の主役
  • react-dom・・・画面描画に使用

-Dをつけると開発時に使用するパッケージをインストールします。後述するwebpackコマンドを使用したかったのでwebpackは -gでグローバル環境にもインストールします。

npm i -D webpack webpack-dev-server webpack-cli
npm i -g webpack webpack-cli
  • webpack・・・javascriptファイルを一つにまとめてくれる。
  • webpack-devserver・・・開発用webサーバ
  • webpack-cli・・・webpack用のコマンド
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
  • babel-loader・・・javascriptコードを変換するようwebpackに指示する(らしい)
  • babel-core・・・babel本体。babelは最新の構文で書かれたjavascriptを古いjavascript構文に変換する。
  • preset-env・・・環境にあわせて変換を行う(らしい)
  • preset-react・・・react用の設定

Reactを書いてみる

必要なパッケージをインストールしたら、いよいよReactを書いてみます。必要な作業は以下。

  • webpackの設定ファイルを作成
  • javascriptファイルを作成
  • htmlファイルを作成
  • package.jsonファイルを修正

Webpackの設定ファイルwebpack.config.jsを作成

webpackの設定ファイルhello/webpack.config.jsを作成します。

var webpack = require('webpack');
var path = require('path');

module.exports = {
// まとめるファイルの対象パスを指定
context: path.join(__dirname, "src"),

// メインになる処理を行うjavascriptを指定(エントリーポイントという)
entry: "./js/index.js",
// まとめたファイルの出力設定。
output: {
path: __dirname + "/src/",
filename: "index.min.js"
},
module: {
rules: [
{
// まとめるファイルをjsファイルに特定
test: /\.js?$/,
// 除外対象
exclude: /(node_modules|bower_components)/,
use: [
{
// まとめるloaderをbabelに指定
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env']
}
}
]
}
]
},

plugins: [
// jsファイルをまとめるときに、モジュール利用頻度に応じて短い変数名に変換。ファイルサイズを小さくできるものらしい
new webpack.optimize.OccurrenceOrderPlugin()
]
};

Javascriptファイル作成

src/js/index.jsファイルを作成します。

// Reactのモジュールを使用するためのimport文
import React from "react";
import ReactDOM from "react-dom";

// コンポーネント(画面の部品。タイトルとかヘッダーとかボタンとか)を作成するため
// Componentクラスを継承する
class Hello extends React.Component {
// 1つのJSXを返すメソッド
render() {
return (
// JSXという記法でHTMLタグをJavascriptに埋め込むことができる
<h1>Hello World</h1>
);
}
}

// htmlファイルのroot要素にHello Worldを表示する
const hello = document.getElementById('root');
ReactDOM.render(<Hello/>, hello);

HTMLファイルを作成

webpackで出力されたjavascriptファイルを読み込む。Hello World用の表示エリアを確保するhello/index.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="index.min.js"></script>
</body>
</html>

package.jsonを修正します。修正箇所は scriptsの部分。

{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.min.js",
"scripts": {
"start": "webpack-dev-server",
"webpack": "webpack -d"
},

"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
}
}

実際に動かしてみる

では、実際に動かしてみます。以下のコマンドを発行。

npm start

http://localhost:8080にアクセスしてみます。

出ました!!Hello World。単なる画面出力ですが、ひとまず今回のゴールは達成しました。

まとめ

Reactというか、環境構築に意外と手こずりました。。。必要なパッケージとか設定多すぎる。次からはもう少しサクサク進められるはず!!(たぶん、きっと、おそらく)

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です