再開!2

1492 ワード

craフォルダ構造


public
仮想DOMの応答プログラムを使用するには、実際のDOMが必要です.すなわち,仮想DOMを含む空殻html,すなわちその空殻が存在するフォルダが必要である.(index.html)
src
反応開発を行うメインフォルダです.

index.js

ReactDOM.render(<App />, document.getElementById('root'));
App.jsで生成された応答コードにインデックスを作成します.jsからロードするとpublicのindexになります.htmlのidはルート位置に置きます.

App.js


Appというクラスを作成すると、反応素子が継承されます.これで反応素子法を用いることができる.render()の方法は、スクリーン上でhtmlビューを生成することができる反応素子である.returnで受信した値は、後でhtmlコードに変換されます.
このようにして生成されたAppクラスは、export構文を使用してエクスポートされる.
リファレンス
https://medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-part-3-a76a727447d3

TIL


YouTubeの映像資料を参考に、反応の基礎を素早く復習しています.map()関数を用いて、商品リストページなど、多くのページで見られる重複要素を繰り返し、商品の要約情報を繰り返しリストする機能を実現した.

movies配列の各要素はmapを介して個々にアクセスし、jsx構文に別々に配置されます.
実際、上のコードスクリーンショットのrenderMoviesという変数は私にとって新しい部分です.以前はプロジェクトで実施した経験があるが,map関数を変数として単独で管理することは考えられなかった.このようにmapにより繰り返し出現する部分も変数として管理され、画面上の情報のリターンドア内部がより清潔であり、可読性がより良いことが確認できる.