【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
useStateで配列要素を追加・削除・変更する方法 - Qiita
はじめに 今回はuseStateで配列を更新する方法について紹介していきます。（個人開発の備忘録も兼ねているので、何か気づいたことがあれば教えていただけると嬉しいです。） useStateで配列要素の更新を行う場合、pushなどを使用すると再描画が走りません。理由についてはこちらに詳しく解説がありました。 Reactではstateの値が変化した時にコンポーネントが再描画されます。 stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。 そのため、pushなどは使用せずに、新たに配列を作成して保存する必要があります。
New Free React Templates - Material UI
Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React marketing page, and more. Free templatesOur curated collection of free Material UI templates includes dashboards, marketing pages, sign-in and sign-up pages, a blog, a checkout flow, and more. They can be combined with one of the example projects to form a complete st
React で初期化時に 1 回だけ処理を実行したいときの書き方
現時点で React でクラス コンポーネントを書くことは稀になったと思いますが、クラス コンポーネントあったコンポーネントのマウント時に発生する componentDidMount は関数コンポーネントではなくなりました。ではどうやるかというと useEffect を使います。 function HelloWorldComponent() { // これはコンポーネントの初期化時にのみ実行される // 依存関係に空の配列を指定する必要がある React.useEffect(() => { console.log('Hello world!'); }, []); return ( <div>Hello world!</div> ); } 実際には初期化時には外部の API やデータ ストアへのアクセスといったロジックが含まれます。これらはカスタム フックなどを経由して実行されることが多いで
Dockerではじめるactix-web(Rust)とReact(TypeScript) - Qiita
はじめに インフラはDockerとDocker Composeです。 バックエンドはactix-web(Rustのフレームワーク) フロントエンドはReact(TypeScriptのフレームワーク) データベースはMySqlです。 リマインダー(todoリスト)を目標に開発を行います。 レポジトリーはこちらです。 RustはCargo.tomlに記述してパッケージをダウンロードする方式です。 パッケージの最新バージョンは以下で確認すると良いです。 また、Rustはtargetレポジトリーが非常に重いので、gitignoreに入れておくといいです。 バックエンド側 バックエンド側を実装します。 環境構築
全力で大きくなるReactのコードをスタイルガイドに沿って見直したら、大変勉強になりました | Wantedly Engineer Blog
Wantedlyでは今年に入って、Reactの導入や、webpackの導入によるビルドプロセスの変更、CoffeeScriptからJavaScriptへの変更など、フロントエンドの開発環境が大幅に変更されました。このあたりの話は高松の記事に詳しく書かれていますが、よりリッチなUIを効率的にチーム開発できるようになり、とてもいい変化でした。 コードの質にばらつきがReact導入時は、一つのチームだけReactの開発を行っていたのですが、複数チームが独立して開発するようになると、同じReactのコードでもチームごとに雰囲気の違うコードが出来上がっていました。 ここは括弧を付けるべきなのか、このインデントは好ましいのか、ここはSyntac Sugerを使ったほうがいいんじゃないかなど、疑問点がある度にチーム間で確認をとるのは大きなコストになるため、どこまで指摘するかはチームのレビュアーに依存して
React Hooks コンポーネントのPropsにデフォルト値をつけたい - かもメモ
// Credit.js export function Credit({ character, singer }) { return ( <> <b>{character}</b> <small>song by: {singer}</small> </> ); } こんな感じのコンポーネントがあり、props を渡さなければデフォルトで character, singer を表示させたい 1. オブジェクトの引数を分割代入で取る時のデフォルト値の与え方を使う 👇の形を使う function({ key = initValue } = {}) {...} cf. JavaScript 分割代入な引数にデフォルト値を設定したい - かもメモ // Credit.js export function Credit({ character = '大空あかり', singer = '遠藤瑠香'
React のレスポンシブ実装おすすめ 2023年版
みなさまにおかれましてはプロダクト開発でレスポンシブ対応はしていますでしょうか？ 自分はここ数年 PC 向け画面の開発ばかりやっており、今年になって久しぶりにレスポンシブ対応をがっつりやったのですが、最近の React 環境下でのレスポンシブ対応はどんな形でやると良い感じに使いやすくなるかなあと、社内のメンバーに相談しつつ調査しつつ、結果としてわりと納得できる形になったので、せっかくなのでここでシェアさせていただこうかなと思いこの記事を書くに至ります。 PC とスマホで、CSS が変わる程度のレスポンシブであれば CSS で media query を書けば済むので問題はないのですが、たまに HTML 構造ががっつり変わるのでコンポーネントレベルの出し分けが必要になるときがあります。 今回はそのようなケースを対象としています。 おすすめのレスポンシブ実装 早速ですがとりあえずコードを貼りま
【React × Typescript】サイドバーの開閉をuseContextで状態管理する - Qiita
import * as React from 'react'; import { Header } from '../../model/header/header'; export const Top = () => { return ( <> <Header /> </> ); } import * as React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import
Electron + Express + React で Web・デスクトップ共通のアプリを作る - Qiita
Electron + Express.js + React を使ってWebアプリとデスクトップアプリを共通のコードで作ってみたいと思います。 今回作成したコードは github に置いてあります。 参考にしたサイト Electron + Express で デスクトップアプリを作る 想定しているターゲット あまり無いとは思いますが，普段，サーバに繋がる環境ではブラウザからアクセスしてアプリを実行するけど，稀にサーバに繋がらないスタンドアロンの環境でもアプリを実行するようなケースを想定しています。 動作確認環境 OS macOS Mojave Electron 4.0.6 Express.js 4.16.0 React 16.8.6 Node.js v11.6.0 それでは早速ですが，アプリの雛形生成に express-generator を使用するので、インストールを行います。
Electron & React & Redux & TypeScript アプリ作成ワークショップ 3日目 - Qiita
1 日目 2 日目 3 日目（この記事） 4 日目 5 日目 6 日目 7 日目 8日目 9日目 概要 前回までに、 webpack を使った TypeScript のビルドと Electron の起動ができるようになりました。 今回は、 React-Redux を使った Skeleton コード的なものを書いていきます。React の基本的な書き方と Redux のデータフローを実感するために、簡単な下記のような画面を作成します。 テキストボックスに値を入れると、その下に同じものを表示する 訪問 ボタンを押すとカウンターをカウントアップする。 実装に入る前に、Redux について説明しておきます。 Redux のデータフロー 参考: Redux 入門【ダイジェスト版】10 分で理解する Redux の基礎 Redux はデータとその流れを制御するフレームワークです。 Redux には、い
React hooks: not magic, just arrays – Rudi Yardley – Medium
I am a huge fan of the new hooks API. However, it has some odd constraints about how you need to use it. Here I present a model for how to think about using the new API for those that are struggling to understand the reasons for those rules. Unpacking how hooks workI have heard some people struggling with the ‘magic’ around the new hooks API draft proposal so I thought I would attempt to unpack ho
Making Sense of React Hooks
(This article is also available on the DEV community without the paywall.) This week, Sophie Alpert and I presented the “Hooks” proposal at React Conf, followed by a deep dive from Ryan Florence: I strongly recommend to watch this opening keynote to see the problems we’re trying to solve with the Hooks proposal. However, even an hour is a big time investment, so I decided to share a few thoughts o
React Stateless Functional Componentを使うといい９つのポイント！（Class Based との違い）
React Stateless Functional Componentを使うといい９つのポイント！（Class Based との違い）ComponentReact それではいきます。 1 Classが必要ない constructorをつかわなくてもいいし、コードがシンプルになる。 2 thisが必要ない class based componentではTHISが必要だけど、functional componentではthisがいらない。thisって混乱しやすいから使わなくてもいいのはとっても楽！ ちなみに、bindはstatelessのコンポーネントの場合は必要ない。 3 UIに特化できる Stateless function componentはpresentational componentsにとって都合がいい。presentational componentというのはふるまいよりもU
React Native で世界地図を表示する - Qiita
はじめに 仕事で React Native を使って開発をしており、知見が溜まってきたのですが、記事に起こそうと悩んでる間にかなり経ってしましました。 今回は、画面上に世界地図を表示する方法についてです。 イメージは下記の感じです。 使用しているライブラリ d3-geo i18n-iso-countries react-native-svg topojson-client world-countries 実装方法 まずはマップデータ必要です。 日本地図はちょっと骨が折れるのですが、世界地図はこのデータを使えば簡単に対応できます。 import worldData from 'src/assets/data/world-110m.json' import { feature } from 'topojson-client'; const WorldMapPage: React.Functio
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終えて
React.useEffectで非同期処理をする場合の注意点2つ（変更あり） - Qiita
はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea
FluxによるReactアプリの状態管理 ReactHooks編 - Qiita
※ ReducerとVIEWコンポーネントの接続方法に関する記事を追加しました。 ReactHooks学習用にTodoリストを作成した際のまとめです。 Reactの基本事項は既に習得されている方向けです。 ReactのJSX記法を利用する為、Babelなどのトランスパイラを利用します。 webpackなどのモジュールバンドラーの利用も前提としています。 今回は、Parcelを利用しています。 Fluxとは Reactによるアプリケーション構築を保管する為に考案された、設計パターンです。 データの流れを一方通行にすること、アプリケーションの状態「State」を一元的に管理することで、アプリケーションの管理が煩雑化することを防ぐ試みです。 Fluxによるアプリケーションは、下記のパートで構成されます。 Dispatcher： アプリケーションへの更新情報を集約・通知 Store： アプリケーシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よく使うYup バリデーション(validation)一覧
react-vis