FREITAG-最初のプロジェクトレビュー

チーム名:💃 DIENSTAG 🕺

FREITAGはドイツ語で金曜日という意味です
私たちはこれに着目して、DIENTAGをチーム名にすることにしました.火曜日という意味です.
どうしたんですか.
これは最もクールな1週間で、ほほほ
フロントエンド:2人
バックエンド:3人
フロントは他のチームより2人多いので、もっと蟻のようにコードされているはずです.
隣に座って、すぐに意見を交換し、すぐに要求と応答を出すことができます.
もっと気持ちがいいと思います.

私が演じた役は

メインレイアウト設定
Nav Bar-レイアウトとモードウィンドウ
カタログページ-詳細ページは、リストを突破する特殊な構造であり、詳細ページは必要ありません.
フィルタ機能
ニュースレター-レイアウト

印象的な機能🙌

カタログページを作るには多くの悩みが必要です.
まず、バックエンドから完全なデータを一度に受信し、画像をクリックすると、画像の詳細な説明をフィルタリングし、新しいstateに保存し、stateを詳細ボックスコンポーネントにマッピングします.
射出された.(回転するより射た方がいい)
注意事項

商品をクリックすると、詳細を含む箱がリストから飛び出します.

->一般カタログのように、最初の行から最後の行にデータを移動すると、ハイライトされた詳細ボックスを実現するのは難しいです.

第1行商品をクリックすると、第1行が下に移動し、第2行画像をクリックすると、第2行が下に移動し、第3行画像をクリックすると、第3行が下に移動し、対応するクリック画像の詳細ボックスが展開されます.

の最初の行で画像をクリックし、詳細ボックスが表示されたら、別の行(2行目または3行目)の画像をクリックすると、既存の開いている最初の行の詳細ボックスが閉じ、新しい行で詳細ボックスが開きます.

私の論理はこうです.
idを基準に

商品のデータを1~8回、9~16回、17~24回の3回に分けた.
もちろん3回回りましたが、そのrange範囲をまた配列に入れて簡単に再包装しました.

では、素子についてお話しします.
構成部品があります.
画像をマップに変換する構成部品、詳細ボックス構成部品が含まれます.
構造は、イメージ要素の下で条件付きで詳細ボックス要素をレンダリングした状態です.
画像をクリックするとstateがtrueの場合、詳細ボックスが開きます.
では、どうやって詳しい箱を開けますか?
画像をクリックすると、画像のid値が得られます.
そのid値を最初に受け取ったすべての商品データからフィルタリングし、新しい配列に入れます.
では、その配列には何が入っていますか?
もちろん私がクリックした画像の詳細も含まれます.
配列をclikedDataとして変数に格納します.
新しい状態に保存します.

this.setState({descData : clikedData})

これで、この配列を詳細ボックスのある素子に渡すだけでいいです.
もしそうなら、低descDataは商品データを1つしか入力しません.
また、私がどの行の画像をクリックしても、descDataは私がクリックした画像の商品データで
常に置換されるため、どの行の画像をクリックしても詳細なボックスしか展開できません.
いいですよ.
まだ改善すべき点がたくさんあります.
Refactoring!!

改善したいところ👍

フロントからfilterを使用して詳細をフィルタするのではなく、
バックエンドと通信して画像をクリックすると、バックエンドで説明情報を受信するために説明情報を再パッケージします.

Context APIとの面会🖐

一緒にいるフロントチームメンバーがお勧めするcontextjsを制御できるようになった.
stateを渡す前に、私たちはお互いに寄り添う親子関係に簡単に渡すことができます.
そうでなければ、
たとえば、構成部品が遠い親子関係です.
兄弟関係であれば、stateを他の人に渡すのは大変です.
このような状況を解消するコンテキスト.jsと知り合ってから、私のコード生涯は違います.
グローバルな範囲でstateを管理することができ、私が行きたい場所でstateを私に渡すことができます.
素晴らしいですね.
Reduxも習いたくなりました.
これは本当に必要性を感じています.勉強とただの勉強の違いは大きいです.
(お勧めのチームメンバーに感謝します🤓👍)
同じフロントチームのメンバーがショッピングバスケットをよく設計していて、私も彼の論理を見ていろいろなことを学んだ時間です.
学べば学ぶほど学びたくなる.そして、このような学習意欲は初めてのようだ.
これからは持久戦で疲れません.
ゆっくり歩いても、問題を正しく把握する習慣を身につけなければなりません.

第1戦を終える

どのようにあるプロジェクトを完成しても、いつも残念な思いを残します.
こうすればよかったのに、次の項目を繰り返さなければよかったと後悔.
私は本当にこのプロジェクトのために焼いたと言える.
2試合目も頑張らなければならないが、同じエネルギーを発揮できるか心配だ.
たいした結果ではありませんが、私がコードした最初のプロジェクトとして満足しています.
プロジェクトはいいと思います.何かを創造し実現するのは面白い.
もっと上手になりたいという欲求が生まれた.
2週間ずっと一緒に食事をしたり、会議をしたり、通信をしたり、孤軍奮闘する隊員たちも多くの感情を生み出し、最終日が終わる時間の気持ちは本当に奇妙だ.
PMとしても足りない部分があるのは残念だけど
良い経験として、後日の残念な様子を補えばいいのです.
残りの時間も疲れず、走り続けましょう!!🙏