Gericht Restaurant
ankle0614@gmail.com
SPORT in Life~
GPT-3
ankle0614@gmail.com
npx create-react-app gpt3_jsmcomponentsフォルダには複数のjsxファイルがあります。
これらをApp.jsにまとめてimportするためにはindex.jsにexportを書くことで
export { default as Article } from './article/Article';
export { default as Brand } from './brand/Brand';
export { default as CTA } from './cta/CTA';
export { default as Feature } from './feature/Feature';
export { default as Navbar } from './navbar/Navbar';CTA.jsx、Brand.jsx、Navbar.jsxを一行でimportできる。
import { CTA, Brand, Navbar } from './components'; const [toggleMenu, setToggleMenu] = useState(false);trueの時
ToggleMenuがtrueの時はRiCloseLineアイコンが表示されており、クリックしたときにfalseに変化し、ハンバーガーメニューが表示される。
<RiCloseLine color="#fff" size={27} onClick={() => setToggleMenu(false)} /> falseの時
ToggleMenuがfalseの時はハンバーガーメニューが表示されています。
<RiMenu3Line color="#fff" size={27} onClick={() => setToggleMenu(true)} />toggleMenu
? <RiCloseLine color="#fff" size={27} onClick={() => setToggleMenu(false)} />
: <RiMenu3Line color="#fff" size={27} onClick={() => setToggleMenu(true)} />}550px以下
sign inとsignupボタンを表示させます。
@media screen and (max-width: 550px) {
.gpt3__navbar-menu_container-links-sign {
display: block;
}
}550px~700px
700px~1050px
ABOUT ME
