React 基礎
React 基礎
2025/07/09
環境構築
プロジェクト作成
npm create vite@latest my-react-app起動
npm run devコンポーネント
コンポーネントはマークアップを返す JavaScript の関数。components ディレクトリ配下に作成し、再利用可能なコンポーネントを作成する。
JSX
タグ名は大文字で始める。
JSX は JavaScript のコードであるため、JavaScript のコードを書くことができる。
波括弧を使うことで、JSX の中から JavaScript に戻ることができる。
const name = 'John';
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);className を使うことで、CSS クラスを指定することができる。
const className = 'my-class';
return (
<div className={className}>Hello, world!</div>
);条件付きレンダリング
論理 && 構文 を使うことで、条件付きレンダリングを行うことができる。
const isLoggedIn = true;
return (
<div>
{isLoggedIn && <p>Hello, World!</p>}
</div>
);リストのレンダリング
map を使うことで、リストのレンダリングを行うことができる。
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);イベントハンドラー
onClick, onChange などのイベントハンドラーを使うことで、イベントを処理することができる。
const handleClick = () => {
console.log('Button clicked');
};
return (
<button onClick={handleClick}>Click me</button>
);状態管理
useState を使うことで、状態を管理することができる。
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);コンポーネント間でのデータの受け渡し
props を使うことで、親コンポーネントから子コンポーネントにデータを受け渡すことができる。
const ParentComponent = () => {
const [name, setName] = useState('John');
return <ChildComponent name={name} />;
};
interface ChildComponentProps {
name: string;
}
const ChildComponent = ({ name }: ChildComponentProps) => {
console.log(name);
return <div>Hello, {name}!</div>;
};子コンポーネントから親コンポーネントのデータを更新するには、useState の setState を使うことで、親コンポーネントのデータを更新することができる。
これにより、データの流れを一方向にすることができる。
const ParentComponent = () => {
const [name, setName] = useState('John');
return <ChildComponent name={name} setName={setName} />;
};
interface ChildComponentProps {
name: string;
setName: (name: string) => void;
}
const ChildComponent = ({ name, setName }: ChildComponentProps) => {
const handleClick = () => {
setName('Jane');
};
return <button onClick={handleClick}>Click me</button>;
};コンポーネントのライフサイクル
useEffect を使うことで、コンポーネントのライフサイクルを管理することができる。useEffect の第一引数には、依存配列を渡すことができる。
依存配列が空の場合は、コンポーネントが初めてレンダリングされたときに実行される。
依存配列が空でない場合は、依存配列の値が変化するたびに実行される。
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// マウント：コンポーネントが初めてレンダリングされたとき
console.log('Component mounted');
return () => {
// アンマウント：コンポーネントが削除されたとき
console.log('Component unmounted');
};
}, []);
useEffect(() => {
// 更新：コンポーネントが再レンダリングされたとき
console.log('Component updated');
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};