Django+Reactで学ぶプログラミング基礎(19): Reactチュートリアル(準備とReact概要)

##### [前回] [Django+Reactで学ぶプログラミング基礎(18): Django高度なチュートリアル(再利用可能アプリの書き方)](https://qiita.com/mingchun_zhao/items/0e337b6681da9c7971b0)

## はじめに

前回まで、Djangoチュートリアルを使用し、基礎知識を勉強しました。
今回から、[Reactチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を使用し、React基本を勉強します。

## 今回の内容

- チュートリアルの準備
- Reactの概要

## チュートリアルの準備

- チュートリアルの目的
    - Reactアプリの基本構文と技法を学ぶ
    - マスターすることで、Reactへの深い理解が得られる

- チュートリアルのセクション
    - チュートリアルの準備
        - チュートリアルの開始地点
    - チュートリアルの概要
        - コンポーネント/props/state、といった基礎概念
    - ゲームを完成させる
        - Reactの開発技法
    - タイムトラベル機能
        - React独自の利点について深い洞察が得られる

- チュートリアルで作るもの
    - インタラクティブな三目並べゲーム(tic-tac-toe)
    - [最終的な結果](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)を確認できる
    - 三目並べゲームで遊んでみる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/d8b4ce1e-51ad-3180-3423-9aae263ae759.png)

- 前提知識
    - HTMLとJavaScript(ES6)に多少慣れている
    - 関数/オブジェクト/配列/クラス、といったプログラミング概念
        - アロー関数
            - 関数定義を`=>`記号を用いて、より短く記述できる記法
        - クラス
            - オブジェクト指向プログラミングおいて、オブジェクトを生成するための設計図あるいはひな形で、抽象データ型の一つ
        - `let`ステートメント
            - ブロックスコープのローカル変数を宣言
            - 任意で値を代入し初期化
        - `const`ステートメント
            - 定数を宣言
            - 再代入による変更ができず、再宣言もできない
    - Babel
        - Babelとは、OSSのJavaScriptトランスコンパイラ
            - 主に`ECMAScript 2015+`コードを、下位互換バージョンのJavaScriptに変換し
                - 古いJavaScriptエンジンで実行可能にする
        - [Babel REPL](http://babeljs.io/repl/)
            - ES6のコードがどのようにコンパイルされるか確認できる

- ローカルのVS Code開発環境
    - [構築手順](https://qiita.com/mingchun_zhao/items/505a4fe76dfb8aa73023#react%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89)をご参照
    - VS Codeの`ファイル`メニューから`フォルダーを`開く
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/06d100b4-a1f1-3684-4700-3669c76eeb21.png)
    - 上記構築手順で作成したReactアプリのディレクトリを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/ed208558-5da4-cd48-e160-586a11044315.png)
    - `npm start`コマンドで、Webサーバーを起動
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/fb7b1c72-2ca0-c703-8ad7-f418de29b582.png)
    - しばらく経つと、コンパイル成功
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/c24660be-3225-5373-9297-aaa6b121ede0.png)
    - ブラウザで、URL`http://localhost:3000/`からReactアプリが表示される
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/85b459a7-d225-c0f7-ebd4-05ae2c0e664a.png)

## Reactの概要

### Reactとは

- UI(ユーザインターフェイス)を構築するためのJavaScriptライブラリ
    - 宣言型
    - 効率的
    - 柔軟

### Reactコンポーネントとは

- 複雑なUIを組み立てるための、小さく独立した部品
- Reactに何を描画したいか伝える
- データが変更されると
    - Reactはコンポーネントを効率よく更新し、再レンダリング
- 異なる種類のコンポーネントが存在

#### Reactコンポーネントの例: `React.Component`サブクラス

- `ShoppingList`はReactコンポーネントクラス(Reactコンポーネント型)
    - `props`(propertiesの略)と呼ばれるパラメータを受け取る
        - 使用例: `this.props.name`
    - `render`メソッドにより、React要素を返す
        - React要素は、画面ビューの階層構造
            - 描画すべき要素の軽量な記述形式
    - ReactはReact要素を受け取って画面に描画

```
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />
```

### JSX言語を使用し、React要素を記述

- JSXとは、DeNAによって開発されたWebアプリ向けのプログラミング言語
- JSX構文はビルド時に、React関数呼び出しに変換される
    - 例えば、`<div />`は、`React.createElement('div')`に変換される
- JSXでは、JavaScriptのすべての構文を使用可能
    - JavaScriptの式を、JSX内で中括弧に囲んで記入
- React要素は、JavaScriptのオブジェクト
    - 変数に格納可能
    - プログラム内で受け渡し可能

### Reactコンポーネントのレンダリング

- 方法1: 組み込みDOMコンポーネントを使用しレンダリング
    - 上記`ShoppingList`コンポーネントは、`<div />`や`<li />`などのHTML要素でレンダリング
- 方法2: 自分で書いたカスタムReactコンポーネントをHTMLに差し込む
    - 例えば、事前に`ShoppingList`コンポーネント(クラス)を作成し
        - `<ShoppingList />`と記述することで、ショッピングリストをレンダリング
- それぞれのReactコンポーネントはカプセル化され、独立して動作
    - これにより単純なコンポーネントから複雑なUIを作成可能

## おわりに

Reactチュートリアルをスタートしました。
次回も続きます。お楽しみに。

##### [次回] [Django+Reactで学ぶプログラミング基礎(20): Reactチュートリアル(データ受渡しと状態記憶)](https://qiita.com/mingchun_zhao/items/1d71f513626dd8225a32)