CreateReactApp まとめ

single-page Reactを利用する。

https://create-react-app.dev/docs/getting-started

プロジェクトを作成する。

npx create-react-app spa-react

※spa-reactはプロジェクト名

サーバに関するデフォルトコマンド

開発サーバを開始する。

npm start

デフォルトは3000ポート

本番用の静的ファイルにバンドルする。

npm run build

テストランナーを開始する。

 npm test

絶対パスの指定設定

https://create-react-app.dev/docs/importing-a-component

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

インストール

ルーター

npm install react-router-dom

mui(ユーザーインターフェイス)

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material 

便利な記法

<>と</>を利用

function Home() {
    return (
        <>
          <MenuAppBar/>
        </>
    );
}

export default Home;

function MenuAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
    ....(省略)
}

アロー関数

const 定数 = () => {}

例

const [isLogin, setIsLogin] = useState(false);

const login = () => {
  setIsLogin(true)
}

アロー関数で定義した定数を利用

例

  const [isLogin, setIsLogin] = useState(false);

  /**
   * ログイン処理
   */
  const login = () => {
    setIsLogin(true)
  }

  /**
   * ログアウト処理
   */
  const logout = () => {
    setIsLogin(false)
  }

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Home
          </Typography>
          {!isLogin && <Button color="inherit" onClick={login} >Login</Button>}
          {isLogin &&<Avatar sx={{ bgcolor: deepOrange[500] }}>T</Avatar>}
          {isLogin && <Button color="inherit" onClick={logout}>Logout</Button>}
        </Toolbar>
      </AppBar>
    </Box>
  );
}

状態(useState)

a)親子それぞれが状態をもっており、親から子のステータスを変更した場合

ppBar子がLoginArea

function MenuAppBar() {
  const [loginState, setloginState] = useState(true);
  ...(省略)
  <LoginArea state={{isLogin:loginState}} isLogin={loginState}/>
  
function LoginArea(props){
  const [isLogin, setIsLogin] = useState(props.isLogin);

  /**
   * ログイン処理
   */
  const login = () => {
    setIsLogin(true)
  }

  return (
    <>
      {!isLogin && <Button color="inherit" onClick={login} >Login</Button>}
      ...(省略)
    </>
  )
}

親が状態を持っており、子から親へ更新する場合

function MenuAppBar() {

  const [isLogin, setIsLogin] = useState(false);

  return (
	　....(省略)
          <LoginArea setIsLogin={setIsLogin} isLogin={isLogin}/>
	  ....(省略)
  );
}


function LoginArea({setIsLogin,isLogin}){
  /**
   * ログイン処理
   */
  const login = () => {
    setIsLogin(true)
  }

  /**
   * ログアウト処理
   */
  const logout = () => {
    setIsLogin(false)
  }

  return (
    <>
      {!isLogin && <Button color="inherit" onClick={login}  >Login</Button>}
      {isLogin &&<Avatar sx={{ bgcolor: deepOrange[500] }}>T</Avatar>}
      {isLogin && <Button color="inherit" onClick={logout}>Logout</Button>}
    </>
  )
}