JSXの続き。からのReact Component、props、state【Day 87 of 100】

Babelで動く、、、動くが！重いよ！

警告が出ている。たしかにページ起動が重たかった。

そういうことか。ページを読み込むたびに全ンンン部のFileを見に行ってレンダリングしてたらそりゃ重たくなるよね。

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/learn-react/conditional-jsx.html

button onClick時のイベントハンドリング

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="inputTexts"></div>
    <script type="text/babel" data-type="module">
      import React from 'https://esm.sh/react@19.1.0/?dev';
      import ReactDOMClient from 'https://esm.sh/react-dom@19.1.0/client/?dev';
      // console.log(React.version);
      const domNode = document.getElementById('app');
      const domNode2 = document.getElementById('inputTexts');
      const root = ReactDOMClient.createRoot(domNode);
      function handleChange(event) {
        console.log('入力値：', event.target.value);
        // 以下本当は良くないが練習として。後にuseStateを使えるようになろう
        domNode2.innerText += event.target.value;
      }
      const element = (
        <div>
          <p>入力後コンソールを見てね</p>
          <input type="text" onChange={handleChange} placeholder="入力してください" name="" id="" />
        </div>
      );
      root.render(element);
      // root.render(<h2>Hello, React Dom!!</h2>);
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
</html>

		

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/learn-react/event-jsx.html

Reactのコンポーネント、ネストとネストのネスト、再利用

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React入門（index2.html）</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      import React from 'https://esm.sh/react@19.1.0/?dev';
      import ReactDOMClient from 'https://esm.sh/react-dom@19.1.0/client/?dev';
      // console.log(React.version);
      const domNode = document.getElementById('app');
      const root = ReactDOMClient.createRoot(domNode);
      //Headerコンポーネントを定義してそれを画面に表示する
      // Reactコンポーネントは関数で定義してHTMLやJSと区別するために頭文字を大文字に
      function Header() {
        // 関数の中のreturnでJSXを返却。クォートでは囲みません
        return (
          <>
            <header>
              <Title />
              <Navigation />
              <UserName />
            </header>
          </>
        );
      }
      function Title() {
        return <h1>Top Page</h1>;
      }
      function Navigation() {
        return (
          <nav>
            <a href="http://yahoo.com">Yahoo.com</a> | <a href="http://Google.com">Google.com</a>
          </nav>
        );
      }
      // 何度も再利用する、再利用できるコンポーネントUserNameを作る
      function UserName() {
        return <span>Bull Kiyo （ぶるきよ）</span>;
      }
      function Content() {
        return (
          <>
            <Article />
          </>
        );
      }
      function Article() {
        return (
          <article>
            <h2>ようこそ</h2>
            <p>ここはメインコンテンツが入ります</p>
            <UserName />
          </article>
        );
      }
      function Footer() {
        return (
          <small>
            &copy; 2026 Goma Pan Clinic | <UserName />
          </small>
        );
      }
      function HomePage() {
        return (
          <div>
            <Header />
            <Content />
            <Footer />
          </div>
        );
      }
      root.render(<HomePage />);
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
</html>

		

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/learn-react/index2.html

component, props, state

components: 画面を小さい部品ごとにパーツ化する。関数である。関数定義の一文字目も大文字にする。returnでHTMLもしくは別のコンポーネントをネストする。<>< />や<div><div />などでくくる。

props: 部品にデータを渡す仕組み

state: 状態管理

Componentのおさらい

次はPropsを理解する

