React App 作ってみた！(導入編)

フロントサイドの勉強ということで今回はReactを使ってみます！

フロントサイドのフレームワークなのでビルドしたものをSpringBootで作ったバックエンドのプログラムと連携させたりできます。

今回は、バックエンドの開発は省略するためReactプロジェクトを作って開発していきたいと思います！

Node.jsはインストールしておいてくださいませ。

では、まずReactプロジェクトを作成するためのコマンドをインストールします。

下記コマンドを実施

そして、Reactプロジェクトを作成するためのディレクトリに移動したら

で、プロジェクトを作成できる。

あるいは、create-react-appコマンドをインストールしなくても

でもできます

作ったら、中身を見てみましょ

・npm_modulesフォルダ：npmで管理されるモジュール群

・publicフォルダ：公開フォルダ

・srcフォルダ：ここにReactで作成したファイルなどがまとめられる

・.gitignore：Gitツールで使うもの

・package.json：npmでパッケージ管理するための設定情報ファイル

・README.md：リードミーファイル

・yarn.lock：yarnに関する設定情報を記述したファイル

とまあ、いろいろあるけどとりあえずプロジェクト起動してみる

こうなりますね。OK

ここで１つ補足しておくと、冒頭に他のバックエンドプロジェクトと連携できるって言ったんですが、それをするために上記の関連ファイル全てをアップロードしないといけないと思うかもしれないんですが、その必要はありません。

このReactアプリは、アプリケーションを作成するために必要なものを一通り揃えたものです。バックエンドを担当する部分も含まれているということです。

では、フロントエンド部分だけをアップロードするにはどうしたら良いのでしょうか。

それを作成するのが、

コマンドです。これでビルドが完了するとbuildフォルダが作られます。このbuildフォルダ内のものをwebサーバにデプロイ済みのプログラムの公開フォルダにアップロードすれば、OKです。

もひとつ補足。Reactはソースコードがそのまま表示されるわけではなく、実行時には全く別の表示に変わってしまう。なので開発者ツールでデバッグなんてことができない。

Reactの動作確認を行うためのデバッグツールが存在するので、それを紹介します。

Chrome Webストアまたは、Firefox App-onsにアクセスして「React Developer Tools」で検索します。

今回はChomeで紹介します

こいつですね。

使い方は開発者ツールを表示すると、react用の項目が追加されている

これを活用し、Reactでは現在どの値が入っているのかを確認しながらデバッグしていくという流れになります。

次回はコンポーネントを使ってみたいと思います。

とりあえず導入編は以上で終了！

BYE!