React
【React】イベントを登録する方法
Reactでイベントを登録する方法を紹介します。 【React】イベントを登録する方法(クリックイベント) const Sample = () => { const clickAction = () => { alert("clickされました"); }; return ( <…
ARCHIVE
月: 2022年11月
React
【React】でよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)
Reactでよく使う条件分岐の書き方(&&、??(Null合体演算子)、三項演算子)を、同じmapの例で比較します。JSXでif文が書けない理由、===で比較する理由、&&で0が表示される落とし穴も紹介します。
React
【React】propsのchildrenの基本的な使い方と実例(再利用性の高い部品作成方法)
Reactのpropsのchildrenの使い方を解説します。タグの間に書いた要素がchildrenとして渡る仕組み、受け取り方、順番の制御、React.Children、TypeScriptの型、再利用可能なCardコンポーネントの実例とよくあるつまずきを紹介します。
React
【React】useStateの使い方と注意点まとめ
ReactのuseStateの使い方と注意点をまとめます。分割代入の基本から、即時反映されない理由、前の値を使った更新、オブジェクト・配列の更新、keyによるstateのリセット、親でstateを管理する方法まで解説します。
React
【React】JSX内にJavaScriptの式を埋め込む方法と式と文の違い
ReactのJSX内にJavaScriptを埋め込む方法を解説します。{}で書けるのは式だけで、if文などの文はreturnの手前で処理します。三項演算子・map()による配列描画・HTML文字列をdangerouslySetInnerHTMLで埋め込む際の注意点も紹介します。
React
Reactで配列を表示する方法｜map・filter・keyと表示されない原因
Reactで配列をリスト表示するmap・filterの書き方を初心者向けに解説します。安定したkey、オブジェクト配列、検索・空配列・非同期データ、state更新、mapしても表示されない原因までコードで確認できます。
React
【React】スタイリング方法まとめ
Reactでhtmlをスタイリングする方法をまとめました。 Reactでhtmlをスタイリングする方法 大きく以下の4つの方法があります。 CSSファイルを読み込む インラインスタイル CSS Modules CSS i…
React
【React】フォームでよく使う記述(input,textarea,ラジオボタン,チェックボックス,select)
Reactでフォーム作成のときによく使う記述(input,textarea,ラジオボタン,チェックボックス)を紹介します。 inputとtextarea import { useState } from "re…
React
【React】propsの使い方とと大事な2つのルール
Reactでpropsを使う方法と大事な2つのルールを紹介します。 propsを使うことで、似ているコンポーネントで少しだけ変化させたい要素がある場合でも 簡単にコンポーネントを使いまわしつつそれぞれに違いをもたせること…
React
【React】不要タグを出力させないFragmentの使い方
JSX(htmlみたいなもの)のルールで、returnで返されるJSXのルートは一つで束ねられている必要があります。 そのために、divタグなどで囲うことで束ねることができますが、 不要なタグを書きたくない場合があります…
React
【React】npmでプロジェクトを作成する方法
npmでReactのプロジェクトを作成する方法を紹介します。 npmでReactプロジェクトを作成する方法 # PC全体でインストール (windows) npm i -g create-react-app (Mac) …
React
【React】コンポーネントとは-意味と定義方法
Reactのコンポーネントの意味や定義方法について紹介します。 Reactのコンポーネントとは Reactのコンポーネントとは、Reactで定義した画面の各構成要素のことです。 ・再利用性が高まる ・疎結合になる(バグが…
React
【ReactV18】CDNでまずは簡単に触ってみる方法
ReactのV18をCDNでまずは簡単に触ってみる方法を紹介します。 【ReactV18】のCDN <script crossorigin src="https://unpkg.com/react@18/umd/r…