【JavaScript】Reactの基本設計

import

import { useState } from 'react'
import reactLogo from './assets/react.svg'

• useState：「状態(変化する値)」を扱うためのReactの機能(フックと呼ばれるものの一つ)
• Reactでは画像やCSSも「モジュール」として読み込む

コンポーネントの定義

function App() {
  // ...
  return ( /* 画面に表示する内容 */ )
}
export default App

• コンポーネント：関数を1つ作って、その中で「表示したいUI」をreturnすること
• 関数の中に画面の見た目を書くのがReact特有の考え方

JSX

return (
  <>
    <section id="center">...</section>
  </>
)

• JSX：sectionタグのようにHTMLタグをそのままJavaScriptの中に書ける記法
• <>…： は「これ全体をひとかたまりとして扱う」という意味の空タグ(フラグメントという）
  JSXは「returnできるのは1つの要素だけ」というルールがあるための工夫

state(状態管理)の実例

const [count, setCount] = useState(0)
// ...
<button onClick={() => setCount((count) => count + 1)}>
  Count is {count}
</button>

• countは現在の値、setCountはそれを更新する関数
• ボタンを押す《onClick》とsetCountが呼ばれ、countが更新される
• Reactではcount(state)が変わると画面が自動的に再描画される
  これが「宣言的UI」と呼ばれるReactの核心的な考え方

文字入力

function App() {
  const [keyword, setKeyword] = useState('')

  return (
      <input
        type="text"
        placeholder="キーワードを入力"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <p>入力中のキーワード: {keyword}</p>
  }
}

1. 入力欄に文字を打つ → onChangeが発火
2. setKeyword(e.target.value)が呼ばれてkeywordという状態(state)が更新される
3. keywordが変わった→Reactが「この値を使っている場所を再描画」と自動判断
4. 入力中のキーワード: {keyword}
5. pタグ内の【入力中のキーワード: {keyword}】の部分だけが自動で更新される

状態と表示を紐づけておけば更新は勝手に起きる。→コードの複雑化が防げる