Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件

2023/04/15 330 users bulletproof-react アーキテクチャ 宝庫

Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて... 続きを読む

React Server Componentsの仕組み：詳細ガイド | POSTD

2022/07/27 99 users POSTD RSC React バンドルサイズ ビルダー

React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のク... 続きを読む

ProviderタワーをRecoilに置き換える

2022/06/26 66 users baz Recoil provider return 呼称

ReactアプリケーションではProviderタワーがよく見られます。Providerタワーは、アプリの上の方で次のコードのように複数のProviderが積み重なっている状態のことです（一般的な呼称かどうかは知りません）。 const App: React.FC = () => { return ( <FooProvider> <BarProvider> <BazProvider> <MainContents /> </Baz... 続きを読む

Reactアプリケーションのテスト戦略

2022/06/03 257 users StorYBook テスト戦略 フロントエンド トレードオフ

Reactアプリケーションのテスト戦略について ・フロントエンドのテストの種類 ・トレードオフ ・所属しているチーム / プロダクトの状況 ・テスト戦略 ・Storybookを使ったこれからのテストへ 続きを読む

Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件

2021/11/08 667 users bulletproof-react React 宝庫 一例

Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソース... 続きを読む

create-react-app --template typesctiptの直後に初手で入れる設定 - 私が歌川です

2021/07/14 12 users create-react-app React 初手 直後 趣味

はじめに Reactでアプリケーションを作るときは、だいたい create-react-app --template typesctipt してから開発を始める。ゼロコンフィグでReactアプリケーションを書けて便利だけど、もうちょっと手を入れておくと快適に開発できるようになる。 趣味の個人開発で create-react-app --template typescript した直後に... 続きを読む

Next.jsに「できるだけ」依存しないReactアプリケーションの構成

2021/01/17 9 users Next.js SWR Router 構成 Container

TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR... 続きを読む

ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA

2020/04/09 11 users React アプリケーション 手法 選択肢 登場

Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。 Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。 2020年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状... 続きを読む

Jest ·

2017/08/22 228 users Jest コンフィギュレーション Facebook 哲学 結果

JestはFacebookではReactアプリケーションを含む全てのJavaScriptコードをテストするのに利用されています。Jestの哲学の１つは統合的な"ゼロ・コンフィギュレーション"体験を提供することです。エンジニアがすぐに使えるツールが与えられれば、より多くのテストを作成し、その結果としてより安定的で健康的なコードベースに繋がることを目の当たりにしてきたのです。 続きを読む

FRONTEND CONFERENCE 2017でReactハンズオンを開催しました - マルシテイア

2017/03/24 41 users React マルシテイア ハンズオン 梅田 身体

2017 - 03 - 24 FRONTEND CONFERENCE 2017でReactハンズオンを開催しました speakerdeck.com 2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。 kfug.jp 今回のハンズオンでは Reactアプリケーションの開発を身体で覚える React開発環境におけ... 続きを読む