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でおこなったものです。
- Node.jsがインストールされている必要があります。
バージョン管理付きNode.jsの導入方法〜Mac用を参照ください。 - 今回はyarnを使った説明をしています。yarnがインストールされている必要があります。
* フロントエンドでモダンなコーディングを行うにはターミナルを使用します。そのため、ターミナルの知識は必須です。今回もターミナルを使いながら作業を行います。
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
「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 ドキュメント