スポンサーリンク

「React開発入門」を写経してみる(1)

Javascriptのフレームワーク多すぎ!難しすぎ!Version変更しすぎ!

本当はRIOTをやりたかった。

しかし、RIOTは、2016年12月現在、Version3.0になり、日本語の文献がほとんどないので、Reactの本なら、日本語の本がAmazonで売っていたので、以下の本を買ってみた

この本には、Reduxの解説はほとんど無いが、まずは、Reactにこの本で慣れておきたい。やってみる。

(環境)
Windows8.1
Chrome
Visual Studio Code

(1)JsFilddleというサイトがあるらしい。
Cloud9の超簡易バージョンのような感じ。
HTML, CSS, Javascriptを入力すると、すぐにそのまま結果を見ることができる。

https://jsfiddle.net/
image

メールアドレスさえ入力すれば、SignUpできる。
ログインすると、コードが保存できる。

image

とりあえず、上記本Page19を写経して、ReactでHello World!できたらしい。

HTMLのところは、

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

が不要のよう。不思議。。。

ちなみに、上記コードをローカル環境でやってみると、以下のような感じ。

image image

image

image image

(2)カスタムコンポーネント

オブジェクト指向?

「クラスの定義」と、「クラスからインスタンスを作成して利用する」

「HTML要素を利用したコンポーネントの定義」と、「その要素の貼り付け」

image

(3)文字列を受け取って表示するコンポーネント

Reactのコンポーネントが外部からデータを受け取るために利用するのが「プロパティ」

image

createElementメソッドの第1引数として、カスタムコンポーネントを指定

第2引数として、nameという名前のプロパティに、文字列の値「React」を与えている。

image image

(4)ユーザーからの入力を受け付けるコンポーネント

image image

電卓を作りたい

数式を入力するinput要素と、結果を表示するh2要素を並べる。

image

「ステート」とは、コンポーネントをクラスとして考えたときに、その中で宣言される変数のようなもの。

image image

(5)コンポーネントのライフサイクル

このあたりからだんだん雲行きが怪しくなってくる。

あまり考えずに写経。

Chromeブラウザの右上のボタン>「その他のツール」>「Javascriptコンソール」

image

image image

image

スポンサーリンク