この記事に含まれるもの

React のコンポーネントの入れ子構造と CSS grid

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/App.css

#layoutContainer {
  display: grid;
  margin: 0;
  min-height: 100vh;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 100px 1fr;
}

#layoutContainer .header {
  grid-row: 1;
  grid-column: 1 / span 2;
  background: pink;
}

#layoutContainer .main {
  grid-row: 2;
  grid-column: 2;
  background: lightgreen;
}

#layoutContainer .nav {
  grid-row: 2;
  grid-column: 1;
  background: lightgrey;
}

#layoutContainer .footer {
  grid-row: 3;
  grid-column: 1 / span 2;
  background: lightblue;
}

.weather {
  width: 200px;
  float: left;
  padding-left: 20px;
}

button.link-style-btn{
  cursor: pointer;
  border: none;
  background: none;
  color: #0033cc;
}
button.link-style-btn:hover{
  text-decoration: underline;
  color: #002080;
}

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/App.js

import './App.css';
import { useState } from "react";

// 拡張子 js mjs jsx ts tsx は省略できる。将来 TypeScript 化しても import を変えなくていい
import Header from './Header'
import Menu from './Menu'
import Body from './Body'
import Footer from './Footer'

function App() {
  const [CITIES, updateCities] = useState([]);

  const callbackFromMenu = (cities) => {
    updateCities(cities);
  };

  return (
    <div id="layoutContainer">
      {/* 子コンポーネントに、JSXを渡せる。子コンポーネント側からは、引数 children で取得できる */}
      <div className="header">
        <Header>
          <h1>Weather Information</h1>
        </Header>
      </div>
      <div className="nav"><Menu callback={callbackFromMenu}/></div>
      <div className="body"><Body cities={CITIES}/></div>
      {/* 子コンポーネントに、タグ属性でパラメータを渡せる(props)。 props には Javascript (配列や関数) も渡せる */}
      <div className="footer"><Footer name="MYCompay" year="2024"/></div>
    </div>
  );
}

export default App;

Header 子コンポーネントの出力内容を親コンポーネントで設定する

Footer 子コンポーネントに props を渡す/イベント処理(基礎編)

Menu 親コンポーネントにCallback

Body API呼び出し、リスト処理モロモロ

Screen Shots

jp.png
 
cn.png
 
us.png
 
eu.png

HTML#React


添付ファイル: fileus.png 106件 [詳細] fileeu.png 111件 [詳細] filecn.png 112件 [詳細] filejp.png 116件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2024-01-14 (日) 00:43:33 (93d)
Short-URL: https://hondou.homedns.org:443/pukiwiki/pukiwiki.php?cmd=s&k=5ec7efceef
ISBN10
ISBN13
9784061426061