https://c-a-p-engineer.github.io/categories/react/Recent content in React on こぴぺたん ログHugo -- gohugo.ioja&copy;{year}, All Rights ReservedFri, 13 May 2022 01:00:00 +0900https://c-a-p-engineer.github.io/react-typescript-useeffect/Fri, 13 May 2022 01:00:00 +0900Fri, 13 May 2022 01:00:00 +0900https://c-a-p-engineer.github.io/react-typescript-useeffect/<h1 id="react--typescriptstate-が反映されないときは-useeffect-を使用する">【React + TypeScript】state が反映されないときは useEffect を使用する</h1> <p><code>React</code> で <code>state</code> が反映されないときは <code>useEffect</code> を使用する。</p> <h2 id="useeffect-を使用する">useEffect を使用する</h2> <p><code>React</code> の <code>useEffect</code> を使用する。<br /> <a href="https://ja.reactjs.org/docs/hooks-effect.html" target="_blank" rel="nofollow noopener">副作用フックの利用法 - React</a></p>こぴぺたんfeatured imageReactTypeScriptReacthttps://c-a-p-engineer.github.io/react-subdirectory/Sun, 08 May 2022 18:00:00 +0900Sun, 08 May 2022 18:00:00 +0900https://c-a-p-engineer.github.io/react-subdirectory/<h1 id="reactサブディレクトリでreactを公開する">【React】サブディレクトリでReactを公開する</h1> <p>Reactをサブディレクトリ上で公開したい場合はビルドしたものを配置するだけではできません。<br /> Reactをサブディレクトリで公開する方法。</p> <h2 id="原因">原因</h2> <p>原因は通常通りにビルドすると <code>/static/</code> でファイルを読み込んでしまうため、ルートディレクトリ上に配置する必要があります。</p>こぴぺたんfeatured imageReactReacthttps://c-a-p-engineer.github.io/react-typescript-onchange/Sat, 07 May 2022 15:30:00 +0900Sat, 07 May 2022 15:30:00 +0900https://c-a-p-engineer.github.io/react-typescript-onchange/<h1 id="react--typescriptイベントから型を指定して渡す方法">【React + TypeScript】イベントから型を指定して渡す方法</h1> <p><code>Material UI</code> を使用している際 <code>onChange</code> イベント時にせっかく <code>TypeScript</code> を使用しているのに <code>unknown</code> の型指定しか出来なかったため、対策時のメモ</p>こぴぺたんfeatured imageReactTypeScriptReacthttps://c-a-p-engineer.github.io/react-typescript-usestate/Mon, 02 May 2022 12:00:00 +0900Mon, 02 May 2022 12:00:00 +0900https://c-a-p-engineer.github.io/react-typescript-usestate/<h1 id="react--typescriptusestate-を利用してリアルタイムに入力値を反映させる">【React + TypeScript】useState を利用してリアルタイムに入力値を反映させる</h1> <p><code>useState</code> を利用してリアルタイムに入力値を反映させるメモ</p> <h2 id="usestate-を使用する">useState を使用する</h2> <p>React の <code>useState</code> を使用する。<br /> <a href="https://ja.reactjs.org/docs/hooks-state.html" target="_blank" rel="nofollow noopener">ステートフックの利用法 - React</a></p>こぴぺたんfeatured imageReactTypeScriptReacthttps://c-a-p-engineer.github.io/react-typescript-axios/Thu, 21 Apr 2022 01:00:00 +0900Thu, 21 Apr 2022 01:00:00 +0900https://c-a-p-engineer.github.io/react-typescript-axios/<h1 id="react--typescriptaxios-を使って-api-に接続する">【React + TypeScript】axios を使って API に接続する</h1> <p>axiosを使ってAPIに接続するメモ。<br /> <a href="https://github.com/axios/axios" target="_blank" rel="nofollow noopener">axios</a></p> <h2 id="axios-インストール">axios インストール</h2> <p><code>axios</code> をインストールします。</p> <pre tabindex="0"><code>npm install axios </code></pre><h2 id="get">Get</h2> <p>サンプルは当ブログの記事を取得するようにしています。</p>こぴぺたんfeatured imageReactTypeScriptReacthttps://c-a-p-engineer.github.io/react-fc-vfc/Mon, 04 Apr 2022 05:30:00 +0900Mon, 04 Apr 2022 05:30:00 +0900https://c-a-p-engineer.github.io/react-fc-vfc/<h1 id="reactreactfcreactvfcを使わない方が良い">【React】React.FC、React.VFCを使わない方が良い？</h1> <p><code>React.FC(FunctionComponent)</code>、<code>React.VFC(VoidFunctionComponent)</code> 色々調べてみたらどちらも使わないほうが良いのではないかと考えになりました。</p>こぴぺたんfeatured imageReactTypeScriptReacthttps://c-a-p-engineer.github.io/react-loader-handle-file-type/Thu, 31 Mar 2022 03:30:00 +0900Thu, 31 Mar 2022 03:30:00 +0900https://c-a-p-engineer.github.io/react-loader-handle-file-type/<h1 id="react--webpackyou-may-need-an-appropriate-loader-to-handle-this-file-type-解決方法">【React + Webpack】You may need an appropriate loader to handle this file type 解決方法</h1> <p>React + Webpack の環境で You may need an appropriate loader to handle this file type の解決方法メモ。</p> <h2 id="エラー">エラー</h2> <p>ビルドすると以下のエラーが発生。</p> <pre tabindex="0"><code>ERROR in ./src/index.css 1:5 Module parse failed: Unexpected token (1:5) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders &gt; body { | margin: 0; | font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, &#39;Roboto&#39;, &#39;Oxygen&#39;, @ ./src/index.tsx 15:0-21 webpack 5.70.0 compiled with 1 error in 7589 ms </code></pre><h2 id="原因">原因</h2> <p>Webpack がCSSを読み込めなくてエラーが発生。</p>こぴぺたんfeatured imageReactReacthttps://c-a-p-engineer.github.io/create-react-app-hotreload/Mon, 28 Mar 2022 01:30:00 +0900Mon, 28 Mar 2022 01:30:00 +0900https://c-a-p-engineer.github.io/create-react-app-hotreload/<h1 id="create-react-app-で-hotreload-させる">create-react-app で hotreload させる</h1> <p>docker環境で <code>create-react-app</code> で作った環境上で hotreload が効かなかったのでその対処方法。<br /> <code>create-react-app</code> のバージョンは <code>5.0.0</code> です。</p> <h2 id="原因">原因</h2> <p>原因はホットリロードに必要なソースの変更の監視と適用が出来なかったためです。</p>こぴぺたんfeatured imageReactReacthttps://c-a-p-engineer.github.io/react-router-dom-typescript/Mon, 14 Mar 2022 02:00:00 +0900Mon, 14 Mar 2022 02:00:00 +0900https://c-a-p-engineer.github.io/react-router-dom-typescript/<h1 id="git-複数のコミットを-rebase-を使って1つにまとめる">【Git】 複数のコミットを rebase を使って1つにまとめる</h1> <p>【React + TypeScript】 <code>react-router-dom</code> を使ってルーティングを実装する</p> <h2 id="前提">前提</h2> <ul> <li>node 14.17.5</li> <li>react-router-dom 6.2.2</li> </ul> <p>公式のチュートリアルを参考に進めます。<br /> （公式のチュートリアルは <code>React</code> のため少々記載とは異なります。</p>こぴぺたんfeatured imageReactTypeScriptReactTypeScript