Reactの身内向けチュートリアル（その１）


Vue.全盛の中、社内メンバー向けのReactの簡単なチュートリアル。

## 本チュートリアルのゴール

トップナビゲーションやログイン機能を持った普通のWebページをReactのSPAとして作る方法を知る。
下記のようなサイトを作ります。

![スクリーンショット 2019-11-14 12.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/4c58baaf-1d1a-0b36-8015-19530e63ccb0.png "スクリーンショット 2019-11-14 12.44.00.png")

>内部メンバー的なゴールとしてはFirebaseを利用してバックロジックを作ったり独自ドメインHostingをできるようなることを目指す。


## シリーズ

* [その１：create-react-appの簡単な使い方とファイル構成](https://qiita.com/zaburo/private/99dc965d273f1922deae)（この記事）
* [その２：簡単なページの作成（共通パーツ化含む）とreact-routernによるルーティング](https://qiita.com/zaburo/private/07182451cc346071b358)
* [その３：簡易認証機能（ログイン・ログアウト）の追加](https://qiita.com/zaburo/private/69fb5352158a9c281aa8)


## その１の概要

* ReactでSPAを作成する際の雛形作成ツールであるcraete-react-appのインストールと使い方の習得
* 雛形の構造や意味の理解。簡単な編集。


## 前提

* node.jsがインストールされている
* 私はMacで試してますが、Windowsでも動くはず


## React開発環境の構築

Reactの開発環境はwebpack等を利用して0からお好みで作ることもできますが、このチュートリアルが参考になるレベルの人はまずはcraete-react-appコマンドを利用した方がいいでしょう。

### create-react-app（ツール）のインストール

```bash
npm install -g create-react-app
```

>うらでwebpackがいろいろやってますが、標準状態ではwebpack.config.jsとかは見えません。npm run ejectすることで各種設定ファイルが見えるようになります。

## プロジェク（アプリ）の作成と動作確認

コマンドがインストールできたらReactのプロジェクトを作成します。

### プロジェクトの作成

```bash
create-react-app react-tutorial
```

>標準ではyarnが利用されますが、--use-npm オプションを指定することでnpmも利用可能なようです。

### ひとまず動作確認

プロジェクトフォルダに移動し、yarn startを実行します。

```bash
cd react-tutorial
yarn start
```

ブラウザが起動しReactのページが表示されればOKです。

![スクリーンショット 2019-11-14 11.45.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/999249a1-fa32-69ed-e6ce-98ba5baac7a3.png "スクリーンショット 2019-11-14 11.45.48.png")


## ゴミ？ファイルの整理と構造の理解

生成時はいろいろ無駄なファイルが（publicとsrc内に）存在していますので整理してみます。

標準だと下記のような構造をしています。

```bash
├── 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>のところで描画のエンドポイントを提供しているだけなのでほとんど消します。

```html:index.html
<!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"に表示しろ！と命令しています。

```js:index.js
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と表示するだけのコードにしています。

```js:App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <p>Hello React.</p>
    </div>
  );
}

export default App;
```

### 無駄ファイルの削除

ここまでで使っていないファイルは削除しておきます。

```bash
rm -rf public/*.ico public/*.png public/*.json public/*.txt
rm -rf src/*.svg src/serviceWorker.js src/App.test.js
```

### ディレクトリ構造

ここまでの作業で、下記のようになっているはずです。

```bash
├── README.md
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├──yarn.lock
└── node_modules
```

### 動作確認

重要ファイルを消してしまって動作しないと困るので、ここで動作確認しておいたほうがいいでしょう。

```bash
yarn start
```

白地に[Hello React.]と表示されていればOKです。

![スクリーンショット 2019-11-14 11.50.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/62899ff4-fb0e-018b-bd62-fc9c73df95a7.png "スクリーンショット 2019-11-14 11.50.52.png")


### おまけ（CSSのリセット）

文字に変なスタイルがついてるので、とりあえずcssのリセットしておきます。
index.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に続きます。