5分で読むReact豆知識 | 入門 | 第1回: コンポーネントとstate

はじめに

Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめました！

進捗管理には「いいね」か「ブックマーク」がお勧め
さらに僕のモチベーションアップになります！よろしくお願いいたします！

シリーズ一覧はこちら

コンポーネントとは

ロジックを持ちJSXマークアップをリターンする再利用可能なコードの塊です。

コンポーネント宣言

宣言方法

// ①関数宣言
function Component() {} 
// ②アロー関数（関数式）
const Component = () => {}

宣言時の注意点

コンポーネント宣言は頭文字が大文字です！注意しましょう！

// 頭大文字
function Component() {
// タグとして扱える。useState等のhooksが使える。
}
// 頭小文字
function javascript() {
// 関数や値として活用できる。（use~のカスタムフックも頭小文字）
}

exportも忘れずに

exportしないと、外部ファイルから再利用(import)できません。

export function Component() {
}

stateとは

レンダリングした時に、動的に値を変化させるために管理している値です。
useStateで一緒に生成されるset関数がレンダリングのトリガーになります。
stateはレンダリング時に値を保持します。
state以外のletのような変数はレンダリング時に初期化されるので注意しましょう！

レンダリングとは...仮想DOMを再構築し再描画すること

useStateの使用方法

stateとset関数を渡すhookです。

const [count,setCount] = useState(0);

state

オブジェクト、配列、値など格納できます。

set関数

stateを更新します。レンダリングのトリガーになるので覚えておきましょう。

参考サイト

より詳しく学びたい方はこちら

コンポーネントについて

stateについて