■P046

────────────────
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

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


■P04

変更後
────────────────
<img src={viteLogo} className="logo" alt="Vite logo">
────────────────


■P048

────────────────
function App() {
  return <h1>JSXの基本</h1>
}

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


■P049

────────────────
function App() {
  return (
    <h1>JSXの基本</h1>
  )
}

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

────────────────
const App = () => {
  return <h1>JSXの基本</h1>;
};

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


■P050

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

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


■P051

────────────────
const App = () => {
  return (
    <h1>JSXの基本</h1>
    <p>JSXのルート要素</p>
  );
};

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

────────────────
const App = () => {
  return (
    <div>
      <h1>JSXの基本</h1>
      <p>JSXのルート要素</p>
    </div>
  );
};

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


────────────────
const App = () => {
  return (
    <>
      <h1>JSXの基本</h1>
      <p>JSXのルート要素</p>
    </>
  );
};

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


■P052

────────────────
import { Fragment } from "react";

const App = () => {
  return (
    <Fragment>
      <h1>JSXの基本</h1>
      <p>JSXのルート要素</p>
    </Fragment>
  );
};

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

────────────────
const App = () => {
  return (
    <div>
      <!-- コメント -->
      <h1>JSXの基本</h1>
      <p>JSXのルート要素</p>
    </div>
  );
};

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


■P053

────────────────
const App = () => {
  return (
    <div>
      {/* コメント */}
      <h1>JSXの基本</h1>
      <p>JSXのルート要素</p>
    </div>
  );
};

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

────────────────
const App = () => {
  return (
    <div>
      <h1 class="font-normal">JSXの基本</h1>
    </div>
  );
};

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


■P054

────────────────
const App = () => {
  return (
    <div>
      <h1 className="font-normal">JSXの基本</h1>
    </div>
  );
};

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

────────────────
const App = () => {
  return (
    <div>
      <label htmlFor="name">Hello, world!</label>
    </div>
  );
};

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


■P055

────────────────
const App = () => {
  return (
    <div>
      <h1 tabIndex="1">JSXの基本</h1>
    </div>
  );
};

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

────────────────
const App = () => {
  return (
    <div>
      <h1 style="color:red,font-size:12">Hello, world!</h1>
    </div>
  );
};

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

────────────────
const App = () => {
  return (
    <div>
      <h1 style={{ color: "red", fontSize: "12px" }}>Hello, world!</h1>
    </div>
  );
};

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


■P056

────────────────
const App = () => {
  const text = "JSXの基本";
  return (
    <div>
      <h1>{text}</h1>
    </div>
  );
};

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

────────────────
const App = () => {
  const h1ClassName = "font-normal";
  return (
    <div>
      <h1 className={h1ClassName}>JSXの基本</h1>
    </div>
  );
};

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


■P057

────────────────
const App = () => {
  const attributes = {
    id: "bar",
    className: "foo",
  };

  return (
    <div>
      <h1 {...attributes}>JSXの基本</h1>
    </div>
  );
};

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

────────────────
const App = () => {
  const hasLead = true;

  return (
    <div>
      <h1>JSXの基本</h1>
      {hasLead && <p>JavaScript</p>}
    </div>
  );
};

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


■P059

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

  const isDeleted = true;

  return (
    <div>
      <h1>JSXの基本</h1>
      {isDeleted ? <del>JavaScript</del> : <p>JavaScript</p>}
    </div>
  );
};

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

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

  const fruits = ["りんご", "ばなな", "ぶどう", "みかん", "もも"];

  return (
    <ul>
      {fruits.map(fruit => {
        return (
          <li>{fruit}</li>
        )
      })}
    </ul>
  );
};

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


■P060

────────────────
<ul>
  <li>りんご</li>
  <li>ばなな</li>
  <li>ぶどう</li>
  <li>みかん</li>
  <li>もも</li>
</ul>
────────────────


■P061

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

  const fruits = ["りんご", "ばなな", "ぶどう", "みかん", "もも"];

  return (
    <ul>
      {fruits.map((fruit, index) => {
        return (
          <li key={index}>{fruit}</li>
        )
      })}
    </ul>
  );
};

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

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

  const fruits = ["りんご", "ばなな", "ぶどう", "みかん", "もも"];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
};

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


■P062

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

  const myFavoriteFruit = "みかん";
  const fruits = ["りんご", "ばなな", "ぶどう", "みかん", "もも"];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{
            fruit === myFavoriteFruit
            ? <strong>{fruit}</strong>
            : fruit
        }</li>
      ))}
    </ul>
  );
};

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

────────────────
<ul>
  <li>りんご</li>
  <li>ばなな</li>
  <li>ぶどう</li>
  <li><strong>みかん</strong></li>
  <li>もも</li>
</ul>
────────────────
