しびら

技術ネタのメモとか。

learnyoureactでReactを学ぶ

   

これはnpm i -g learnyoureactで学べる内容のメモ書きです。わからない時に参照すると使えるかもしれませんが、基本はご自身でコマンド叩いて勉強されると良いかと思います。

Reactとは

ReactはFacebookが開発しているJavaScriptライブラリで、MV*フレームワークでいうViewの支援を行います。

Hello World

ディレクトリの用意とpackage.jsonの作成

reactモジュールのインストール

program.jsを作ります。

program.jsには以下を記述。program.jsはサーバのコードになっており、/にアクセスがあるとviews/index.jsxにアクセスするようになります。

次にviews/index.jsxを作成します。

ファイルが出来たら、以下のコマンドを実行することでサーバが起動します。

起動できなかった場合、既にポートが使われている場合などあるのでエラー文言を元に調べましょう。

サイトにアクセスします。

Hello Worldが表示されました。初めてのReactだ!

Component

reactはcomponentという単位で部品を分割できるようです。views/index.jsxを以下のように書き換えます。HTMLの属性名がclassではなくclassNameとなっている点を注意したほうが良さそうですね。classのままの記述だと削除されてしまうようです。(JavaのJSPのstyleClassみたいな)

TodoBoxはTodoList, TodoFormというタグを記述されていますが、各タグはその下の行からclassとして定義されています。

この状態で再度ブラウザにアクセスすると以下のようになります。

Props

親から子のコンポーネントに値を渡す方法についてです。新しくTodoクラスを作成してTodoクラスを呼び出すように変更しています。また、Todoクラスはtitle属性とテキストでプロパティを含めています。

ここで注意すべきはstyleの記法が通常のHTMLと少し異なる点でしょうか。

 

PropTypes

参照する値に制約を設けます。

一番下に間違ったTodoを追記します。

Todoに制約を設けます。

実行するとWarningが表示されます。

titleの中身は必ず含まれている事と、数値であることの2つの制約を設けたのでエラーが表示されました。Todoに正しい属性を追加して、制約をstringにする変更を加えました。

 

State

変更可能な値を定義します。state.checkedを追加し、handleChangeでstate.checkedを変更するメソッドを作成しています。

クリックするとチェックボックスが切り替わりました。(ただしstateの変更を確認できない。。8問目ISOMORPHICで実はstateは機能していないことが説明されてました。)

 

CSS

共通のCSS部分をstyle変数にまとめます。

style={{border:”1px solid black”}} で設定していましたが、styleオブジェクトを定義することでstyle={tableContent.style} と書けるようになっていますね。

 

Props_From_Server

サーバからComponentに値を渡します。

次に、サーバサイドのレスポンスにtodoListの値を入れます。

サーバサイドのレスポンスに従って値が変更するようになりました。

 

 

続きます。

その他

Reactドキュメント
https://facebook.github.io/react/docs/getting-started-ja-JP.html

JSXシンタックス
https://facebook.github.io/react/docs/jsx-in-depth-ja-JP.html

 

 

 

 

 

 

 - React , , , ,