react-redux + typescriptでcountアプリ作成./src/store // reduxに関するファイルはここに ├── actionTypes.ts // actionTypeを作成 ├── counter // 機能ごとにフォルダを作成 │ ├── action.ts // action creatorを作成 │ ├── reducer.ts // reducerを作成 │ └── types.ts // 型定義を作成 └── index.ts // storeを作成
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する - Qiita
まずはじめに Reactはユーザインターフェース構築のためのJavaScriptライブラリです。 React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 - React公式より Reactのプロジェクトである程度規模が大きくなっていくと問題になっていくのは きちんと設計しないとビジネスロジック、コンポーネントのステート、表示 これらが入り混じって数百行の巨大なコンポーネント（モノリシックなコンポーネント）ができてしまう場合があることです。 確かにReactはユーザインタラクティブなViewの作成には強力な力を発揮しますが、 綺麗なコンポーネント設計に関しては利用者に委ねられています。 (Re
Next.jsとTypeScriptでアプリを作る - Qiita
はじめに Next.js 9がリリースされました。 TypeScriptを標準サポートし、ものすごく簡単にアプリが作れるようになったようなので、試してみましたので、お知らせします。 やること Next.jsでアプリを作ってみる。 WebAPIも作って、アプリから叩けるようにする。 できたこと herokuにデプロイしたもの Github 0. セットアップ セットアップは簡単でした。 以下のようにライブラリをインストールしましょう。 $ npm -s i next react react-dom typescript @types/react @types/react-dom @types/node package.jsonのscriptにはnext dev, next build, next startを書いておきましょう。 Next.jsは基本的にはサーバーサイドレンダリングのフレーム
TypeScriptでReact Hooksに入門するチュートリアル - Qiita
はじめに 本投稿の背景と目的 React HooksはReactアプリケーションを開発する際のファーストチョイスになっていると言っても過言ではありません。 Reactの初学者がHooksを学ぶ際に、一通りの情報は公式ドキュメントにまとまっているのですが、従来の公式チュートリアルのHooks版があったらいいのにな〜、と思いました。 というわけで、React Hooksに入門するためのチュートリアルを提供することが本稿の目的です。 なお、このチュートリアルではフックの中でも最も基本的かつ重要な useStateフックとuseEffectフックを習得対象とします。まずはこの2つを覚えれば、ちょっとしたReactアプリケーションの開発を始めることが可能です。 （2020-10-11追記） 「次に学ぶこと」の章を追加しました。 （2021-1-27修正） ステップ4で追加されたBookに設定するid
一番文句言われなさそうな React コンポーネントの書き方
最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型
React Hooksでデータを取得する方法 - Qiita
Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例
useEffectフックのしくみ - Qiita
Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第4回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/useeffect-hook-examples/ 想像してみてください。完璧なファンクションコンポーネントにある日、ライフサイクルメソッドを追加しなければらなくなったと。 ああ。 「何とかして回避できるかもしれない？」それが最終的には「もういいや、クラスに変更しよう！」となります。 class Thing extends React.Component に始まり、関数の本体を render にコピー＆ペーストし、最終的にライフサイクルメソッドを追加します useEffect フックならもっと上手くやれます。 useEffect によって、ファンクションコンポーネント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
useEffect / React Hooks – React入門