Vue.全盛の中、社内メンバー向けのReactの簡単なチュートリアル。
本チュートリアルのゴール
トップナビゲーションやログイン機能を持った普通のWebページをReactのSPAとして作る方法を知る。
下記のようなサイトを作ります。
内部メンバー的なゴールとしてはFirebaseを利用してバックロジックを作ったり独自ドメインHostingをできるようなることを目指す。
シリーズ
- その１：create-react-appの簡単な使い方とファイル構成（この記事）
- その２：簡単なページの作成（共通パーツ化含む）とreact-routernによるルーティング
- その３：簡易認証機能（ログイン・ログアウト）の追加
その１の概要
- ReactでSPAを作成する際の雛形作成ツールであるcraete-react-appのインストールと使い方の習得
- 雛形の構造や意味の理解。簡単な編集。
前提
- node.jsがインストールされている
- 私はMacで試してますが、Windowsでも動くはず
React開発環境の構築
Reactの開発環境はwebpack等を利用して0からお好みで作ることもできますが、このチュートリアルが参考になるレベルの人はまずはcraete-react-appコマンドを利用した方がいいでしょう。
create-react-app（ツール）のインストール
npm install -g create-react-app
うらでwebpackがいろいろやってますが、標準状態ではwebpack.config.jsとかは見えません。npm run ejectすることで各種設定ファイルが見えるようになります。
プロジェク（アプリ）の作成と動作確認
コマンドがインストールできたらReactのプロジェクトを作成します。
プロジェクトの作成
create-react-app react-tutorial
標準ではyarnが利用されますが、--use-npm オプションを指定することでnpmも利用可能なようです。
ひとまず動作確認
プロジェクトフォルダに移動し、yarn startを実行します。
cd react-tutorial
yarn start
ブラウザが起動しReactのページが表示されればOKです。
ゴミ？ファイルの整理と構造の理解
生成時はいろいろ無駄なファイルが（publicとsrc内に）存在していますので整理してみます。
標準だと下記のような構造をしています。
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├──yarn.lock
└── node_modules
このうち重要なものは、
- public/index.html
- src/index.js
- src/App.js
この３つのファイルの内容を整理しつつ、無駄なファイルを消してみます。
index.html
誰でもわかるindex.html。いろいろ書かれていますが、重要なところは<div id="root"></div>のところで描画のエンドポイントを提供しているだけなのでほとんど消します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
serviceWorkerとか、とりあえずいらないので消します。
index.jsで、次に編集するApp.jsの内容をid="root"に表示しろ！と命令しています。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
いろいろ書かれていますが、一旦Hello Reactと表示するだけのコードにしています。
import React from 'react';
import './App.css';
function App() {
return (
<div>
<p>Hello React.</p>
</div>
);
}
export default App;
無駄ファイルの削除
ここまでで使っていないファイルは削除しておきます。
rm -rf public/*.ico public/*.png public/*.json public/*.txt
rm -rf src/*.svg src/serviceWorker.js src/App.test.js
ディレクトリ構造
ここまでの作業で、下記のようになっているはずです。
├── README.md
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ └── index.js
├──yarn.lock
└── node_modules
動作確認
重要ファイルを消してしまって動作しないと困るので、ここで動作確認しておいたほうがいいでしょう。
yarn start
白地に[Hello React.]と表示されていればOKです。
おまけ（CSSのリセット）
文字に変なスタイルがついてるので、とりあえずcssのリセットしておきます。
index.cssを以下のようにしておきます。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
スタイルが適用されたらindex.cssの内容がどうレンダリングされているかHTMLソースを確認してみてください。
その１のおさらい
- index.html, index.js, Appl.jsの依存関係
- index.css, App.cssの中身とReactにおけるCSSの指定方法
とりあえず以上です。その2に続きます。