React テスト応用、テストに悩む人へ
2022-05-06 更新 「React でコンポーネントテストを書くといいらしい、 React Testing Library や jest でサンプルを参考に書いてみたが 現実どうやってプロダクトコードに合わせていけばいいか分からない」 そういった方が対象となる本を目指しています。 いろいろ調べて実践したものの下記のように感じた方に適しているかもしれません。 - 結局テストで何を担保しようとしているか分からない - React のテストでハマっているか、Jest でハマっているか分からない - モックとかスパイとかアプリケーションとは遠い出来事も多くてピンとこない 誤り・ご指摘あればフィードバックいただけると嬉しいです。 無料で配布していますが、気に入ったらサポートなどいただけると今後もこの本をアップデートし拡張していく気持ちになれるのでよろしくお願いします。
React Context を export するのはアンチパターンではないかと考える | stin's Blog
Context を export するなみなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React Context とはその前に React Context についてざっと解説していきます。 Context は、コンポーネントをまたいだ値の共有を実現するためのオブジェクトです。 createContext で生成することができます。 import { createContext } from "react"; const context = createContext<string>("initial value");
【2021年】React / TypeScript使用のためのDocker + Vagrant環境を構築する - Qiita
目的 下記の技術を使ったフロントのコンポーネントの作成を行うための環境構築を行いました。 React TypeScript 目的は上記の利用ですが、本記事としてはReact/TypeScriptを触れることはありませんので、Node.jsを利用する環境の構築には利用が可能かと思います。 DockerだけでなくVagrantを採用している理由としては、自分の開発環境がmacであり、 参考記事に記載の理由で動作が遅いことを解消するためです。 参考記事 DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる 前準備/筆者の環境 参考記事に記載のVagrantやMutagenのインストールが必要です。 筆者の環境としては下記となります。 MacOS 11.1 Vagrant 2.2.7 Mutagen 0.11.8 作成するもの 下記の4つのファイルを作
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をするJavaScriptReactreact-hooks はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は
React Final Form
High performance subscription-based form state management for React From day one, Final Form and React Final Form were designed to be modular: you put the pieces together to build the form library that fits your requirements. Why should your users need to download complex code for handling arrays of fields when your signup form is just four fields? Only two peer dependencies: React and Final Form.
React + Material-UIを使用してMaterial Designのコンポーネントを作成する
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 最近案件などで Material-UI という React 用UIコンポーネントライブラリを触る機会が多くなり、知見が溜まってきたので今回は Material-UI の基本的な使い方についてまとめたいと思います。 Material-UI とは？Material-UI は、 Google の Material Design をベースに作られた React 用UIコンポーネントライブラリです。 Material-UI を使うことで手軽に Material Design を取り入れたコンポーネントを作成することができるようになります。 また、それぞれのコンポーネントが Material Design に基づいてデザインされているのみでなく、色定義や間隔、タイポグラフィなど細かい面に至るまで Material Design をベー
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
React Typescript Cheatsheet
Here are a few patterns I find useful when building a project in React + Typescript. When starting out I didn't find the JSX and React types obvious or particularly well documented, so I'd like to maintain a list of what types to use in different situations. This is just a start, so I'd love to know what patterns you all find useful and what I should add to the list. Also, if there is anything her
React HooksとGraphQLで社内レガシーサービスを巻き取ってみたらものすごくはかどった話
New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source
レガシー React Project で実践してきたこと - Qiita
はじめに この記事はギルドワークス Advent Calendar 2019の21日目の記事になります。 現在、約3年以上開発を続けているReactのProjectに関わっているので、ここ半年で取り組んだカイゼンの内容についてここにまとめたいと思います。 改善前(半年前)のProjectの状況 以下が半年前のProjectの状況です。 現在と構成が変わっていない部分はあります。 Rails + Webpacker + Reactの構成 React.js v16.4.x Redux v4.0.0 ただし状態管理はreduxのstoreを使っていたり、Componentのstateを使っていたり統一感がない状態 非同期処理のmiddlewareには redux-saga を使用 UI補助ライブラリとしてmaterial-uiとbootstrapを併用 Component単位で依存しているUI補
トップデベロッパーになるために作成したいアプリ8選 - Qiita
こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行き数時間運動をして汗をかかなければ健康は手に入りません。 同じことが開発にも言えます。努力なしに優れたデベロッパーになることはできないのです。 そこで、コーディング力を鍛える8つの素晴らしいプロジェクトを紹介します。 あなたの好きなテクノロジースタックを使っ
React Router v5.1 で導入された Hooks API について - 30歳からのプログラミング
React Router のv5.1で Hooks API が導入された。 reacttraining.com URL パラメータやhistoryオブジェクトなどを、より簡単に取得できるようになった。 これまでの書き方も使えるが、今後のバージョンアップで非推奨になる可能性が高いとのことなので、今のうちに Hooks を使った書き方に慣れておいたほうがいいかもしれない。 個人的にはwithRouterを使わなくてもよくなるのが便利だと感じた。 この記事の内容は以下のバージョンで動作確認している。 react@16.10.2 react-router-dom@5.1.2 今回導入された API は以下の4つ。 useParams useLocation useHistory useRouteMatch コードを見ると、どれもReact.useContextを使って実装している模様。 react
Reactの無料教材「Full Stack Open 2019」 - JavaScript勉強会
フィンランドのヘルシンキ大学のプログラミング講座が無料で公開されています。 fullstackopen.com Learn React, Redux, Node.js, MongoDB, and GraphQL Reactなど、JavaScriptでWebアプリを作る際に使われる技術について学習できます。 （紹介記事） developer.feedforce.jp この講座をブックマークして、時間だけが過ぎてしまったので、今日から読み始めてみたいと思います。 （今からやらないと年を越してしまう可能性もあるｗ） React利用の説明方法を参考にしてみたいと思います。 ライセンス Authors and License The course material is written by Matti Luukkainen. Numerous people have improved and co
react-spinners
Usage Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders. Each loader accepts a loading prop as a boolean. The loader will render null if loading is false. Example import { useState, CSSProperties } from "react"; import ClipLoader from "react-spinners/ClipLoader"; const override: CSSProperties = { display: "block", margin: "0 auto", borde
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
useEffect の概要と async function を使う際の注意点 - 30歳からのプログラミング
使用している React のバージョンは16.8.4。 レンダー後の処理を指定するための仕組み React Hooks の一つであるuseEffectは、レンダー後に実行したい処理を React に伝えるための仕組み。 useEffect(fn)と記述すると、DOMの更新が終わったあとにfnを実行する。 useEffectはレンダー後に必ず実行される。最初にレンダーした際もそうだし、propsやstateに変更があってレンダーし直した際もそう。そこに区別はない。 以下の例では、このコンポーネントが表示された際にeffect!というログが流れる。 そしてボタンを押下した際にも、その都度effect!というログが流れる。 import React, {useState, useEffect} from 'react'; const App = () => { const [state, set
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - antonioru/beautiful-react-diagrams: 💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
GitHub - covid19india/covid19india-react: Tracking the impact of COVID-19 in India
React Spinners