Tao of React - Software Design, Architecture & Best Practices
Tao of React - Software Design, Architecture & Best PracticesJanuary 18, 2021 • 25 minute read I’ve been working with React since 2016 and still there isn’t a single best practice when it comes to application structure and design. While there are best practices on the micro level, most teams build their own “thing” when it comes to architecture. Of course, there isn’t a universal best practice tha
Recoil
Minimal and ReactishRecoil works and thinks like React. Add some to your app and get fast and flexible shared state. Data-Flow GraphDerived data and asynchronous queries are tamed with pure functions and efficient subscriptions. Cross-App ObservationImplement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.
NextJS(Typescript)の環境に ESLINT/Prettier をツッコミ CircleCI の設定に追加する - Qiita
NextJS(Typescript)の環境に ESLINT/Prettier をツッコミ CircleCI の設定に追加するTypeScriptCircleCIReactNOWNext.js tslint を利用しようと思いましたが、2019 年に ESLINT に統一するようになるよって話があるのでhttps://github.com/palantir/tslint/issues/4534ESLINT に変更して作成します。 今回のレポですが、環境作成の準備段階として、 - NextJS(Typescript)を now にデプロイする - Next.jsではじめるTypescript環境 の続きです。 Table of Contents Prettier と es-lint を追加する husky を追加して precommit/prepush の前に lint と formatter
【React hooks】意外と知らないrefの使い方 - Qiita
Reactでコンポーネントから子コンポーネントや要素などを操作するときに便利なrefだが、 意外に調べても使い方が出てこなかったので、様々な利用シーンに合わせて使い道をまとめてみた。 DOMにアクセス import React, { useRef, useEffect } from 'react'; const Component = () => { const el = useRef(null); useEffect(() => { console.log(el.current); }, []); return ( <div ref={el}>DOM</div> ); }; export default Component; import React, { useRef, useEffect } from 'react'; class Child extends React.Compon
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
Reactからcanvasを使って絵を書く - Qiita
canvas上に絵が書けるcomponentをReactで作ってみました。 ポイント 書いている状態かどうかをstateで管理 contextの取得 this.refs.canvas.getContext('2d') offsetX,offsetYはnativeEventからアクセスする canvasのwidth/heightはcssではなくHTMLのプロパティで指定する コード import React, { Component } from 'react'; const style = { border: '1px solid gray', backgroundColor: 'white', }; class Canvas extends Component { constructor() { super(); this.state = { drawing: false }; } ge
DOM 要素 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 Common components (e.g. <div>) <input> <option> <progress> <select> <textarea> React はパフォーマンスとブラウザ間での互換性のために、ブラウザから独立した DOM システムを実装しています。このことを機に、ブラウザの DOM 実装にあるいくつかの粗削りな部分が取り払われました。 React では、DOM のプロパティと属性（イベントハンドラを含む）全てがキャメルケースで名前付けされる必要があります。例えば、HTML 属性 tabindex に React で対応する属性は tabInd
TypeScript + React: Component patterns
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
React + TypeScript で react-router の URLパラメーターを取得する - Qiita
React + TypeScript で react-router の URLパラメーターを取得する時に、このようなコードでprops.matchを参照するとTS2339: Property 'match' does not exist on type '{ children?: ReactNode; }'.とエラーがでました。 import React, {FC} from "react"; const Page: FC<{}> = props => { return ( <div>This is {props.match.params.id} Page.</div> ) }; export default Page; たしかにmatchプロパティは、propsが受け取るオブジェクトとして定義されていないよな。。 と思ったものの、それならどのような型を読み込めば良いのかが分からなかったの
react-router@v4で unit test や snapshot test をする - Qiita
tl,dr; <MemoryRouter>使えば良い。 例示 シンプルなパターン 例えばこんなrouter設定で考える。 import React, { Component } from 'react'; import { BrowserRouter, Switch, Route } from "react-router" export const SomeRouter = ({path = ""}) => { return ( <Switch> <Route path={`${path}/foo`}><div className="foo">foo</div></Route> <Route path={`${path}/baz`}><div className="baz">baz</div></Route> <Route path={`${path}/shallow`}><div><di
How to manually trigger click event in ReactJS?
How can I manually trigger a click event in ReactJS? When a user clicks on element1, I want to automatically trigger a click on the input tag. <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>
React.memo を使ったパフォーマンス最適化について - 30歳からのプログラミング
パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばいいのか見当をつけることすら出来ず、的外れな対応をすることにもなりかねない。 React.memoを使った処理の最適化は、React アプリのパフォーマンス改善のための、基本となるテクニックのひとつである。 この記事のコードは React のv16.10.2で動作確認している。 メモ化という概念 React アプリのパフォーマンス最適化を理解するためにはまず、メモ化（Memoization）という概念を把握しておく必要がある。 大雑把に言ってしまうとメモ化とは、何らかの計算によって得られた値を記録しておき、その値が再度必要になったときに、再計算することなく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - szmslab/material-ui-flat-pagination: A pagination component for Material-UI using Button component.
Dynamically add child components in React
GitHub - embiem/react-canvas-draw: React Component for drawing in canvas
OpenChakra
How to test a React component with RouteComponentProps?
How to disable the rule react-hooks/exhaustive-deps? · Issue #6880 · facebook/create-react-app
GitHub - react-cropper/react-cropper: Cropperjs as React component
react-dropzone