■P064

────────────────
const App = () => {

  return (
    <div>

      <header>
        <h1>React入門</h1>
        <nav>
          <ul>
            <li><a href="#jsx">JSX</a></li>
            <li><a href="#component">コンポーネント</a></li>
            <li><a href="#event">イベント</a></li>
          </ul>
        </nav>
      </header>

      <main>
        <h2 id="jsx">JSX</h2>
        <p>JSXについて解説を行います。</p>
        <h2 id="component">コンポーネント</h2>
        <p>コンポーネントについて解説を行います。</p>
        <h2 id="event">イベント</h2>
        <p>イベントについて解説を行います。</p>
      </main>

      <footer>
        <nav>
          <ul>
            <li><a href="#jsx">JSX</a></li>
            <li><a href="#component">コンポーネント</a></li>
            <li><a href="#event">イベント</a></li>
          </ul>
        </nav>
        <small>&copy; 2025</small>
      </footer>

    </div>
  );
};

export default App;
────────────────


■P066

────────────────
const Navigation = () => {
  return (
    <nav>
      <ul>
        <li><a href="#jsx">JSX</a></li>
        <li><a href="#component">コンポーネント</a></li>
        <li><a href="#event">イベント</a></li>
      </ul>
    </nav>
  );
};

const App = () => {

  return (
    <div>

      <header>
        <h1>React入門</h1>
        <Navigation />
      </header>

      <main>
        <h2 id="jsx">JSX</h2>
        <p>JSXについて解説を行います。</p>
        <h2 id="component">コンポーネント</h2>
        <p>コンポーネントについて解説を行います。</p>
        <h2 id="event">イベント</h2>
        <p>イベントについて解説を行います。</p>
      </main>

      <footer>
        <Navigation />
        <small>&copy; 2025</small>
      </footer>

    </div>
  );
};

export default App;
────────────────


■P067

────────────────
const Header = () => {
  return (
    <header>
      <h1>React入門</h1>
      <Navigation />
    </header>
  );
};

const Footer = () => {
  return (
    <footer>
      <Navigation />
      <small>&copy; 2025</small>
    </footer>
  );
};

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li><a href="#jsx">JSX</a></li>
        <li><a href="#component">コンポーネント</a></li>
        <li><a href="#event">イベント</a></li>
      </ul>
    </nav>
  );
};

const App = () => {
  return (
    <div>
      <Header />

      <main>
        <h2 id="jsx">JSX</h2>
        <p>JSXについて解説を行います。</p>
        <h2 id="component">コンポーネント</h2>
        <p>コンポーネントについて解説を行います。</p>
        <h2 id="event">イベント</h2>
        <p>イベントについて解説を行います。</p>
      </main>

      <Footer />
    </div>
  );
};

export default App;
────────────────


■P070

src/components/Navigation.jsx
────────────────
const Navigation = () => {
  return (
    <nav>
      <ul>
        <li><a href="#jsx">JSX</a></li>
        <li><a href="#component">コンポーネント</a></li>
        <li><a href="#event">イベント</a> </li>
      </ul>
    </nav>
  );
};

export default Navigation;
────────────────


src/components/Header.jsx
────────────────
import Navigation from "./Navigation";

const Header = () => {
  return (
    <header>
      <h1>React入門</h1>
      <Navigation />
    </header>
  );
};

export default Header;
────────────────


■P071

src/components/Footer.jsx
────────────────
import Navigation from "./Navigation";

const Footer = () => {
  return (
    <footer>
      <Navigation />
      <small>&copy; 2025</small>
    </footer>
  );
};

export default Footer;
────────────────

src/App.jsx
────────────────
import Header from "./components/Header";
import Footer from "./components/Footer";

const App = () => {

    return (
    <div>

      <Header />

      <main>
        <h2 id="jsx">JSX</h2>
        <p>JSXについて解説を行います。</p>
        <h2 id="component">コンポーネント</h2>
        <p>コンポーネントについて解説を行います。</p>
        <h2 id="event">イベント</h2>
        <p>イベントについて解説を行います。</p>
      </main>

      <Footer />

    </div>
  );
};

export default App;
────────────────


■P072

────────────────
<main>
  <h2 id="jsx">JSX</h2>
  <p>JSXについて解説を行います。</p>
  <h2 id="component">コンポーネント</h2>
  <p>コンポーネントについて解説を行います。</p>
  <h2 id="event">イベント</h2>
  <p>イベントについて解説を行います。</p>
</main>
────────────────


■P073

src/components/Content.jsx
────────────────
const Content = props => {
  return (
    <>
      <h2 id={props.id}>{props.title}</h2>
      <p>{props.description}</p>
    </>
  );
};

export default Content;
────────────────


■P074

src/App.jsx
────────────────
import Header from "./components/Header";
import Footer from "./components/Footer";
import Content from "./components/Content";

const App = () => {

  return (
    <div>

      <Header />

      <main>
        <Content id="jsx" title="JSX" description="JSXについて解説を行います。" />
        <Content id="component" title="コンポーネント" description="コンポーネントについて解説を行います。" />
        <Content id="event" title="イベント" description="イベントについて解説を行います。" />
      </main>

      <Footer />

    </div>
  );
};

export default App;
────────────────

src/App.jsx
────────────────
import Header from "./components/Header";
import Footer from "./components/Footer";
import Content from "./components/Content";

const App = () => {
  const contents = [
    {
      id: "jsx",
      title: "JSX",
      description: "JSXについて解説を行います。",
    },
    {
      id: "component",
      title: "コンポーネント",
      description: "コンポーネントについて解説を行います。",
    },
    {
      id: "event",
      title: "イベント",
      description: "イベントについて解説を行います。",
    },
  ];

  return (
    <div>

      <Header />

      <main>
        {contents.map(content => (
          <Content key={content.id} {...content} />
        ))}
      </main>

      <Footer />

    </div>
  );
};

export default App;
────────────────


■P076

src/components/Content.jsx
────────────────
const Content = props => {
  const { id, title, description } = props;
  return (
    <>
      <h2 id={id}>{title}</h2>
      <p>{description}</p>
    </>
  );
};

export default Content;
────────────────


■P078

src/components/Layout.jsx
────────────────
import Header from "./Header";
import Footer from "./Footer";

const Layout = props => {
  return (
    <div>

      <Header />

      <main>
        {props.children}
      </main>

      <Footer />

    </div>
  );
};

export default Layout;
────────────────


■P079

src/App.jsx
────────────────
import Layout from "./components/Layout";
import Content from "./components/Content";

const App = () => {

  const contents = [
    {
      id: "jsx",
      title: "JSX",
      description: "JSXについて解説を行います。",
    },
    {
      id: "component",
      title: "コンポーネント",
      description: "コンポーネントについて解説を行います。",
    },
    {
      id: "event",
      title: "イベント",
      description: "イベントについて解説を行います。",
    },
  ];

  return (
    <Layout>
      {contents.map(content => (<Content key={content.id} {...content} />))}
    </Layout>
  );
};

export default App;
────────────────
