第四項目:Cadre Du Monde

Cadre Du Monde:React-Hooks実装Webアプリケーション
👉 バニラショートカットhttps://github.com/SumiSeo/photo-stocker
👉 Webサイトのショートカットhttps://zealous-engelbart-d1a76f.netlify.app/
📅 勤務期間
2021/8/26 ~ 9/1
🕹 テクノロジーアーキテクチャ
HTML/SCSS
React-Hooks
JavaScript(ES6+)
🙆🏻‍♀️ 主な実施
すべてのページのレイアウトを実現
Fetch Unsplash APIによるデータのロード
React-Hooksを使用した折り畳み式構成部品の実装
Javascriptによるスライドの実装
私が大好きなReaction Hooksでアプリを作りました

検索する写真を入力して、Unsplash APIデータを取得し、それをViewにロードしてデータを表示します.写真をアップロードしたプレイヤーの名前や写真も単独でロードし、マウスを写真にぶら下げることで、情報をより小さく表示することができます.
データの取得にはaxiosライブラリを使用して試みました.メリットはparamsをオプションとして送信できることです:)

これはオルガンの要素です.実際,折りたたみ式複合を行う際にトラブルに遭遇したのはCSSである.USStateでクリックしたindexを追跡するだけで、反応器は簡単です.

const [activeIndex, setActiveIndex] = useState(null);
const onTitleClick = (index) => {
        setActiveIndex(index);
   };

🔍 発生した問題と解決方法(1)
インデックスが変更されるたびにオルガンの長さを増やすために、個別のクラスを作成する必要があります.

 const active = (index === activeIndex) ? "active" : "";

以下はCSSコードです.

.panel {
  position: relative;
  height: 0px;
  background-color: white;
  transition: all 0.2s ease-in-out;
  overflow-y: hidden;
}

.item__info p {
  font-size: 1rem;
}
.active {
  height: 35px;
}

Activeクラスを追加する前に、heightを0に設定してフォントを非表示にし、追加するたびにheightを長くしてフォントを表示します:)

スライドコンポーネントは次のとおりです.chevronボタンをクリックするたびに、これらのスライドをJSに配置し、各位置を変更します.

slides.forEach((slide, i)=>{
            console.log(slide);
            console.log(i);
            slide.style.transform = `translateX(${i * 100}%)`;
}
            

🔍 発生した問題と解決方法(2)
最初はずっとそばにいた-増やすためにdisplay flexを使いたいflexは最終的に1つのコンテナで展開されるため、幅を調整しても必要なスライドを実現できません.しかし、各コンテナにposition:absoluteを設定し、お互いの画像を上書きし、位置を移動することで、私が望むスライドを実現することができます.
👁 プロジェクト後期
フラッシュ画像はサポートされないアプリケーションプロジェクトも独自に作成されています.約1ヶ月前...しかし、私たちが望むホームページを完全に実現することはできません.これはHooks式の考え方(?)中でもう少し熟知したいので、サイトを作るためにいくつかの機能を試してみました:)
実際、私はコードを学ぶ過程でバニラJSに多くの時間を費やしました.他のフレームワークを使わずに、バニラJSだけで多くのことを実現できることを喜んでいます.しかし、Reaction Hooksのように、私の好きなライブラリを使っていると、たまにバニラJS式の問題解決方法よりも違う方法があることに気づきます.特にスライドを作るときは、フック式の考え方ができるのは明らかです.アコーディオンを作るときのように、インデックスを追跡しながらユーザーに見せることができます.しかし、今回の目標はより完璧なアプリケーションを作成することなので、もっとよく知っているバニラJSを使いました...
しかし、今回のプロジェクトを通じて、反応的な考え方に近づくことができる.いずれにしても、私は反応が大好きで、これからも反応にもっと時間をかけて実力を高めることができます.🤩