<p>Reactで開発をしていく上でみなさんがいつかお世話になるだろうと思った記事たちです。<br>
（僕はお世話になりました。これからもお世話になります。）</p>
<p>これも良かったよっていう記事があればコメントで教えてください！</p>
<p>🌟 = 特におすすめ</p>
<h2 id="react%E3%82%92%E6%9C%80%E5%88%9D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6%E3%83%BB%E5%85%A5%E9%96%80">
<a class="header-anchor-link" href="#react%E3%82%92%E6%9C%80%E5%88%9D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6%E3%83%BB%E5%85%A5%E9%96%80" aria-hidden="true"></a> Reactを最初から学ぶ・入門</h2>
<ul>
<li>
<a href="https://beta.reactjs.org/" target="_blank" rel="nofollow noopener noreferrer">React Docs BETA</a>  🌟</li>
<li>
<a href="https://oukayuka.booth.pm/items/2368045" target="_blank" rel="nofollow noopener noreferrer">りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 - くるみ割り書房 ft. React - BOOTH</a>  🌟</li>
<li><a href="https://amzn.to/3IPoyGL" target="_blank" rel="nofollow noopener noreferrer">Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス</a></li>
<li><a href="https://hokaccha.hatenablog.com/entry/2021/10/23/135532" target="_blank" rel="nofollow noopener noreferrer">RailsエンジニアのためのNext.js入門 - hokaccha memo</a></li>
</ul>
<h2 id="react">
<a class="header-anchor-link" href="#react" aria-hidden="true"></a> React</h2>
<ul>
<li>
<a href="https://github.com/reactwg/react-18/discussions/46" target="_blank" rel="nofollow noopener noreferrer">Glossary + Explain Like I'm Five</a> 🌟</li>
<li><a href="https://zenn.dev/g4rds/articles/287c53498d17a1" target="_blank">React Server Components 総まとめ</a></li>
<li>
<a href="https://qiita.com/hellokenta/items/6b795501a0a8921bb6b5" target="_blank" rel="nofollow noopener noreferrer">Reactのレンダリングに関する完全ガイド - Qiita</a> 🌟</li>
<li><a href="https://kentcdodds.com/blog/colocation" target="_blank" rel="nofollow noopener noreferrer">Colocation</a></li>
<li><a href="https://github.com/reactwg/react-18/discussions/52" target="_blank" rel="nofollow noopener noreferrer">When should I use a custom Hook? · Discussion #52 · reactwg/react-18 · GitHub</a></li>
<li><a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0" target="_blank" rel="nofollow noopener noreferrer">Presentational and Container Components | by Dan Abramov | Medium</a></li>
</ul>
<h2 id="%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%BB%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%BB%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9" aria-hidden="true"></a> レンダリング・パフォーマンス</h2>
<ul>
<li><a href="https://alexsidorenko.com/blog/react-performance-slow-renders/" target="_blank" rel="nofollow noopener noreferrer">How to Detect Slow Renders in React? | Alex Sidorenko</a></li>
<li><a href="https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render" target="_blank" rel="nofollow noopener noreferrer">Fix the slow render before you fix the re-render</a></li>
<li><a href="https://kentcdodds.com/blog/optimize-react-re-renders" target="_blank" rel="nofollow noopener noreferrer">One simple trick to optimize React re-renders</a></li>
<li>
<a href="https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster" target="_blank" rel="nofollow noopener noreferrer">State Colocation will make your React app faster</a>  🌟</li>
<li><a href="https://epicreact.dev/memoization-and-react/" target="_blank" rel="nofollow noopener noreferrer">Memoization and React | Epic React by Kent C. Dodds</a></li>
<li><a href="https://epicreact.dev/improve-the-performance-of-your-react-forms/" target="_blank" rel="nofollow noopener noreferrer">Improve the Performance of your React Forms | Epic React by Kent C. Dodds</a></li>
</ul>
<h2 id="next.js">
<a class="header-anchor-link" href="#next.js" aria-hidden="true"></a> Next.js</h2>
<ul>
<li><a href="https://nextjs.org/learn/foundations/how-nextjs-works" target="_blank" rel="nofollow noopener noreferrer">How Next.js Works</a></li>
<li><a href="https://github.com/vercel/next-rsc-demo" target="_blank" rel="nofollow noopener noreferrer">React Server Componentsのdemo</a></li>
<li><a href="https://zenn.dev/a_da_chi/articles/105dac5573b2f5" target="_blank">もう迷わないNext.jsのCSR/SSR/SSG/ISR</a></li>
<li><a href="https://vercel.com/docs/concepts/next.js/incremental-static-regeneration" target="_blank" rel="nofollow noopener noreferrer">Incremental Static Regeneration – Vercel Docs</a></li>
<li><a href="https://blog.logrocket.com/whats-new-next-js-12/" target="_blank" rel="nofollow noopener noreferrer">What’s new in Next.js 12 - LogRocket Blog</a></li>
</ul>
<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%26%E8%A8%AD%E8%A8%88">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%26%E8%A8%AD%E8%A8%88" aria-hidden="true"></a> デザインパターン&amp;設計</h2>
<ul>
<li><a href="https://zenn.dev/morinokami/books/learning-patterns-1/viewer" target="_blank">フロントエンドのデザインパターン</a></li>
<li><a href="https://zenn.dev/adwd/articles/e173f75c512e10" target="_blank">Webフロントエンドの開発効率を高く保つための考え方</a></li>
<li><a href="https://zenn.dev/kazuhiro/articles/56af0c6d6621c7" target="_blank">フロントエンドとオブジェクト指向</a></li>
<li><a href="https://zenn.dev/okunokentaro/articles/01fs3mqbcsdr77khmnm7k8crz8" target="_blank">フロントエンドで長持ちするプロダクトを開発するための心構え</a></li>
<li><a href="https://zenn.dev/yoshiko/articles/99f8047555f700" target="_blank">SPA Componentの推しディレクトリ構成について語る</a></li>
</ul>
<h2 id="%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86">
<a class="header-anchor-link" href="#%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86" aria-hidden="true"></a> 状態管理</h2>
<ul>
<li>
<a href="https://blog.isquaredsoftware.com/2021/01/context-redux-differences/#introduction" target="_blank" rel="nofollow noopener noreferrer">Contextは状態管理ツールじゃねぇって記事</a> 🌟</li>
<li>
<a href="https://beta.reactjs.org/learn/managing-state" target="_blank" rel="nofollow noopener noreferrer">Managing State</a> 🌟</li>
<li><a href="https://kentcdodds.com/blog/application-state-management-with-react" target="_blank" rel="nofollow noopener noreferrer">Application State Management with React</a></li>
<li><a href="https://zenn.dev/yoshiko/articles/607ec0c9b0408d" target="_blank">「3種類」で管理するReactのState戦略</a></li>
<li><a href="https://react-community-tools-practices-cheatsheet.netlify.app/state-management/overview/" target="_blank" rel="nofollow noopener noreferrer">State Management: Overview | React Common Tools and Practices</a></li>
</ul>
<h3 id="redux">
<a class="header-anchor-link" href="#redux" aria-hidden="true"></a> Redux</h3>
<ul>
<li><a href="https://redux.js.org/tutorials/essentials/part-1-overview-concepts" target="_blank" rel="nofollow noopener noreferrer">Redux Essentials, Part 1: Redux Overview and Concepts | Redux</a></li>
<li><a href="https://redux.js.org/style-guide/style-guide" target="_blank" rel="nofollow noopener noreferrer">Style Guide | Redux</a></li>
</ul>
<h3 id="swr">
<a class="header-anchor-link" href="#swr" aria-hidden="true"></a> SWR</h3>
<ul>
<li><a href="https://zenn.dev/uttk/articles/b3bcbedbc1fd00" target="_blank">そうです。わたしがReactをシンプルにするSWRです。</a></li>
</ul>
<h3 id="recoil">
<a class="header-anchor-link" href="#recoil" aria-hidden="true"></a> Recoil</h3>
<ul>
<li><a href="https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/#fn-2" target="_blank" rel="nofollow noopener noreferrer">Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog</a></li>
</ul>
<h2 id="form">
<a class="header-anchor-link" href="#form" aria-hidden="true"></a> Form</h2>
<ul>
<li><a href="https://zenn.dev/manalink/articles/manalink-react-hook-form-v7" target="_blank">React Hook Form(v7)を使ったコンポーネント設計案</a></li>
<li><a href="https://qiita.com/marin_a__/items/eee408c5e99d5b53416e" target="_blank" rel="nofollow noopener noreferrer">Blitz.jsの議論から学ぶ，formik vs react-final-form vs react-hook-form - Qiita</a></li>
</ul>
<h2 id="%E6%89%8B%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6">
<a class="header-anchor-link" href="#%E6%89%8B%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6" aria-hidden="true"></a> 手を動かして学ぶ</h2>
<ul>
<li>
<a href="https://pomb.us/build-your-own-react/" target="_blank" rel="nofollow noopener noreferrer">Build your own React</a>
<ul>
<li><a href="https://zenn.dev/akatsuki/articles/a2cbd26488fa151b828b" target="_blank">Reactを自作しよう</a></li>
</ul>
</li>
<li><a href="https://zenn.dev/uhyo/books/react-concurrent-handson" target="_blank">ReactのSuspense対応非同期処理を手書きするハンズオン</a></li>
</ul>
<h2 id="%E3%83%96%E3%83%AD%E3%82%B0">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%AD%E3%82%B0" aria-hidden="true"></a> ブログ</h2>
<ul>
<li>
<a href="https://bloggingfordevs.com/react-blogs/" target="_blank" rel="nofollow noopener noreferrer">28 Best React Blogs to Read in 2021</a>
<ul>
<li>海外エンジニアのブログがトレンド順で見れるサイト（Reactで絞り込んでいます）</li>
</ul>
</li>
</ul>
<h3 id="social-media-accounts">
<a class="header-anchor-link" href="#social-media-accounts" aria-hidden="true"></a> Social Media Accounts</h3>
<h4 id="twitter">
<a class="header-anchor-link" href="#twitter" aria-hidden="true"></a> Twitter</h4>
<ul>
<li>Sebastien Lorber
<ul>
<li>This week in Reactとして毎週トピックをまとめてツイートしてくれています</li>
<li><a href="https://twitter.com/sebastienlorber" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/sebastienlorber</a></li>
</ul>
</li>
</ul>


React周りのいつかお世話になる記事たち（随時更新）

レンダリング・パフォーマンス