cardコンポーネントを作ってみました！
この記事を書いてるのは、エンジニアになるべく日々勉強してる24歳の社会人です！
reactを学習して2ヶ月が経ち何か作りたいと思い、Tinderのクローンを作ろうと思いました！
完成するまでの気づきなどを書いて行こうと思います！
話が長くなりましたが今日はTinderのカードの表示とswipeについて書いて行こうと思います！
importReact,{useEffect,useState}from"react";importTinderCardfrom'react-tinder-card'import'./TinderCard.css';constTinderCards=()=>{const[people,setPeople]=useState([{name:'坂本勇人',url:'https://i.pinimg.com/474x/c6/1f/1c/c61f1c05ac6f98c5f83ddce87ba90ceb.jpg'},{name:'阿部慎之介',url:'https://amd-pctr.c.yimg.jp/r/iwiz-amd/20190416-00000003-baseballos-000-1-view.jpg'}]);return(<div><h1>thider card</h1><divclassName="tinderCards__cardContainer">{people.map((person)=><TinderCardclassName="swipe"key={person.name}preventSwipe={['up','down']}><divstyle={{backgroundImage:`url(${person.url})`}}className="card"><h3>{person.name}</h3></div></TinderCard>)}</div></div>);};exportdefaultTinderCards;Tinderといえばswipeが印象的ですよね！
どうやって実装したのかというとすでにswipeするためのコードがあるんですよね！
下記に記載しておきますのでぜひ確認してみてください
https://www.npmjs.com/package/react-tinder-card
この記事をみてみると、まずはinstallしろと書いてあります！npm install --save react-tinder-card
次にtinder-cardを使うためにimportで呼び出す必要がありますね！import TinderCard from 'react-tinder-card
この記事、とてもわかりやすい！
swipe時に記載
preventSwipe={['up', 'down']}
これだけです！
これは何を書いてあるのかというと、配列の中に書いた文字方向にはswipeできないようにする
要するに左と右にはswipeすることができるということですね！
スタイルについて
.card{position:relative;width:600px;padding:20px;max-width:85vw;height:80vh;border-radius:20px;background-size:cover;background-position:center;/* box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3); */box-shadow:10px10px10pxrgba(0,0,0,0.4);}.card>h3{position:absolute;bottom:10px;color:#fff;right:10px;font-size:36px;}.tinderCards__cardContainer{display:flex;justify-content:center;margin-top:5vh;}.swipe{position:absolute;}cssはこんな感じで調べながらCSSあててみました！
css難しすぎる。。。
vhって何？
viewportのデフォルトが1000pxで、その100分の1っていう認識であってますか？
1vh = 10pxであってますか？
記事でwidthは％表記でheightはvhで表記した方がいいみたいな記事を読みましたが、皆さんはどんな使い分けをされてますでしょうか？
わかる人教えてください！！！
ここで一番勉強になったのが
classNameでtinderCards__cardContainerを指定してます！色々cssをあててるのですが、
画像を横並びして画像を中央に配置してます！
そこに.swipe{position: absolute;}をすることで画像が上に積み重なるので
スワイプすると次の画像が同じ場所から出てくるんです！
こんな使い方があったとは。。。
cssは奥が深すぎる。。。苦手意識があるのでちょっとずつ学んでいきたいと思います！
最後までみていただきありがとうございます！