３人分のデータを直打ちVer

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React入門 Props（index3.html）</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      import React from 'https://esm.sh/react@19.1.0/?dev';
      import ReactDOMClient from 'https://esm.sh/react-dom@19.1.0/client/?dev';
      // console.log(React.version);
      const domNode = document.getElementById('app');
      const root = ReactDOMClient.createRoot(domNode);
      // 子コンポーネント
      // Reactでは引数はオブジェクトとして渡されるので以下の{}で囲む
      function ShowProfileInfo({ name, age }) {
        // console.log(name);
        // console.log(age);
        return (
          <div>
            {/* 以下 {}波括弧の中はJSのコードである*/}
            <p>名前：{name}</p>
            <p>年齢：{age}歳</p>
            <p>{age >= 16 ? 'お酒が飲めます' : 'お酒が飲めません'}</p>
            <hr />
          </div>
        );
      }
      // 親コンポーネント
      function App() {
        return (
          <div>
            <h1>３人分のデータをHTMLで直打ち Ver</h1>
            {/* 文字列は""で囲み、数字や変数は{}で囲む。{}の中はJSである！ */}
            <ShowProfileInfo name="山田太郎" age={15} />
            <ShowProfileInfo name="椎名一" age={16} />
            <ShowProfileInfo name="加藤優" age={17} />
          </div>
        );
      }
      // コンポーネントDomにレンダリングをする処理
      root.render(<App />);
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
</html>

		

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/learn-react/index3.html

N人分のデータを配列＆Map関数 Ver

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React入門 Props（index3.html）</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      import React from 'https://esm.sh/react@19.1.0/?dev';
      import ReactDOMClient from 'https://esm.sh/react-dom@19.1.0/client/?dev';
      // console.log(React.version);
      const domNode = document.getElementById('app');
      const root = ReactDOMClient.createRoot(domNode);
      // 子コンポーネント
      // Reactでは引数はオブジェクトとして渡されるので以下の{}で囲む
      function ShowProfileInfo({ users }) {
        // console.log(name);
        // console.log(age);
        return (
          <div>
            {/* 以下 {}波括弧の中はJSのコードである*/}
            {users.map((user) => (
              <div key={user.id}>
                <p>名前：{user.name}</p>
                <p>年齢：{user.age}歳</p>
                <p>{user.age >= 16 ? 'お酒が飲めます' : 'お酒が飲めません'}</p>
                <hr />
              </div>
            ))}
          </div>
        );
      }
      // 親コンポーネント
      function App() {
        const users = [
          { id: 1, name: 'ふくちゃん', age: 12 },
          { id: 2, name: '椎名一', age: 15 },
          { id: 3, name: '加藤優', age: 16 },
          { id: 4, name: '山田太郎', age: 17 },
          { id: 5, name: 'ガキ', age: 18 },
          { id: 6, name: 'ベイベー', age: 1 },
          { id: 7, name: '子', age: 7 },
          { id: 8, name: 'オジ', age: 67 },
        ];
        return (
          <div>
            <h1>N人分のデータを配列＆Map関数 Ver</h1>
            {/* 文字列は""で囲み、数字や変数は{}で囲む。{}の中はJSである！ */}
            <ShowProfileInfo users={users} />
          </div>
        );
      }
      // コンポーネントDomにレンダリングをする処理
      root.render(<App />);
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
</html>

		

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/learn-react/index4.html

propsのおさらい

useStateを学ぶ

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/learn-react/index5_state.html

    // likesという状態を初期値0で用意します、という意味
    // likesは現在のいいね数という状態。それが準備される
    // setLikesはその状態を変更するために使う関数が準備される
    const [likes, setLikes] = React.useState(0);

			
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React入門 State（index5_state.html）</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module">
      import React from 'https://esm.sh/react@19.1.0/?dev';
      import ReactDOMClient from 'https://esm.sh/react-dom@19.1.0/client/?dev';
      // console.log(React.version);
      const domNode = document.getElementById('app');
      const root = ReactDOMClient.createRoot(domNode);
      function LikeButton() {
        // likesという状態を初期値0で用意します、という意味
        // likesは現在のいいね数という状態。それが準備される
        // setLikesはその状態を変更するために使う関数が準備される
        const [likes, setLikes] = React.useState(0);
        console.log(likes);
        console.log(setLikes);
        function handleClick() {
          // console.log('いいね！ボタンがクリックされました');
          // setLikes関数を呼び出すことでReactがコンポーネントを再描画する
          setLikes(likes + 1);
        }
        return (
          <div>
            <button onClick={handleClick}>いいね！</button>
            <p>いいね！{likes}</p>
          </div>
        );
      }
      function App() {
        return (
          <div>
            <LikeButton />
          </div>
        );
      }
      root.render(<App />);
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
</html>

		