React– category –
-
WordPressカスタムブロック開発 TypeScript BABEL
開発の趣旨 Babel（webpackのbabel-loader）でTypeScriptをトランスパイルする。 ビルド時のトランスパイル手段に下記があるらしいですが、どのような違いがありますか... -
TypeScriptでWordPressのブロックを開発する「参考記事リンクブロック」パート2
参考サイト https://internet.mints.ne.jp/typescript/ ソースファイル index.tsx import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps } ... -
@wordpress/scriptsでオリジナルブロック作成
@wordpress/scriptsとは WordPress開発のためのNode.jsベースのビルドツールキットで、ビルドプロセスを簡素化することができます。 開発プロセスの3要素 ビルド (webpa... -
WordPressテーマにReactを統合
参考サイト Reactを使用してWordPressテーマを開発する方法https://kinsta.com/jp/blog/wordpress-react-theme/ 前提条件 WordPressサイト（ローカル開発環境推奨） Nod... -
useRef
ReactのuseRefフックは、主に2つの目的で使用される便利なツールです DOM要素への参照 再レンダリングを引き起こさない値の保持 useRefの基本的な役割： useRefは、主に... -
Vite
Reactプロジェクト作成手順 1）「npm create vite@latest」コマンドを実行 PS C:\Users\jingt\OneDrive\デスクトップ\dev> npm create vite@latest Need to install the... -
【ReactでFirebaseエラー】FirebaseError: Firebase: Error (auth/unauthorized-domain).
エラー内容 1）ReactプロジェクトでFirebaseの「Authentication」でユーザー認証（Googleでログイン）を実装 2）ローカルから「GitHub Pages」に公開したところ、「ireb... -
「GitHub Pages」で「React Router」が正常に動かない
事象 ローカルでReactプロジェクトを作成して、「GitHub Pages」に公開したところ、「React Router」が正常に動かない（ローカルでは問題なかった） 原因 おそらく「pac... -
【React】useContext
propsを利用せずに異なるコンポーネントにデータを共有できる→propsのバケツリレーを防ぐ 参考サイト 【React】useContextの使い方https://qiita.com/knm/items/69a4c6b... -
【React】useCallbackの使い方
使い方 useCallback は関数の定義と一緒に使用します。 const memoizedFunction = useCallback( () => { // 関数の本体 }, [/* 依存配列 */] ); useCallback は2つ... -
useHistoryの使い方
useHistoryの使い方 import { useHistory } from "react-router-dom"; // 1. useHistoryを宣言 const history = useHistory(); // 2. pushメソッドにURLを指定 const on... -
chakra
インストールと導入 Installation - Chakra UIhttps://v2.chakra-ui.com/getting-started 上記サイトから下記コードをコピー npm i @chakra-ui/react @emotion/react @e... -
「Github Page」にReactを公開する方法
1）Reactプロジェクトを作成 npx create-react-app app-dir 2）Branchの発行し、GitHubのリポジトリを作成 VS Codeの場合「Branchの発行」をクリックしリポジトリ名を入... -
VSCodeでReact TypeScriptを使いたい
▽ターミナルで実行 yarn create react-app my-app --template typescript VSCodeでReact&Typescript開発環境を作るhttps://www.ishikenjp.com/react_typescript_wit... -
React Router導入&事前準備 useLocation
react-router-dom をインストールする npm install react-router-dom 参考サイト：React】react-router-domの使い方https://zenn.dev/yurarin/articles/8369bfe666bff0 ... -
【初心者】ReactのPropsとは
Propsとは 親コンポーネントから子コンポーネントに渡す値 子コンポーネントが動的に変化→一つの子コンポーネントが再利用できる ▼親コンポーネント import { ColorfulM... -
【JavaScript】アロー関数の定義の仕方
アロー関数とは 従来の関数定義を簡略化した書き方です ▼従来 function func1(str) { console.log(str); } func1("func1です"); ▼アロー関数 const func2 = (str) => { ... -
ReactでWordPressサイトから投稿した記事情報を取得
したいこと ReactでWordPressサイトから投稿した記事情報を取得し、カテゴリでフィルター表示する 参考サイト WordPressの一部にReactを取り入れるhttps://qiita.com/ni... -
【初心者】Reactのスタイルのあて方
Inline Style export const App = () => { return ( <> <p style={{ color: "red" }}>こんにちは</p> </> ); }; 波カッコの一つはJavaScrip... -
【初心者】Reactのイベント処理の書き方
HTMLとの違い 例）クリックするとアラートがでるボタン ボタン ▼HTML <html> <script> const buttonAlert = () => { alert(); } </script> <bo... -
【React】useState（デモコンポーネント：続きを読むボタン）
Stateの概念とは それぞれのコンポーネントが持っている状態です。 例 エラーがあるのか、ないのか モーダルが開いているのか、いないのか ユーザーが入力した内容 Reac... -
Reactプロジェクト作成方法
作業ディレクトリを作成 作成したディレクトリをVSCodeでひらきます Node.jsをインストールする 下記コマンドでバージョン確認ができればインストール済みです node -v ...
1