一番文句言われなさそうな React コンポーネントの書き方
最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型
HTMLコーディングでもReact+TypeScriptの開発体験を得る
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
Reactのパフォーマンス改善を勉強会で開催しました - JX通信社エンジニアブログ
はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な
Axios Wrappers in React Typescript
So I recently had to make some changes to a React code base that was fairly unfamiliar to me. My task was to make a PUT API request to an external endpoint, in order to update a user profile upon a certain state being toggled on. It seemed like an easy enough task as I knew I could just tap into the installed axios package to make API calls... until I opened up the code repo and saw abstraction up
React Routerで認証を制御する方法 - Qiita
React Routerで認証を制御する方法です。試行錯誤して良さそうな実装方法を発見したのでご紹介します。 アプリに認証があると、画面ごとに、 認証済みユーザのみアクセスを許可したいページ アカウント設定など 認証していないユーザのみアクセスを許可したいページ ログイン・新規登録など 認証に関係なくアクセスを許可したいページ Qiita投稿のようなパブリックなコンテンツなど の設定が必要になる場合があります。 React Routerのサンプルをいくつか見たところ幾つか認証を制御する方法が示されていました。 onEnterを使う方法 AuthenticatedComponent onEnterを使う方法 本家のサンプルで例示された実装です。現在βのreact-router 1.0.0が必要になります。 function requireAuth(nextState, transition)
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
「スタディサプリ」が React Native から卒業するまで、あるいは技術的負債への感謝と敬意 - スタディサプリ Product Team Blog
こんにちは、Quipper iOS エンジニアの @manicmaniac です。 現在スタディサプリ iOS アプリ開発チームのエンジニアリングマネージャをしています。 今回はスタディサプリで長らく使われていた React Native のコードを Swift に書き換えた話をします。 実は React Native から Swift への置き換え自体は半年ほど前に完了していたのですが、ブログに記すのに時間がかかってしまいました。 スタディサプリにおける React Native の利用 Quipper では 2017年ごろから React Native を iOS / Android アプリ開発に利用し始め、スタディサプリでは 2018年3月ごろから徐々に React Native を iOS アプリケーション開発に導入していました。 iOS 版スタディサプリの、git から取り出した
React でカスタムページネーションを構築する方法 | DigitalOcean
はじめに リモートサーバー、API、またはデータベースから大量のデータレコードをフェッチする必要がある、Webアプリケーションの構築することがよくあります。たとえば、支払いシステムを構築している場合、何千ものトランザクションをフェッチしている可能性があります。それがソーシャルメディアアプリの場合なら、多くのユーザーコメント、プロファイル、またはアクティビティをフェッチしている可能性があります。いずれの場合でも、アプリを操作するエンドユーザーにとって便利な方法でデータを表示するためのソリューションがいくつかあります。 大きなデータセットを処理する方法の1つは、ページネーションを使用することですデータセットのサイズ（データセット内のレコードの総数）が事前にわかっている場合、ページネーションは、効果的に機能します。次に、エンドユーザーとページネーションコントロールとのやり取りに基づいて、データセ
React.js の Context API で Private Route を作る - Qiita
Reactでログイン機能があるSPAを開発する際に、特定のページ（ルート）を秘匿したい場合があると思います。 今回はReact v16から実装されたContext APIを使ってプライベートなルートを作成します。 Context APIとは Context APIはProviderとConsumerという機構を使い、異なるコンポーネント間でデータの共有を可能にするものです。大まかな概要は以下の通りです。 createContextはProviderとConsumerというコンポーネントのペアを返す Providerはデータとコールバックを保有するコンポーネント ConsumerはProviderのデータを購読しコンポーネントにデータを渡す 環境 ライブラリのバージョン Library version
SPAでのログイン処理のやりかた - Qiita
概要 こちらの記事の続きです。 SPAの静的ファイルのデプロイの仕方 SPAでも、大体のアプリはユーザー登録やログイン機能があると思います。 その際に、SPAでどうやってログイン済みか否かを判別するか、その際のルーティングをどうするかについて正解がないように思うので、自分なりのやり方を共有します。 環境 NodeJS 5.X~ React 15.1 TypeScript 1.8 全体の構成はこちらをご覧ください。 https://github.com/uryyyyyyy/react-redux-sample/tree/spa-auth ゴール ログイン済みであれば、ログイン画面にアクセスしてもホーム画面にリダイレクトされる ログイン済みでなければ、どのページにアクセスしてもログイン画面にリダイレクトされる ログイン済みでない場合、アクセスしたページがレンダリングされる前にリダイレクトされる
初めてReactを触ってみたが、ログイン周りの決定打が見つからなかったので自分で書いてみた。 - Qiita
きっかけ 先日Rectを触る機会があり、事前準備として本も読み。自分なりにモチベーションを上げて いざプログラムを書いてみようとしたところ、ログイン周りについてReact界でのお作法を何も知らんな？ということに気が付きました。 ちなみに読んだ本はこちら 【りあクト！ TypeScriptで始めるつらくないReact開発 第2版】 https://booth.pm/ja/items/1312652 いい本です。この本に巡り合えたことに感謝！ 少し調べてみたけど、「私はこんな感じで書いてみた」とかは色々出てきますが、ライブラリでサクッと終わらせるものがない・・・ような気がする。。。 で、いろいろ見た結果、自分で書いてみることにした。 色々な人が公開しているプログラムのいいとこどりなので、見た目もすっきりでコード量も少なく良い感じかと思っています。 今回は、メールアドレスとパスワードで認証という
【検証】React.FC と React.VFC はべつに使わなくていい説
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
When to use JSX.Element vs ReactNode vs ReactElement?
I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components. I have always used JSX.Element as the return type, now this doesn't work any more if a component decides to not render anything, i.e. returns null, since null is not a valid value for JSX.Element. Th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Router: Declarative Routing for React
React-Router External link
eslint-plugin-react/docs/rules/destructuring-assignment.md at master · jsx-eslint/eslint-plugin-react
GitHub - mbrn/material-table: Datatable for React based on material-ui's table with additional features
devise導入済みのrailsへのreact SPAからログインする機能の実装 - Qiita
Remove React.FC from Typescript template by Retsam · Pull Request #8177 · facebook/create-react-app
(react props) is missing in props validation ERROR · Issue #2777 · jsx-eslint/eslint-plugin-react