Gericht Restaurant
ankle0614@gmail.com
SPORT in Life~
npx create-react-app youtube_clone
npm install --legacy-peer-deps
npm i react-router-dom
npm i axios
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install @mui/icons-material
npm install -D tailwindcss postcss autoprefixer
rafce
Stackは横並びに設定し、サイズがmd以上の時には方向を縦にします。
<Stack
direction="row"
sx={{
overflowY: "auto",
height: { sx: "auto", md: "95%" },
flexDirection: { md: "column" },
}}
>
選択したカテゴリーの名前をsetSelectedCategoryを使って設定。
<button
className="category-btn"
onClick={() => setSelectedCategory(category.name)}
style={{
background: category.name === selectedCategory && "#FC1503",
color: "white",
}}
key={category.name}
>
選択したカテゴリーとカテゴリーの名前が一致した場合iconの色を白に、選択していないものは赤に
<span style={{ color: category.name === selectedCategory ? "white" : "red", marginRight: "15px" }}>
{category.icon}
</span
Subscribe to Testを選択しPlanを選択してください。SubscribeしないとAPIを使用することができません。
utilsフォルダ直下にfetchFromAPI.jsを作成
下記RapidAPI youtube v3のCode Snippetsからoption部分をコピーします。
.envファイル作成