基本構文
コンポーネントの定義
Reactのコンポーネントは、関数またはクラスとして定義します。
ここでは、関数コンポーネントの例を示します。
import React from 'react';
const MyComponent = () => {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
};JSX
JSXは、JavaScriptの中でHTMLのような構文を使うことができます。
const element = <h1>Hello, world!</h1>;Props
コンポーネントにデータを渡すために、propsを使用します。
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
// 使用例
<Greeting name="Alice" />State
コンポーネント内で状態を管理するためには、useStateフックを使用します。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};イベントハンドリング
イベントを処理するには、イベントハンドラを設定します。
const Button = () => {
const handleClick = () => {
alert('Button clicked!');
};
return <button onClick={handleClick}>Click Me</button>;
};コンポーネントのネスト
コンポーネントは他のコンポーネントの中にネストできます。
const App = () => {
return (
<div>
<Greeting name="Bob" />
<Counter />
</div>
);
};スタイルの適用
スタイルはインラインで指定するか、CSSファイルを使用します。
const style = {
color: 'blue',
fontSize: '20px',
};
const StyledComponent = () => {
return <h1 style={style}>Styled Text</h1>;
};