[TASK] React 1-3. JSX, コンポーネントの作り方

Wikiの項目

[TASK] React 1-3. JSX, コンポーネントの作り方 https://github.com/darwin-education/training/issues/36

構成

用語確認
JSX
- 例
Component
- 例
- オブジェクト指向とコンポーネント指向
ReactでComponentを作ってみる

用語確認

JSX (JavaScript XML)

JSX は、DeNAによって開発されたウェブアプリケーション向けのプログラミング言語である。ECMAScript 4から影響を受けた構文を持ち、静的型付けなのが特徴。ウェブブラウザ組み込みのスクリプト言語であるJavaScriptのデメリットを解消することを目的に作られている。またJSXのソースコードは最適化されたJavaScriptコードに変換して実行され、同等のJavaScriptプログラムと比較して10%以上高速になるとされる。(引用：Wiki)

正直、理解に難しいです。なので以下に、筆者の解釈を簡単に書きます。JSXはjavascriptの下位互換です。つまり、javascriptの構文をJSX内で使うことはできますが、JSXの構文をjavascriptの中で使うことはできません。なお、JSXで書かれたコードは、javascriptのコードに変換されて実行されます。具体的には、webpack等のビルドツールでコンパイルして必要ファイルをパッケージされ、javascriptとしての働きになります。JSX使用時の処理速度は通常のjavascriptよりも早くなります。

JSXでは、通常の開発者に馴染みのある構文を用いてコンポーネントのレンダリングがされます。もちろん、コンポーネントによってはJSXの上位互換であるjavascriptで書かれている場合もあります。

コンポーネント Component：部品（直訳）

Reactは作成したいUIをコンポーネント(部品)を組み合わせて作ります。大きなコンポーネントは小さなコンポーネントを埋め込む（呼び込む）つくりになります。

Componentの基本構成 Componentを作る場合、React.jsではデータを管理するための２つの変数が用意されています。
- Props : コンポーネント作成時に宣言：変更不可
- State：コンポーネント作成後に宣言：変更可能コンポーネントはなるべく小さなものを作ることがよしとされています。このPropsとStateはパラメータとも呼ばれます。

コンポーネント部分

var ComponentBox = React.createClass({
  render: function() {
    return (
      <div className="ComponentBox"> // … 
        Hello, world! I am a Component.
      </div>
    );
  }
});

コンポーネント呼び出し部分

React.render(
  <ComponentBox />,
  document.getElementById('content')
);

手順

1. JSX

1. 例

JSXでは、classコンポーネントの中で、render内returnに出力部分のコードを記載します。注意すべき点としては、同じレベルの複数の要素は、<div>上に示した要素のような単一のコンテナ要素でまとめる必要があることがあります。また、必ず<.......>のようにコンテナを用意して記載しなくてはいけません。

class App extends React.Component {
  render() {   
    return (　
      <div>　　
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

もちろん、配列も使用することができます。以下はrender内の一部分です。

<Package1>
                <form id="imagelist">
                    <ul>
                        {this.props.images.map((d, i) => {
                        return (
                            <li>
                                <label>{d.name}</label>
                                {d.name}
                            </li>
                        );
                        })}
                    </ul>
                </form>
                </Package1>

出力結果は以下です。

<form id="imagelist">
                    <ul>
　　　　　　　<li>{d.name}</li>
　　　　　　　<li>{d.name}</li>
　　　　　　　.......
　　　　　　　<li>{d.name}</li>
                    </ul>
</form>

2. Component

3. ReactでComponentを作ってみる

さて、JSXとComponentを学ぶ理由は、Reactを使うためです。React(リアクト)とは、Facebookが開発しているJavaScriptのライブラリです。ReactはJSXで記述され、コンポーネント指向のjavascriptライブラリなのです。といっても私自身、なぜReactなのかは理解できていません。需要があるから勉強する。こんな感じです。

以下は、基本的なJSXとjavascriptを用いた、HTML表示のためのreact例です。

//HTML部分
<div id="myReactApp"></div>④

//js部分(コンポーネント)
<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>②
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />①, document.getElementById('myReactApp')③);　　.....⑤
</script>

Greeter class は、Reactのコンポーネントです。これは、プロパティのgreetingを受けています。

まずgreetingプロパティにHello World をセットし（<Greeter greeting="Hello World!" />）（①）、 return内にプロパティの値を埋め込みます（②）このreturn内容は、...,document.getElementById('myReactApp')（③）にあるように、id=myReactAppのdiv内に、表示されます（④）。 The ReactDOM.render メソッドは、Greeter コンポーネントのインスタンスを形成しています（⑤）。

ちなみに、TypeScriptでは以下のように書きます。

これによって、HTMLでは実際に以下のような表示がされます。

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

初心者は、たぶん//HTML部分　//js部分と書かれても、？？？となると思います。なので、index.htmlとjs.jsに分けたサンプルを以下に用意します。

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>resium example</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>

<body>
  <div id="myReactApp"></div>
</body>

</html>

js.js

import React from "react";
import ReactDOM from "react-dom";

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

詰まったところ

課題

Additional context Add any other context or screenshots about the feature request here.

sumakokima2 / resium-sample2