Reactのインストール、初期状態をWEBサイトへ公開するまでの流れ
ReactをWindowsPCにインストールして、初期ページをWEBサイトに公開するところまでを紹介します。
インストールの際は、React以外に必要なツールを省略して導入できる「Create React App」が便利です。
WEBサイトに公開する場合は、buildコマンドで生成したフォルダをサーバーにUPすれば表示されます。
Reactのインストール、WEBサイトへ公開
本記事では「React」をWindowsPCにインストールし、Reactの初期ページをWEBページに公開するまでの流れをご紹介します。
ReactをインストールするとReactのロゴが表示されるページができますので、今回はそのままレンタルサーバーにUPします。
インストール・開発・公開の主な流れを、まずは一通り実践してみる訳ですね。
公開までできれば、あとはReactのアプリ開発を覚えるだけになりますからね。
Node.jsのインストール
Reactを導入する前に、まず「Node.js」というツールをインストールします。
Node.jsは元々、サーバーサイドでJavaScriptを動かすツールです。
現在はフロントエンドを開発するためのサポートツールとしても重宝されています。
node.jsの「npm」というコマンドを使って、Reactを導入していきます。
Node.js公式サイト
上記のURLからNode.jsをダウンロードしましょう。
上記ページの下に緑色のダウンロードボタンが2つありますが、左側の「推奨版」のボタンを押して下さい。
ダウンロードした実行ファイルを開く、とインストーラが起動します（英語表記です）。
2枚目のパネルで同意チェック（I agree～）をつけ、それ以外は全て「Next」や「Start」を押すとインストールが完了します。
「Create React App」のインストール
Node.jsのインストールが完了したら、コマンドラインを入力できる準備をしましょう。
コマンドプロンプトの起動
今回はWindows環境ですので、「コマンドプロンプト」を使います。
Windowsキー＋Rを押して「ファイル名を指定して実行」のパネルを出します。
名前のボックス欄に「cmd」と入力してOKを押すと、コマンドプロンプトの黒い画面が出てきます。
画面が開いたら「cd」コマンドで、プロジェクトを作りたい場所に移動しましょう。
cd アプリを作りたいディレクトリパス
次のコマンドで専用のプロジェクトフォルダを作るので、デスクトップ上にプロジェクトファイルを置きたい場合、デスクトップに移動するだけでOKです。
「Create React App」のインストール
ではReactのパッケージツール「Create React App」をインストールします。
以下のコマンドを入力しましょう。
npx create-react-app react_app
後ろの「react_app」がアプリ作成データを入れるプロジェクトフォルダ名です。
先程移動した場所に「react_app」フォルダが作成され、同時にReactのツールがインストールされます。
これにより様々なファイルが中に作成されます。
Create React Appとは
「Create React App」は、簡単にReactを導入できるツールです。
本来React環境を一から構築する場合は、React以外にも以下の様なツールが必要になります。
・モジュールハンドラー：Webpack
・トランスパイラ：Babel
・Javascriptのスーパーセット：TypeScript
一から細かく導入したい場合は、これらを直接設定する必要があります。
一つ一つに相応の知識が必要になりますので、これらから習得を始めるとなれば敷居が高くなってしまいますよね。
「Create React App」は上記ツールに関する導入を省略して、簡単にReact環境を構築する事ができます。
初心者の人や簡単利用したい人向けにおすすめです。
npmとnpxの違い
Node.jsをインストールした場合、使うコマンド命令としては「npm」が多いですよね。
しかし上記では「npx」でインストールをしました。
「npx」は「npm」と併用して使用するパッケージランナーです。
導入済みパッケージの管理がnpm、パッケージの実行がnpx
既に入っているパッケージを管理するために使うのが「npm」で、パッケージ内の機能を利用する際に使われます。
それに対し「npx」はパッケージの実行に使われるため、初回の1回のみという使い方です。
「npx」を使うと新しいプロジェクトを作成するごとに、毎回最新のReactバージョンが使用されます。
Reactの実行
ではReactを稼働させます。作成したプロジェクトフォルダ内へ移動しましょう。
cd react_app
もしコマンドプロンプトを閉じてしまった場合は、react_appがある場所まで絶対パスで移動して下さいね。
そして以下のコマンドを実行します。
npm start
Reactが実行され、以下のような初期ページ画面が自動的に「http://localhost:3000/」で立ち上がります。
http://localhost:3000/
Reactは基本的に、上記の様なindex.htmlが1ページのみで構成（SPAと呼びます）されるのが主流です。
フォルダ上のindex.htmlファイルを開いても上の画面は表示されません。
あくまでlocalhost（http://localhost:3000/）でしか確認できませんのでご注意ください。
react_appフォルダ内のsrc/app.jsをテキストエディタで開いて中身を変更すると、変更結果がブラウザにすぐ反映されるようになっています。
WEBサイトに公開
本来はここからReactアプリの開発が始まるのですが、ここには大変な時間が掛かります。
ですので先に、このReactアプリをWEBページに公開する方法を紹介しておきます。
基本的にはこのReactアプリを「ビルド」して、生成されたファイル一式をレンタルサーバーにアップすればOKです。
ビルドをする前に必要な準備をご紹介します。
package.jsonの編集
まずreact_appフォルダ直下にある「package.json」を開きましょう。
そして以下の部分を追記します。
"homepage": "https://lpeg.info/build/", ←追記 "name": "test", "version": "0.1.0", "private": true,
URLは実際にUPする先を入れましょう。上記はbuildフォルダごとUPしたURLになっています。
追記をしたら保存します。
.htaccessの編集
次にreact_app内にあるpublicフォルダへ移動し、そこに「.htaccessファイル」を準備します。
.htaccessファイルは他のデータからコピペ設置して構いません。
.htaccessを開いたら一度記載内容を全て消して、以下を記述します。
.htaccessへの記述
Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
追記をしたら保存しましょう。
build実行
そしてコマンドラインでビルドを実行します。
npm run build
実行すると、react_app内に「build」フォルダが生成されているのがわかると思います。
この中に公開用のReactデータが一式入っている訳ですね。
指定区画へUP
あとはこの「build」フォルダを丸ごと、レンタルサーバー（先程のURLの位置）にアップすればOKです。
直接URLを打って、先程のReact初期画面が表示されれば完了です。
WEBページURL
これでWEBページとして公開する事ができましたね。
あとはReactアプリの開発を学んで、Reactが使いこなせるように精進しましょう。
