React関連 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• React関連 へ行く。
• React関連 の差分を削除

#author("2024-04-23T14:29:26+09:00","default:irrp","irrp")
#author("2024-04-24T10:18:45+09:00","default:irrp","irrp")
→モダンJavaScript

→Vue.js関連

→Node.js関連

→TypeScript関連

→Webアプリ開発



#contents

*React一般 [#q4cf10ce]
-[[React - Speaker Deck>https://speakerdeck.com/recruitengineers/react-2023]] 2024.4

-[[ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ>https://future-architect.github.io/articles/20240208a/]] 2024.4

-[[Reactを読んでまほうの正体を（少し）理解する>https://zenn.dev/castingone_dev/articles/d6b8577baec84b]] 2024.4

-[[「実装例から見る React のテストの書き方」をアップデートする>https://zenn.dev/cybozu_frontend/articles/update-test-libraries]] 2024.4

-[[なぜReactがフロントエンド開発で多く使われているのか？ #React - Qiita>https://qiita.com/gaeul0228/items/c03c81fe0f2111220e24]] 2024.4

-[[Reactを学習できるサービスmosya Reactの技術的な紹介>https://zenn.dev/steelydylan/articles/mosya-react-development]] 2024.3

-[[Vueユーザー「あれ、ReactでonClickが動かない。。」のワケ #React - Qiita>https://qiita.com/shiori_hoshimi/items/1179abac2e017ef20a03]] 2024.3

-[[Reactで使えそうなグラフ描画ツールってなぁになぁに？>https://zenn.dev/aldagram_tech/articles/5e0d82b965c4be]] 2024.3

-[[React再レンダリングガイド: 一度に全て理解する - Qiita>https://qiita.com/yokoto/items/ee3ed0b3ca905b9016d3]] 2023.9

-[[React Router v6.4で追加された<ScrollRestoration />が便利だった>https://zenn.dev/tamanugi/articles/8dec289a555d95]] 2023.7

-[[Create React Appは役割を終えました>https://zenn.dev/nekoya/articles/dd0f0e8a2fa35f]] 2023.7

-[[リアクティブプログラミングについて考える | フューチャー技術ブログ>https://future-architect.github.io/articles/20230629a/]] 2023.6

-[[React/Next によるアプリケーション開発のこれから - Speaker Deck>https://speakerdeck.com/koba04/next-niyoruapurikesiyonkai-fa-nokorekara]] 2023.6
-[[【衝撃】React Server Componentsが転送量に与えた驚きの影響とは…… - Qiita>https://qiita.com/uhyo/items/06b0cd7292256f66d7b7]] 2023.6

-[[あなたがまだ知らないReactのテクニック10選 - Qiita>https://qiita.com/omo_taku/items/3ba3201045cdcc455a72]] 2023.5

-[[React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 − Publickey>https://www.publickey1.jp/blog/23/_reactjsfacebookreactjsreactjs_the_documentaryyoutube.html]] 2023.2

-[[モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ>https://tech-blog.rakus.co.jp/entry/20230208/frontend]] 2023.2

-[[React18 設計とコードレビューの観点>https://zenn.dev/suzu_4/articles/4abeccb283331b]] 2023.1

-[[React/Jestでのユニットテストに少し慣れてきたら役に立つtips>https://zenn.dev/spacemarket/articles/6b52d53696ef13]] 2023.1

-[[Reactでフォームを作る際にハマりやすいポイント - APC 技術ブログ>https://techblog.ap-com.co.jp/entry/2022/12/25/180834]] 2022.12

-[[図で分かるReact18のしくみ>https://zenn.dev/ktmouk/articles/68fefedb5fcbdc]] 2022.12

-[[エンジニア1年生の自分に教えたいReact学習で重宝できる教材と記事まとめ - Qiita>https://qiita.com/KNR109/items/d5945897dd67123a87de]] 2022.12

-[[Reactのトレント&#12441;よくわからん - Speaker Deck>https://speakerdeck.com/oukayuka/reactnotorentoyokuwakaran]] 2022.12

-[[【フロントエンド】プロジェクト初期に手を抜かないで - Qiita>https://qiita.com/anneau/items/fb966a5734ec54e9a645]] 2022.12

-[[ToDoアプリ作成を通したReactの状態管理ライブラリ基礎学習 ~第三部 Recoil編~ - RAKUS Developers Blog | ラクス エンジニアブログ>https://tech-blog.rakus.co.jp/entry/20221128/recoil]] 2022.11

-[[はじめに｜Next.jsが出てこないReact Server Componentsハンズオン>https://zenn.dev/uhyo/books/rsc-without-nextjs/viewer/intro]] 2022.11

-[[React で超絶楽にエラー画面を出せるよ - Qiita>https://qiita.com/nuko-suke/items/fdecac831533c3d8bbf0]] 2022.11

-[[Reactのライブラリ「Recharts」について - SO Technologies 開発者ブログ>https://developer.so-tech.co.jp/entry/2022/10/24/113000]] 2022.10

-[[【React / TypeScript】ローディングを実装する方法 - Qiita>https://qiita.com/Jazuma/items/88f85f1b3761d7d4c0dd]] 2022.10

-[[ReactのComponentProps型を使って不要なPropsとお別れしよう！！ | Reactおじさんブログ>https://react-uncle-blog.netlify.app/blog/use-react-componentprops-type]] 2022.10

-[[React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ｜note>https://note.com/tabelog_frontend/n/n0dc1a2089e58]] 2022.4

-[[Reactのグラフライブラリ「react-chartjs-2」を使ってみた。 | DevelopersIO>https://dev.classmethod.jp/articles/react-chartjs-2/]] 2022.9

-[[フロントエンド(React)の技術質問 - Qiita>https://qiita.com/KNR109/items/e13a5c5b8b461e846902]] 2022.9

-[[VueをReactにリプレイスしてEasyからSimpleにした話>https://zenn.dev/mybest/articles/90c62b850268e4]] 2022.8

-[[なぜnpx create-react-appすると"export default" Appなのか？ - Qiita>https://qiita.com/Jassy/items/da2d74a538626eabb1e0]] 2022.7

-[[React、過剰に複雑な代物。 - Qiita>https://qiita.com/tronicboy/items/18c36cb713f77af627d8]] 2022.7

-[[React初学者からみた最良のディレクトリ構造 - Qiita>https://qiita.com/YUDAI_K/items/aa4d335fea9c31d6e757]] 2022.6

-[[ReactにおけるGlobal stateの管理法4選>https://weseek.co.jp/tech/2565/]] 2022.4

-[[なぜモダンフロントエンドを使いたいのか 宣言的な制御編｜食べログ フロントエンドエンジニアブログ｜note>https://note.com/tabelog_frontend/n/n1094967cb6bd]] 2022.3

-[[素人がまとめた Reactのいろは（React17） - Qiita>https://qiita.com/nh321/items/8727921a9827bc986361]] 2022.2

-[[React Router v6 を使ったパンくずリストの実装パターンを考える | DevelopersIO>https://dev.classmethod.jp/articles/react-router-v6-breadcrumbs/]] 2022.2

-[[React の学習でお世話になったYouTube動画集 - Qiita>https://qiita.com/iwasaki-hub/items/becde0c9993c4ef3975a]] 2022.1

-[[知ってると得をするReactコンポーネントのイケてる書き方 - Qiita>https://qiita.com/102Design/items/b1dcebbbc768c65befc9]] 2021.12

-[[React から Vue への出戻りを検討する 3 つの理由 - Qiita>https://qiita.com/yuzuru_xa/items/481c9790610dd8382679]] 2021.12
--そのまま CSS を書くことができる
--ライブラリ選定で悩まない
--CompositionAPI + script setup による開発体験の改善

-[[ReactベースのあたらしいフレームワークRemixをためしてみた | DevelopersIO>https://dev.classmethod.jp/articles/qucikstart-remix-framework/]] 2021.11

-[[フロントエンドエンジニア(React)の技術質問 - Qiita>https://qiita.com/kaimaru31/items/08c9145370fc4caa5ce3]] 2021.11

-[[【2021年最新】フロントエンジニア向けのアプリ開発4選(無料で学べる) - 渋谷で働く現役エンジニアが徹底解説>https://sbucks-blog.com/program/study/05-2/]] 2021.8

-[[React初心者の私が開発演習でつまづいたこと5選！ - Qiita>https://qiita.com/h_masudaa/items/c1b92c91fff6ced502b5]] 2021.11
--React Hooks useEffect()
--Promise
--async, await
--childrenって何 -使い方
--JSX内での条件式

-[[ReactにCognitoでサインイン機能をつける | DevelopersIO>https://dev.classmethod.jp/articles/react-cognito-signin/]] 2021.11

-[[何故くそややこしいReactを勉強しないといけないのか？ - Qiita>https://qiita.com/monsoonTropicalBird/items/904e8f24ba7a816511d3]] 2021.10
--アプリの高度化にあわせて登場したのが、React, Angular, Vueといったフレームワークなのである。
--Ajax

-[[ReactはウェブやHTMLとは特に関係のないライブラリです>https://qiita.com/kfurumiya/items/f888cb66c8ba6d15fc60]] 2020.3

-[[The shapes of React Native>http://browniefed.com/blog/the-shapes-of-react-native/]] 2017.5.18


*React Hooks [#xc04772c]
-[[最近Reactを始めた人向けのReact Hooks入門>https://sbfl.net/blog/2019/11/12/react-hooks-introduction/]] 2022.11

-[[ReactでWebSocketを扱う - Qiita>https://qiita.com/_ytori/items/a92d69760e8e8a2047ac]] 2022.12

-[[【React】useCallbackの適切な使い方とパフォーマンス>https://weseek.co.jp/tech/3917/]] 2022.12

-[[【React】useEffect解体新書 - Qiita>https://qiita.com/al_tarte/items/9f12f91afb74fe8ecb0e]] 2023.2
-[[【React】useEffect の標準動作は「依存配列の中身が変わると実行」ではない - Qiita>https://qiita.com/honey32/items/62edf5165aced7d0c4bf]] 2022.12

-[[【React】React 初心者でも「ステート管理」を完全に理解できる（ライブラリは使わないよ） - Qiita>https://qiita.com/daishiman/items/0f0592dc60cc844bf99b]] 2022.10

-[[React Hooksを使う上で意識したいことまとめ - Qiita>https://qiita.com/akt_10/items/f9a202400b8d4b0acc1b]] 2022.10
-[[useStateの初期化ができなくて２時間潰した俺みたいになるな - Qiita>https://qiita.com/TakehiroKATO/items/060233fb5696462bc1d1]] 2022.10
-[[さっくり解説するReact hooksのuseState - Qiita>https://qiita.com/shimajiri/items/55c1846dd3012ce3dfc8]] 2022.9
-[[react-hooks 基礎 - Qiita>https://qiita.com/hiro-hiro/items/be36ba9e8d8cf152febd]] 2021.11

-[[宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita>https://qiita.com/erukiti/items/fb7bcbd9d79696579d06]] 2019


* npx create-react-app でエラーになる現象 [#xb912014]
-2024.4 npx ver.10.5.0 
-Windows環境の場合だが…
 \>npx create-react-app sample_react02
 npm ERR! code ENOENT
 npm ERR! syscall lstat
 npm ERR! path C:\Users\xxxx\AppData\Roaming\npm
 npm ERR! errno -4058
 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\xxxx\AppData\Roaming\npm'
 npm ERR! enoent This is related to npm not being able to find a file.
-このエラーは、C:\Program FilesにNode.js をインストールせず、D:\Program Files にインストールした環境で起こった
-また、D:\Program Files にインストールする前に C:\Program Filesにインストールしていたのをアンインストールしたことも関係あるかもしれない
-この場合、C:\Users\xxxx\AppData\Roaming\npm というフォルダを手で作成してやったら直った。


* 環境構築 [#x6ec2801]
-[[Docker + React + TypeScript の 環境構築方法 - Qiita>https://qiita.com/91works-i-kato/items/9f9ad03fee32d42ed547]] 2023.5

-[[Dockerとdocker-composeを使ってReactのコンテナを作成してみよう！ - Qiita>https://qiita.com/shun198/items/18014c46901f256af9ee]] 2023.1

-[[2022年秋版　最新React/Typescript開発環境の作成 - Qiita>https://qiita.com/kztmk_media_pep/items/11d063a155d414a102b1]] 2022.10

-[[React×Firebaseでちゃんと開発するときの環境構築手順と解説>https://zenn.dev/tentel/articles/488dd8765fb059]] 2022.8

-[[React18がリリースされたので、開発環境をゼロから構築してみる。【後編】 - Qiita>https://qiita.com/kztmk_media_pep/items/a9cc5186cdaa3771e2ab]] 2022.4
-[[【スーパー初心者向け】Dockerを使ってReact環境を構築&起動する方法をかなり詳しく解説してみた。 - Qiita>https://qiita.com/daigokasahara/items/8b34c1cc8a0efbc44879]] 2022.3

-[[CodeSandboxでReact学習用の開発環境をサクっと作ろう>https://qiita.com/nishiurahiroki/items/279041447ef1415804c2]] 2020.1


*入門記事 [#hc4918dc]
-[[Build your own React>https://pomb.us/build-your-own-react/]] 2019

-[[【永久保存版】0からReactを勉強するならこのロードマップに従え！ - Qiita>https://qiita.com/Sicut_study/items/78910cd8d103b8d45a73]] 2023.10

-[[今から始めるReact入門 &#12316; React の基本 - Qiita>https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048]] 2018
--[[今から始めるReact入門 &#12316; React Router - Qiita>https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2]]

-[[React + TypeScript: Next入門01 チュートリアルの作例を一からつくってみる - Qiita>https://qiita.com/FumioNonaka/items/37ad26dab7e5051f672e]] 2023.1

-[[GitHub - sudheerj/reactjs-interview-questions: List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!>https://github.com/sudheerj/reactjs-interview-questions]] 2023.1

-[[Reactの基礎４ - Qiita>https://qiita.com/hiro949/items/a6b39b8b006d62d1b6ca]] 2022.10

-[[React を始めて学んだこと 〜第1回〜 &#8211; TechHarmony>https://blog.usize-tech.com/study-react-1/#toc5]] 2022.7

-[[#01 新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識 - YouTube>https://www.youtube.com/watch?v=XKSYF2aZnkQ]] 2021.5
-[[React入門 -なぜReactを使うのか->https://qiita.com/nabekou29/items/687a54f7d70080a0c0f6]] 2019.10
-[[React.jsチートシート>http://qiita.com/morrr/items/c32a4916d55373b64c70]] 2017.5.13




* Next.js [#gc5bd3ef]
-[[Vercel AI SDK で Ollama を使う方法>https://zenn.dev/optimisuke/articles/5a459d4016a201]] 2024.4

-[[Next.jsを使うべき5つの理由 + 実装Tips #JavaScript - Qiita>https://qiita.com/Yuki_Oshima/items/5c0dfd8f7af8fb76af8f]] 2020

-[[今ホットなHonoを使ってNext.jsのRoute Handlersをハイジャックする>https://zenn.dev/chot/articles/e109287414eb8c]] 2024.4

-[[Windows に Next.js をインストールする | Microsoft Learn>https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nextjs-on-wsl]] 2024.4

-[[フロントエンド未経験でもわかる Next.js の概要>https://zenn.dev/cloud_ace/articles/nextjs-basics-for-non-frontend-devs]] 2024.4

-[[React フレームワークの 動向と選定基準 - Speaker Deck>https://speakerdeck.com/azukiazusa1/react-huremuwakuno-dong-xiang-toxuan-ding-ji-zhun]] 2024.4

-[[App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement - Speaker Deck>https://speakerdeck.com/takefumiyoshii/can-migration-to-app-router-be-an-improvement]] 2024.4

-[[ReactとNext.jsの正しい星取表 - honey32>https://scrapbox.io/honey32/React%E3%81%A8Next.js%E3%81%AE%E6%AD%A3%E3%81%97%E3%81%84%E6%98%9F%E5%8F%96%E8%A1%A8]] 2024.3

-[[Next.js Learnのアプリをデスクトップアプリ化とスマホアプリ化してみた #iOS - Qiita>https://qiita.com/takarake/items/5884085681a8b4ee52e6]] 2024.3

-[[Learn Next.jsをやってみた感想とおすすめの進め方 #React - Qiita>https://qiita.com/takubii/items/a672b491896aa7170034]] 2024.3

-[[Next.js 14 アプリ開発のあらすじ>https://zenn.dev/nino/books/30e21d37af73b5]] 2023.11

-[[どこをどう調べても Error: Didn't get a result from child compiler. が解決できない>https://zenn.dev/praha/articles/36679679c274b1]] 2023.11

-[[【コードベースで比較する】React VS Next.js>https://zenn.dev/nameless_sn/articles/react_vs_nextjs_description]] 2023.10

-[[「Next.js + AWS」を使用して、Webサイトを爆速で公開する - Qiita>https://qiita.com/mayu_AJ/items/6743be31300d6630c1d5]] 2023.6

-[[【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO>https://dev.classmethod.jp/articles/complete-nextjs-tutorial/]] 2023.4

-[[WSL2環境でNext.jsに入門してみた | DevelopersIO>https://dev.classmethod.jp/articles/try-next-js-tutorial-on-wsl2-202210/]] 2022.10

-[[Next.js 13 を試してみた | DevelopersIO>https://dev.classmethod.jp/articles/next-js-13-sample/]] 2022.10

-[[Reactのフレームワーク”Next.js”を触ってみた「動的ルート / APIルート」 | Wedding Park CREATORS Blog>https://engineers.weddingpark.co.jp/react_next-js_03/]] 2022.10

-[[Next.js + Vercel + Supabase を用いた高速アプリ開発 - RAKUS Developers Blog | ラクス エンジニアブログ>https://tech-blog.rakus.co.jp/entry/20220928/vercel]] 2022.10

-[[React を学びたいなら Next.js チュートリアルがおすすめ。 - ROXX開発者ブログ>https://techblog.roxx.co.jp/entry/2022/08/29/210329]] 2022.8

-[[なぜNext.jsをやめたのか？ - Hello Tech>https://tech.hello.ai/entry/2022/04/20/173931]] 2022.4
--SSRを前提としていない設計のアプリのコードをウェブに移植したというのが移植の上で発生した問題の主な要因

-[[【2021年】Next.jsとReactの違い・メリット・デメリットを比較>https://tech-parrot.com/programming/next-js-react-js-tigai/]] 2021.6
-[[大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita>https://qiita.com/thesugar/items/01896c1faa8241e6b1bc]] 2022.1
-[[公式チュートリアルでNext.jsに入門してみた | DevelopersIO>https://dev.classmethod.jp/articles/introduction-to-nextjs/]] 2022.1
-[[Next.js+TypeScriptでシンプルなニュースサイトを作ってみた。 - Qiita>https://qiita.com/harashojan/items/7cd2d27f8952e069f350]] 2021.2
-[[Reactで実現するUniversal JavaScript - Qiita>https://qiita.com/Ryusou/items/df00e5f89f2d0109a8c2]] 2019


* 公式 [#qeebe7e6]
-[[React のルール &#8211; React>https://ja.react.dev/reference/rules]] 2024.4

-[[Introduction | Learn Next.js>https://nextjs.org/learn-pages-router/foundations/about-nextjs]]

-https://facebook.github.io/react/

-https://github.com/enaqx/awesome-react