今回はJavascriptライブラリのReactについて！今まで聞いたことはあるけど、触ったことはありませんでした。学習を進めて、最終的には簡単なアプリケーションを作れたらと思います。
今回のゴール
ReactをPCに導入して「Hello World」をブラウザ表示させるまで
Reactってなに？
Facebookが作った、Javascriptライブラリです。
環境構築
※前提として、Windows PCに環境を構築していきます。
Node.jsをインストール
Node.jsはサーバサイドのJavascript実行環境。(なぜ必要なのかいまいち良くわかってません。後述のnpm用？？)
以下のリンクからインストーラをダウンロードしてインストールします。
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というか、環境構築に意外と手こずりました。。。必要なパッケージとか設定多すぎる。次からはもう少しサクサク進められるはず！！(たぶん、きっと、おそらく)
0 件のコメント:
コメントを投稿