解 説

Reactとは

ReactはFacebook社が開発したJavaScriptライブラリです。フレームワークとされる場合がありますが、正式にはライブラリです。
Reactは特にJavaScriptを多用したWebサービスに使われています。
その最大の特徴はjQueryのようにDOM操作を直接行うのではなく、仮想のDOMをJavaScriptで操作することです。そうすることでjQueryで起こった様々な問題をスマートに解決できるようになったのです。
また、もう一つの特徴はコンポーネント志向であることです。そのため開発の効率化が行いやすくなったり、メンテナス性が向上したりなどのメリットが出てきます。
最初は説明だけではよくわからないと思いますので、Reactの仕組みを理解してなんらかWebサービスを構築してみることが一番理解に繋がると思います。

環境設定

Reactの学習を行う上で1番の壁はその環境設定の難しさです。
そのため、Reactを学習する以前の問題で挫折してしまう場合も多いと思います。
今回はその環境設定を超簡単に行ってくれる 「create-react-app」を使いReactの本質を学習したいと思います。
「create-react-app」で環境設定を行うと面倒な設定など必要ありませんので、気軽にReact本来の作業に集中することができます。

今回の手順はMacでおこなったものです。

* フロントエンドでモダンなコーディングを行うにはターミナルを使用します。そのため、ターミナルの知識は必須です。今回もターミナルを使いながら作業を行います。

create-react-app導入

ターミナルで「create-react-app」をグローバルにインストールします。
これは一度インストールしておけば以降他のプロジェクト作成の時には、再度インストールの必要はありません。

新規プロジェクトとReact環境作成

新規プロジェクトを作成してReact環境を作る時、次のコマンドを入力するだけです。

「create-react-app」コマンドを実行するとHomeの中に新規プロジェクト(新しいフォルダ)が作成されて、React環境が構築されます。
*ただし、細かい環境設定をする場合は逆に面倒になる場合もあります。webpackの設定がわかりにくくなってしまいます。

以下のコードは、カレントディレクトリをHomeにしておいて、実行します。するとtestフォルダが自動作成されて、そのtestフォルダ内にReactの環境が出来上がります。

Reactの環境設定は、たった一つのコマンドで済む!
「create-react-app [プロジェクト名]」

「create-react-app test」でできたファイルの確認

フォルダ構造は次のようになっています。
*詳細な説明は出来上がった「README.md」で確認できます。
英語ですがGoogle翻訳で十分理解できますので必ず一読しておくと良いでしょう。きっと様々な拡張機能に驚かされる事でしょう。

出来上がったフォルダの中身を確認すると、すぐにGit管理できるように「.gitignore」ファイルも準備されています。Gitを使う場合は「git init」することですぐにバージョン管理を行うことができます。 Gitの使い方はGitの使い方 コマンド編を参照ください。

  •  「public/index.html」ファイルがページテンプレートです。つまりこのファイル内容が最終的にユーザーが閲覧するブラウザに表示されることになります。
    けれども、コードは非常にシンプルです。何しろbodyタグの中にあるタグはid名がrootのdivタグがあるだけです。
    * noscriptタグはJavaScriptが使えない環境の場合に代替表示するものです。
  • 「src/index.js」ファイルがJavaScriptのエントリポイントです。つまり、このファイルを中心にJavaScriptを記述して行きます。
    1番の決まりごとして、「JSファイル」と「CSSファイル」は「srcフォルダ」内に置く必要があります。

開発サーバーの稼働

Reactの開発環境を作成すると、開発用のサーバーも使えるようになっています。
まず、コマンド「cd」で作成したプロジェクトフォルダに移動します。
今回は「test」フォルダに移動します。

開発用のサーバーを「yarn start」コマンドで稼働させます。
開発用のサーバーのアドレスは「 http:// localhost:3000」です。
これで開発作業をリアルタイムでブラウザ確認ができます。

サーバー開始コマンド

サーバー停止は「ctrl+C」のショートカットキーを使います。
これで基本的な環境構築は終わりです。

SASS導入

ここから先は、多分使いたくなるオプションの導入方法です。
まずは、SASSを使いたい時の手順です。

最初に、ターミナルでnode-sass-chokidarモジュールをインストールします。

続いて次のコマンドを実行

その後、「packege.json」のscripts部分を以下のように記述します。

packege.json

React-Bootstrapの導入

Reactに最適化されたBootstrapを使うことができます。
Bootstrapの導入はcreate-react-app導入の際にできるReadmeを読めば手順が書かれています。

Bootstrapの追加手順

次の例は、yarnコマンドでインストールする方法です。

Bootstrap3を指定してインストールする例

src/index.jsファイルの先頭に下記のimport文を追記します。

src/App.jsファイルに下記のimport文を追記します。

これでBootstrapが使えるようになります。
なお、ReactでのBootstrapの使い方ドキュメントは以下を参考にします。
React-Bootstrap ドキュメント

次回はReactを使ってHello Worldを表示してみます。