Reactで挨拶

この記事は社内勉強会用として作られました。
Pro Reactという本を読みながら進みます。

本の内容と異なる部分

• 本のサンプルをESlintとAirbnbのスタイルガイドに合わせて直しました。
• create-react-appを用いてプロジェクトを生成しました。
• node.jsを含めてreactとreact-dom、そして本で紹介されたライブラリーを最新バージョン（2017.6.18）に合わせて直しました。

本のサンプルはここで確認してください。

Vimの設定

開発ツールとしてVimを使います。
下記のファイルでVimの環境設定を行なってください。
ここではReactを学ぶことが目的なので、Vimの説明はしません。

% cd ~
% git clone https://gitlab.com/devtopia/dotfiles.git
% ln -sf dotfiles/.vim .vim
% ln -sf dotfiles/.vimrc .vimrc
% ln -sf dotfiles/.eslintrc .eslintrc
% ln -sf dotfiles/.tern-project .tern-project

# Vimの設定ファイルからフラグインをインストール
% vim .vimrc
:PlugInstall!

rubyとjavascriptの場合はrubocopとeslintのスタイルガイドを適用しています。
rubocopとeslintが先に設置されている必要があります。
gemとnpm（またはyarn）でそれぞれ設置してください。
xcodeが設置されてない方は次のコマンドで設置してください。

% sudo xcode-select --install

自分が直接設定したい場合はVimでReactの開発を楽々という記事を参考にしてください。

関連記事

• Reactのスタート
• Reactのプロジェクト
• Reactで挨拶
• ReactでTrelloみたいなToDoリスト＜1＞ props
• ReactでTrelloみたいなToDoリスト＜2＞ state
• ReactでTrelloみたいなToDoリスト＜3＞ prop-types
• ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper

第一歩、挨拶

src/components/Hello.js

diff --git a/src/components/Hello.js b/src/components/Hello.js
new file mode 100644
index 0000000..1dc66a9
--- /dev/null
+++ b/src/components/Hello.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+class Hello extends React.Component {
+  render() {
+    return (
+      <h1>Hello World</h1>
+    );
+  }
+}
+
+export default Hello;

src/index.js

diff --git a/src/index.js b/src/index.js
index 53c7688..219b78a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Hello from './components/Hello';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';

-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Hello />, document.getElementById('root'));
 registerServiceWorker();

stateless componentとは

Reactのcomponentはstateful componentとstateless componentで分けられる。
stateless componentとはその名の通り状態を持ってないcomponentを言う。
ここではとりあえずrender()だけを持ってるcomponentだと考えても構わない。
状態を持ってないcomponentについてはfunctionやarrowを使うのが推奨されていて、class式を使うとeslintからエラーが出る。

• functionを使う場合、class式よりシンプルになる。

src/components/Hello.js

import React from 'react';

function Hello() {
    return (
      <h1>Hello World</h1>
    );
}

export default Hello;

• arrow関数を使うともっとシンプルになる。

src/components/Hello.js

import React from 'react';

const Hello = () => <h1>Hello World</h1>;

export default Hello;

javascriptの理解度によって異なるが、慣れていない人にはclass式がわかりやすいと思う。
ここではeslintのruleでstateless function部分をdisableした。

Destructuring assignment（分割代入）

src/components/Hello.js

diff --git a/src/components/Hello.js b/src/components/Hello.js
index 1dc66a9..bae48e4 100644
--- a/src/components/Hello.js
+++ b/src/components/Hello.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Component } from 'react';

-class Hello extends React.Component {
+class Hello extends Component {
   render() {
     return (
       <h1>Hello World</h1>

Dynamic Values

src/components/Hello.js

diff --git a/src/components/Hello.js b/src/components/Hello.js
index bae48e4..66b65fc 100644
--- a/src/components/Hello.js
+++ b/src/components/Hello.js
@@ -2,8 +2,9 @@ import React, { Component } from 'react';

 class Hello extends Component {
   render() {
+    const place = 'World';
     return (
-      <h1>Hello World</h1>
+      <h1>Hello {place}</h1>
     );
   }
 }

var、let、constについて

var
グローバルとローカルのscopeを区分するために使っていた。
同じ変数名でも重複で宣言できる。
ES6ではletやconstを使う。原則varは使わない。
let
変数を宣言する場合に使う。
同じ変数名で重複宣言はできない。エラーになる。
const
値が変わらない場合に使う。
数値や文字列を代入する時使うことだと勘違いしやすいが、class式を使ったオブジェクトについてもconstantだど読んでいる。
（案外使う場合が多いということだ。）

Composing Components（props）

Reactのコンポーネント間受け渡しには２種類がある。

• props
• state

stateについては後で扱う予定だ。
ここではpropsについて簡単に触れてみよう。

props（properties）

propsはコンポーネントの構成情報である。
親コンポーネントから子コンポーネントへデータ（props）を渡すときに使う。
親から子への一方通行で子コンポーネントから値の変更はできない。

src/components/GroceryList.js

diff --git a/src/components/GroceryList.js b/src/components/GroceryList.js
new file mode 100644
index 0000000..6fe4c05
--- /dev/null
+++ b/src/components/GroceryList.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import ListItem from './ListItem';
+
+class GroceryList extends Component {
+  render() {
+    return (
+      <ul>
+        <ListItem quantity="1" name="Bread" />
+        <ListItem quantity="6" name="Eggs" />
+        <ListItem quantity="2" name="Milk" />
+      </ul>
+    );
+  }
+}
+
+export default GroceryList;

src/components/ListItem.js

diff --git a/src/components/ListItem.js b/src/components/ListItem.js
new file mode 100644
index 0000000..8285ebc
--- /dev/null
+++ b/src/components/ListItem.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+class ListItem extends Component {
+  render() {
+    return (
+      <li>{this.props.quantity} x {this.props.name}</li>
+    );
+  }
+}
+
+export default ListItem;

src/index.js

diff --git a/src/index.js b/src/index.js
index 219b78a..d690d95 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Hello from './components/Hello';
+import GroceryList from './components/GroceryList';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';

-ReactDOM.render(<Hello />, document.getElementById('root'));
+ReactDOM.render(<GroceryList />, document.getElementById('root'));
 registerServiceWorker();

props.children

src/components/GroceryList.js

diff --git a/src/components/GroceryList.js b/src/components/GroceryList.js
index 6fe4c05..9a419b3 100644
--- a/src/components/GroceryList.js
+++ b/src/components/GroceryList.js
@@ -5,9 +5,9 @@ class GroceryList extends Component {
   render() {
     return (
       <ul>
-        <ListItem quantity="1" name="Bread" />
-        <ListItem quantity="6" name="Eggs" />
-        <ListItem quantity="2" name="Milk" />
+        <ListItem quantity="1">Bread</ListItem>
+        <ListItem quantity="6">Eggs</ListItem>
+        <ListItem quantity="2">Milk</ListItem>
       </ul>
     );
   }

src/components/ListItem.js

diff --git a/src/components/ListItem.js b/src/components/ListItem.js
index 8285ebc..f3904bb 100644
--- a/src/components/ListItem.js
+++ b/src/components/ListItem.js
@@ -1,11 +1,17 @@
 import React, { Component } from 'react';

 class ListItem extends Component {
   render() {
     return (
-      <li>{this.props.quantity} x {this.props.name}</li>
+      <li>{this.props.quantity} x {this.props.children}</li>
     );
   }
 }

 export default ListItem;