const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた

2023/02/22 184 users satoko React import return from

VTeacher所属のSatokoです。 QAエンジニアとフロントエンドエンジニアを兼任しています。 1.久しぶりにReactのプロジェクトに参加 リズミカルにキーボードを　タタンッ！　として、 import { FC } from "react" type Props = {} const Hoge: FC<Props> = () => { return ( <> </> ) } export default Hoge って、得意気... 続きを読む

Reactのprops/contextの使い分け - saneyuki_s log

2021/03/19 124 users CONTEXT React log saneyuki_s 議論

Reactのprops/contextの使い分け 仕事先でたまたまこれの話になり、個人的に思っていることをまとめた。 公開したのは、時々見かける「どっちを使うべき？」みたいな議論に 自分も混ざりたかった 思うところがあったから. 「とにかくpropsでいい」と自分は考えている。 なによりReactは書き方に詰まった場合に、フレーム... 続きを読む

props のバケツリレーって何が悪いんだっけ - fsubal

2021/03/11 206 users React fsubal コンポーネント バケツリレー 大半

#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のよ... 続きを読む

useCallbackはとにかく使え！　特にカスタムフックでは - uhyo/blog

2021/02/23 114 users uhyo useCallback React useMemo

Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する... 続きを読む

エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA

2020/07/16 355 users ICS MEDIA Vue.js エラー CLI Button

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @cli... 続きを読む

React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita

2018/02/06 190 users Qiita SPA 知見 React Redux state

Facebook が開発した UI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*... 続きを読む

ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita

2018/01/09 508 users Qiita React製 state jsx React

はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールで... 続きを読む

[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法 | Black Everyday Company

2017/10/29 120 users 図解 Black Everyday Company データ

引用:  Components#Composing Components - vue.js Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則として Pass Props/Emit Events で行う。 親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。 ... 続きを読む

reactjs - React Native ファーストインプレッション - Qiita

2015/03/28 338 users Qiita reactjs ファーストインプレッション 作法

React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデ... 続きを読む

耳から外したイヤホンを首にかけてスグに装着できる位置にキープする「Props」 - GIGAZINE

2012/10/08 226 users GIGAZINE quirky ポロン 灰色 着脱

使用していないイヤホンはカバンに入れるとスグに絡まってしまうし、かといってそのまま首にかけたりしているとポロンと落っこちて地面を引きずって汚れたりしてしまうので割と置き場所に困るもの。そこで、そんな悩みを解決するために、イヤホンをおしゃれに首から提げて着脱がしやすい場所にホールドしておくためのアクセサリーが「Props」です。 quirky - Props カラーバリエーションは黒、灰色、水色、ピ... 続きを読む