React入門(1)環境設定

React入門(1)環境設定

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」をグローバルにインストールします。
これは一度インストールしておけば以降他のプロジェクト作成の時には、再度インストールの必要はありません。

yarn global add create-react-app

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

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

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

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

create-react-app test

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

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

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

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

出来上がったフォルダの中身を確認すると、すぐに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」フォルダに移動します。

cd test

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

サーバー開始コマンド

yarn start

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

SASS導入

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

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

yarn add node-sass-chokidar

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

yarn add npm-run-all

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

packege.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
  }
}

React-Bootstrapの導入

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

Bootstrapの追加手順

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

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

yarn add react-bootstrap bootstrap@3

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

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

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

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

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

  1. React入門(1)環境設定
  2. React入門(2)render関数の使い方〜Hello worldの作成
  3. React入門(3)関数型コンポーネントの作成
  4. React入門(4)classコンポーネントの作成