React シミュレータを作ったときのメモ

• 横スクロールする

• public配下で画像を表示する

• AWS S3で画像を公開する

• タブを使う

横スクロールする

.box { //親要素
  display: flex;
  width: 380px;
  height: 240px;
  overflow-x: scroll;
}

.box div { //小要素
  width: 90%;
  margin: 5px;
  flex-shrink: 0;
}

public配下で画像を表示する

テンプレート文字列を使う

{`${process.env.PUBLIC_URL}/ ファイル名 `}

AWS S3で画像を公開する

Amazon S3でバケット内の画像をすべて公開する方法

バケットを作りパブリックアクセスを全て許可する
バケットポリシーに以下を記載

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::【バケット名】/*"
        }
    ]
}

バケットの中にフォルダを作って画像をアップロードする

タブを使う

npm install react-tabs　モジュールをインストールする

App.jsにインポートする

import { Tab, Tabs, Tablist, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css' 

Tabコンポーネントを利用する

<Tabs>
    <TabList>
        <Tab>カラム１</Tab>
　　　　　　　　　　　　  <Tab>カラム2</Tab>
    </TabList>
    
    <TabPanel><h１>カラム１の中身</h1></TabPanel>
    <TabPanel><h1>カラム２の中身</h1></TabPanel>
  
</Tabs>