未分類

GPT-3

ankle0614@gmail.com
npx create-react-app gpt3_jsm

componentsフォルダには複数の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
記事URLをコピーしました