7月29日
しばらく、ああでもないこうでもないとコードをイジって試していたが、上手く行かず。結局今の自分に足りないのはReactの知識だということがわかる。半端に理解してるものの何をどうして良いかがわかっていなくて、アタマの中がこんがらがってしまう。寝る間際にReactの公式ドキュメントを眺めていたら、内容がアタマにすらすら入っていくので、ちょっと驚いた。コレだという確信。色々かじりつつ回り回って本当のスタートラインにたどり着いた感じだ。しばらくReact公式ドキュメントに取り組もうと思う。
学んでいること
Reactを使う環境構築で、最小限のモノは、
- HTMLにDOMコンテナを追加する
- scriptタグを追加する
- Reactコンポーネントを追加する
以上3ステップで、できると。なんだ。そうだったんだ。
DOMコンテナって<div></div>
要素で囲んだモノ。
scriptタグは以下の3つ
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="like_button.js"></script>
で、別ファイルを作り、コードを書くと。ただし<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
とのこと。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
このタグを追加し、任意の <script>
タグに type="text/babel"
属性を持たせることで、その <script>
タグの中では JSX が使えるようになると。じゃあ、JSXってbabelで変換するための目印という理解でいいか。公式ドキュメントにはJSXはReact"要素"を生成します
とある。タグで囲んだ全体がJSXと理解。
ここから引用ばかりになるけれども琴線に触れたところをピックアップしていく。若干のコメント添えて。
この中にあるもの全てが React DOM によって管理されることになるので、“ルート” DOM ノードと呼ぶことにしましょう。
React だけで構築されたアプリケーションは、通常ルート DOM ノードをひとつだけ持ちます。既存のアプリに React を統合しようとしている場合は、独立したルート DOM ノードを好きなだけ持つことができます。
ルートDOMノード単位で大まかな構成を考えることができるはず。
React 要素をルート DOM ノードにレンダーするには、まず ReactDOM.createRoot() に DOM 要素を渡し、root.render() に React 要素を渡します
React要素、DOM要素、ちゃんとどんな形で、何を意味するのか、区別しよう。例では以下のメソッドを渡していた。React要素の方はJSXで定義した変数を渡していた。
概念的には、コンポーネントは JavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。
任意の入力を受け取ってReact要素を返すのがコンポーネント。ホンマに関数じゃないか。
React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。
属性と子要素は例での中では{name: 'Sara'}
として出てくる。これがpropsとして渡されている。
典型的には、新規の React アプリは階層の一番上に単一の App コンポーネントを持っています。しかし、既存のアプリに React を統合する場合は、Button のような小さなコンポーネントからボトムアップで始め、徐々にビューの階層構造の頂上に向かって進んでいってもよいでしょう。
ノードから考えるんじゃなくて、ボトムアップでいった方がいいのか?自分のアプリの場合。
全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。
心しておかないと、すぐ忘れそう。