Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
useContext + useReducer の使いどころ - パンダのプログラミングブログ
TR;DR useContext は、階層の深いコンポーネントに state を渡す場面で使うと良い useReducer は、state の変更パターンが多い場面で使うと良い useContext + useReducer は、state を使うコンポーネントの階層が深い上に、前回の state を元に新しい状態を作る場面で使うと良い useContextだけを使うケース useContext は React の組み込みの Hooks の1つです。Provider でラップしたコンポーネントのツリーのどこからでも、同一の Context Object を参照できるようにする Hook です。 useContext は Context を通じて子や孫以下のコンポーネントで同一の JS オブジェクトを呼び出せる Hook です。これにより props のバケツリレー （Props Drill
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
Reactのためのwebpack環境整備 - Qiita
勉強のためにPython django + Reactの構成で実験アプリを作っていて、その時に知ったwebpackの設定などをまとめておきたいと思います。 ちなみに、もしPython django + Reactの構成でWebアプリを作成するのなら、非公式ですが以下にプロジェクトのボイラープレートを公開してくださっているものがあるのでこれを使うのが楽そうです。 Django, React, Bootstrap 4 with Python 3 and webpack project boilerplate https://github.com/vintasoftware/django-react-boilerplate 今回は、同じような構成を作ろうとすると何が必要なのかを勉強するため、上記を参考にさせてもらいつつ、自分で整備してみました。 create-react-app まず、そもそもr
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
This document discusses React Native and best practices for building mobile apps. It covers getting started with React Native, setting the application ID and bundle identifier, versioning, build types, integrating Fabric and Firebase, and using Fastlane for deployment. Tips are provided for configuring Android and iOS projects as well as continuous integration/delivery best practices.Read less
Reactアハ体験 - Qiita
Reactはちょっとしたコツを掴むと一気に理解が進みます。 Googleのデベロッパーであり数々のReactトレーニングを手がけてきたTyler McGinnis氏によるReact "Aha" Momentsが非常に参考になるため、本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://tylermcginnis.com/react-aha-moments/ 私が技術的なコンテンツを教えたり書いたりする時の主な目標の1つは「アハ体験」を最大化することです。アハ体験は物事が突然理解できた瞬間のひらめきです。私たちは皆これを体験してきましたし、私の知る最高の教師たちは聴衆に応じて、それらの瞬間を最大化するための教えを最適化することができます。 ここ数年、私はほぼ全ての一般的なメディアでReactを教えてきました。その間、私はReact習得
React AJAX Best Practices
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features. It's good to know, but not very helpful when you just want to get data from the server into your React components. The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the w
Presentational and Container Components
BismuthUpdate from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separ
React + Redux の勉強のためにお試しアプリを作成した - Qiita
React + Redux を勉強しようと試しにアプリを作成してみました。 GeneticAlgorithm でテストベットとなる問題（ナップザック問題）を解く様子を可視化したアプリ コード: https://github.com/namutaka/genetic-algorithm-viewer 実行例: https://namutaka.github.io/genetic-algorithm-viewer/ その時に自分なりに理解したポイントをメモ的にまとめておきます。 Reactは、Componentと呼ぶ独自の機能を持ったHTMLタグを作り、それを組み合わせて画面を作る。 Componentはいろいろな方法で作成できるけど、React.Componentを継承したclassと作るのが基本になる。 Componentは、stateとprops(properties)という２つのデータ
React基礎 · GitBook
React基礎 レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」 おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p
Reactを「webpack + babel-loader」でビルドする方法
自分はReactのビルドにBrowserifyを主に使用しており、昨年には『Reactをnpmでビルドする方法 browserify (watchify) + babelify編』という記事も書きました。ただ、ここ最近のwebpackの人気っぷりはすさまじいものがあり、「React + webpack」という組み合わせが今後のスタンダードになってもおかしくないという状況なので、今回はwebpackでReactをビルドする方法をまとめてみました。 webpackとは webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツールです。Browserifyとの大きな違いは、対象となるのがJSファイルだけでなく、CSSファイルや画像などに及ぶというところでしょうか。また最終的に生成するファイルも複数にわけることもできたりします。プラグインがすでに含まれていたり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - redux-utilities/redux-actions: Flux Standard Action utilities for Redux.
GitHub - vintasoftware/django-react-boilerplate: Django 5, React, Bootstrap 5 with Python 3 and webpack project boilerplate
GitBook – Knowledge management for technical teams
Home | nivo
React Ajax Example
React.js・ReactNative・Redux入門
ReactとFluxのこと // Speaker Deck
React