知ってると得をするReactコンポーネントのイケてる書き方 - Qiita
はじめに 基本的にReact + TypeScriptでフロントの開発をしているんですが、実際にコードを書いている時に気をつけていること、便利な書き方として知っておくと得をするReactコンポーネントの書き方を紹介します。 Propsが多くなりすぎたら やたらpropsが多くなってしまうことありませんか？しかも同じような名称ばっかりを何回も書くことになるという。そうゆうときはできる限りショートハンドで書きましょう。 return ( <SampleComponent type={user.type} name={user.name} email={user.email} image={user.image} /> )
React with TypeScript Cheatsheet
Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T
React + Redux + TypescriptでサンプルWebアプリ - Qiita
こんな感じの画面が出ます。 Reduxの導入 次に、Reduxを入れます。 Reduxとは、 Stateを管理するフレームワークです。Facebookが提唱しているFluxアーキテクチャの概念を拡張して扱いやすく設計されたライブラリです。 Fluxのコンセプトはこの辺を見てください。 Reactはpropとstateを持ちますが、アプリケーションの規模が大きくなると、コンポーネント間のstate管理が難しくなります。Fluxアーキテクチャはこの問題を解決してくれます。 簡単に説明すると、以下のようなA〜Zまでのコンポーネントがあったとします。（雑な図ですみません。。。） 開発途中で、コンポーネントCとZのstateを共通化したくなった場合にstateをコンポーネントAに移植する必要がありますが、その場合、propsを渡すために依存関係のあるB、D〜Yまでのすべてのコンポーネントを修正する必
TypeScript学習ロードマップ - Qiita
TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ
最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート
最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート こんにちは。 今年の4月にヤフー株式会社にデザイナーとして新卒入社した、三好 健太（@three4c）です。9月3日（火）にヤフーのセミナールームで「Bonfire Frontend #4」を開催しました！ このイベントの目的はフロントエンドが抱える課題を共有し、フロントエンドについて熱く語る会です。 今回のテーマは「最新のフロントエンド技術 〜夏休み総復習〜」。初心者の方でも理解しやすい内容となっており、デザイナーの私も多くの知見を得ることができました。 ヤフーからは浜田と内藤が登壇し、ゲストスピーカーとしてサイボウズ株式会社より向井 咲人さん、株式会社ディー・エヌ・エーより吉井 健文さんにお話しいただきました。 これからは
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
wasm-bindgen + wasm-pack + webpack で フロントエンド - Qiita
色々やったら手数が多くてややこしかったので、現時点のセットアップをメモがてら記事に書くことにした。 想定読者は フロントエンドプログラマ or Rust プログラマ。両方詳しいことは想定していないので、それぞれで自明なこともみっちり書くことにした。 node/npm と rust/cargo (rustup) のセットアップは略。ググればいくらでも出てくるので… 概要 webpack: 静的アセットを生成するバンドラー ts-loader: webpack で .ts ファイルを typescript として読み込む loader。wasm-pack が typescript の型定義を生成するので、せっかくなので ts もセットアップする @wasm-tool/wasm-pack-plugin: webpack 内で wasm-pack で生成されるコードを読み込むもの html-web
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react-redux の useStore を使うタイミング - fsubal