React開発準備をしよう (4/4)

プログラムの中身は後回しにして、create-react-appで作成したReactアプリケーションを動かしてみましょう。これも、npmのコマンドを利用して行います。

コマンドプロンプト／ターミナルで、cdコマンドでアプリケーションのフォルダ内に移動して下さい。そして以下のように実行しましょう。

npm start

これで、Node.jsのサーバープログラムが起動され、WebブラウザでWebページが開かれます。アプリケーションのトップページは、

http://localhost:3000/

このようになります。「Welcome to React」と表示されたページが現れるでしょう。これが、サンプルで用意されているReactアプリのページになります。



では、Reactで作成したアプリを実際にサーバーなどにデプロイする場合はどうするのでしょうか。フォルダ自体はNode.jsのモジュールなどがあるため60MB以上になります。サンプル程度でこんなに巨大なアプリになってしまっては使いにくいですね。

Reactのアプリをデプロイする場合は、npmのビルド機能を使うのです。コマンドプロンプト／ターミナルでアプリのフォルダに移動し、以下のように実行して下さい。

npm run build

これで、アプリがビルドされます。アプリのフォルダ内に「build」というフォルダが作成されます。このフォルダが、ビルドして作られたアプリのフォルダになります。このフォルダの中身をサーバーにアップロードすればいいのです。

（※ただし、生成されたコードを見ると、プログラム内から利用しているファイル類が絶対パスで指定されているようで、サーバーのサブディレクトリなどに配置するとパスがずれてうまく動かないことがあるようです）

この「npm run build」というのは、実はnpmのコマンドではありません。Reactアプリケーションのpackage.jsonに設定されているスクリプトで、Reactのスクリプトを実行し、ビルド処理を行うものなのです。

――とりあえずこれで、Reactアプリを作成し動かすまでが一通り行えるようになりました。では、次回からReactの使い方について説明していくことにしましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。