Reactのインストール、初期状態をWEBサイトへ公開するまでの流れ

Reactのインストール、初期状態をWEBサイトへ公開するまでの流れ

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をダウンロードしましょう。

Node.jsWEBサイト

上記ページの下に緑色のダウンロードボタンが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初期ページ

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」フォルダが生成されているのがわかると思います。

buildフォルダが生成された状態

この中に公開用のReactデータが一式入っている訳ですね。

指定区画へUP

buildフォルダをFTPで所定位置にUPした状態

あとはこの「build」フォルダを丸ごと、レンタルサーバー(先程のURLの位置)にアップすればOKです。

直接URLを打って、先程のReact初期画面が表示されれば完了です。

WEBページURL

React初期ページ

これでWEBページとして公開する事ができましたね。

あとはReactアプリの開発を学んで、Reactが使いこなせるように精進しましょう。

この記事をシェアする

人気記事

Reactアプリ開発記事