概要

Reactに挑戦してみる。ただ、参考書籍を読んでるだけだけどね。。。この本すごく分かりやすい！

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

作者: 柴田文彦
出版社/メーカー: インプレス
発売日: 2016/11/25
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

やってみたこと

jsfiddleで動作を確認してみる。
Reactのキーワード５つ
reactのコンポーネントの解説
カスタムコンポーネントを作る

jsfiddleで動作を確認してみる。

html

# react本体の読み込み
<script src="https://fb.me/react-15.3.0.js"></script>

# htmlのdomを扱うため
<script src="https://fb.me/react-dom-15.3.0.js"></script>

# idでelementを設定
<div id="content"></div>

javascript

ReactDOM.render(
    React.DOM.h2(null, 'Hello, React World'),
  document.getElementById('content')
 );

これでRunをクリックすると、、、表示された！

なんか分かりやすそうだな〜！ javascriptのhtmlのid=contentの箇所に、hellow react worldを代入するっていう感じなのかしら。ちなみに、

の中身は、DOMで上書きされるから、上書きされてなくなる。これだけでも結構分かりやすそうな予感！！

でもh2がメソッドなのか！これは見た目的に分かりやすそうだけど、混同しないようにしないとな〜あくまでもjavascriptのメソッドだね。

Reactのキーワード５つ

コンポーネント->reactではコンポーネント単位で考えると分かりやすいらしい。ただ、コンポーネントって何なんだろう。部品とか構成要素という意味か。javascriptのメソッドのようなものだけど、htmlの１つの要素のように振る舞うみたいな感覚かな。
ステート->コンポーネントの内部の変数みたいなもの。たくさんあるとわけがわからなくなるので、少ない方がいいかもしれないとのこと。
プロパティ->コンポーネントに外部から与えられる属性など。htmlでいうと、タグ名の後に与える属性とか。プロパティは、外->コンポーネント内という感じで、内->外という流れは無し。
JSX -> javascriptXMLの略。reactとは全く別の言語だが、一緒に使うとreactの良さが一層引き立つ。
仮想DOM -> 個人的にはこれが、reactの中核のような気がする。簡単に書くと、React->仮想DOM<->DOM -> DOM更新というプロセスを経ることにより、DOMは差分だけを更新するようになるため、動作が速いということだと思われる。

コンポーネンツ解説

javascript

# reactコンポーネントをhtmlに変換して書き込むメソッド
# renderは、htmlの要素と、場所の２つの引数を取る
ReactDOM.render(
# htmlのタグを指定して、コンポーネントを作成するメソッド
# h2はメソッド！h2タグで囲まれた要素を生成している！nullの箇所は、要素の属性を指定できる。
# React.DOMは、コンビニエンスラッパーと言われているらしい。
    React.DOM.h2(null, 'Hello, React World'),
# htmlを書き込む場所をIDで指定する。
  document.getElementById('content')
 );

# h2タグで囲んだ、Hello, React Worldを、contentの箇所に書き込んだ。

これは、以下のように書き換えられる。

ReactDOM.render(
    React.createElement('h2', null, 'Hello, React World'),
    document.getElementById('content')
);

あくまでもReact.DOMは、簡易版。

要素の属性を設定する場合は、以下のような感じで、nullとしていた箇所にそのまま代入してみる。

ReactDOM.render(
    React.DOM.h2({
    style:{
        fontStyle: 'oblique',
      fontFamily: 'Arial',
      color: 'green'
    }}, 
  'Hello, React World'),
  document.getElementById('content')
 );

ここで注意するのは、fontFamilyなど属性の指定は、javascriptでの指定になるところ！cssなどで指定しても反応しないかもしれないから注意！

カスタムコンポーネントを作る

オブジェクト指向言語でのクラスの定義とかに近いものがあるようだ。

とりあえず、やってみる。

javascript

var HelloWorld = React.createClass({
    render: function() {
    return React.DOM.h2(null, 'Hello, React Class');
  }
})

HelloWorldというreactのカスタムコンポーネントを作成する。
renderメソッドで、reactに読み込める形にレンダリングする。
React.DOMで、html要素を作成して、renderメソッドに返す。
そしてこれこそが、カスタムコンポーネント！

最終的に、以下のようなコードになる。

var HelloWorld = React.createClass({
    render: function() {
    return React.DOM.h2(null, 'Hello, React Class');
  }
})

ReactDOM.render(
    React.createElement(HelloWorld),
  document.getElementById('content')
)

React.createElementにカスタムコンポーネントを読み込ませて、h2要素のHello, React Classをhtml要素として返す
カスタムコンポーネントでも、renderを指定する必要があるところがちょっと見落としそうな気がするなぁ。。。

なかなか面白そうで一気に読んでしまいそうやなぁ。。

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Reactに挑戦してみる 1

概要

参考書籍

やってみたこと

jsfiddleで動作を確認してみる。

Reactのキーワード５つ

コンポーネンツ解説

カスタムコンポーネントを作る