【注意喚起】ReactのuseStateの値がすぐに更新されない理由を誤って理解しがちな件について - Qiita
「state 更新 反映されない」を検索するまで Reactにまだ慣れていない段階で開発をしているとuseStateの問題に詰まってこのような検索をする方は多いかなと思います。 私もその一人で、公式のチュートリアルを一通りやったにも関わらずこの問題に詰まってしまったのは忸怩たる思いでございます。 「useStateで定義した値はset関数で更新できて、useStateはフックなので実行すると画面が更新される」というのはまずReactを勉強する最初の段階で理解するでしょう。 そこで、言われた通りにuseStateで値を定義し、ユーザーの操作によって画面を更新させるコードを書きます。 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#
Tremor
React components to build charts and dashboardsReact components to build dashboards20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, accessible and customizable.20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, accessible and customizable.
TypeScriptで「Reactを自作しよう」をやってみた - $shibayu36->blog;
最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。 やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/mai
なぜReactなのか - しゅみは人間の分析です
なぜReactなのか React, Cyclejs, Reduxを学んだ上でこれらの技術が何を解決したのかまとめてみる。発想はオリジナルではなく、今まで私が読んだ記事から拝借した解釈などが含まれている。たぶんReact, Fluxを学んだ人にとっては当たり前の感覚を言語化しているだけの内容となる。 TL;DR Q: なぜReactなのか A: フロントエンドが自由度の高いGUIアプリケーションになった。既存の手法では自由度の高いGUI実装を人間にわかりやすく管理することが難しくなった。 自由度の高いGUIな世界 自由度(複雑さ)の低い時代ではrender済みのDOMの上にDOMを操作する(jQueryによる)UIを載せる設計でも十分だった 現代のwebフロントエンドではVisual StudioやXcodeで作るネイティブGUIと同等の複雑さを求められる時代になっている jQueryだけで
Reactの考え方 | React 0.13 日本語リファレンス | js STUDIO
これは、元はReactの公式ブログへ投稿されたものです。 個人的な見解になりますが、ReactはJavaScriptを使用した大規模で高速なWebアプリケーションを開発する、 最も優れた方法であると考えています。 これは、FacebookとInstagramにおいて、我々にとって良い結果をもたらしてくれています。 Reactの優れた点の1つに、アプリケーションの構築を、どのように考えさせるかという事が挙げられます。 このページでは、Reactを使用した検索可能な商品データのテーブルを構築する過程を通して、学んでいきます。 まずは、モック作りから ステップ1: UIをコンポーネント階層に分割 ステップ2: Reactの静的版の構築 ステップ3: UIステートの必要最小限構成 ステップ4: ステートを使用するべき場所の特定 ステップ5: 別(逆)データフローの追加 最後に まずは、モック作りか
The Redux ecosystem
Or packages you should know to create a Redux production applicationWarning: This article is about front-end applications and nothing about server rendering. What’s going on?Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems re
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
React Router is dead. Long live rrtr. — Medium
React Router is dead. Long live rrtr. I apologize in advance to everyone for whom this makes more work. This will be better in the long run, I promise. I am now maintaining a fork of the old React Router as rrtr: https://github.com/taion/rrtr . The problem is that React Router as a project has fallen into a very slow release cycle. This is a problem. React Router isn’t feature-complete. React Rout
小さいReactアプリケーションのためのライブラリ書いた - Qiita
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita これ見て最近は大体自分も同じような感じのことをしているので共通化できる最小限のコードをライブラリにしてみた。 元記事でも言ってるようにやることはとても少ないのでライブラリ使わないでもいいんだけどそのへんは好み。 Usage まず普通のステートレスなReactコンポーネントを作る。dispatchというpropsを受け取ってそれを通してイベントを発火するというのが唯一の規約。 import React from 'react'; // Stateless component export default class Counter extends React.Component { render() { return ( <div> <div>{this.props.count}</div>
React v15.0 Release Candidate – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Sorry for the small delay in releasing this. As we said, we’ve been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood ████████████████████████████████████. WOW! But now we’re ready, so without further ado, we’re shipping a release candidate for React v15 now. As a rem
FRONTEND CONFERENCE 2016で、Reactコミュニティの動きについて発表してきた - マルシテイア
kfug.jp 先日、大阪梅田でFRONTEND CONFERENCE 2016が開催された。 (昨年渋谷で開催された Frontrend Conference The Final とは別物) 僕は「フレームワークと年月」という3人交代制のセッションにおいて、10分ほど話をした。 それについての補足と、イベントの感想を書く。 セッションの内容 タイトル: JS フレームワークと年月- ExtJS, AngularJS, React - いわゆるJavaScriptフレームワークについて、3人のスピーカーがそれぞれ紹介するという企画。 持ち時間が一人10分ほどなので、筋の通った内容にできるか不安だったが、@armorik83 さんの司会のおかげもあり「いま最もウェイ感あるReact, Angular2 vs 超老舗のExtJS」というわかりやすい構図になり、助かった。 「Designing
React.js Best Practices for 2016 | @RisingStack
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. 2015 was the year of React with tons of new releases and developer conferences dedicated to the topic all over the world. For a detailed list of the most important milestones of last year, check out our React in 2015 wrap up. The most interesting question for 2016: How should we write an application and
Reactチュートリアルやった - hitode909の日記
最近Reactというのが流行ってるらしいのでチュートリアルやってみた． facebook.github.io 最初は順調だったけど，まちがってauthor="{comment.author}"って書いてて，しばらくこの状態だった． 上の書き方は間違いで，author={comment.author}が正しい． 完成して，コメント書けるようになった．手抜きでサーバー側は実装してない． なんとなく最近できたものというイメージだったけど，もう2年以上もあった． facebook.github.io 同じ日に僕はパソコンにシール貼るとべたべたして嫌とか書いてた．差を感じる． hitode909.hatenablog.com サンプルコードそのまま真似して書いてみると，手軽な雰囲気だった． エラーメッセージもていねいで，ここがおかしいぞ^^^って教えてくれたり，ソースマップが有効になってるのか，.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mantine
GitHub - uber/react-vis: Data Visualization Components
TechCrunch | Startup and Technology News
