はてなブックマーク

Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第5回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/usecontext-hook/ すべての新しいReact Hooksの中で議論中のテーマがあります。ほとんど全てが、ファンクションコンポーネントをクラスコンポーネント同等にするために存在しています。 useContext フックは少し違っています。仕事をよりラクにしてくれるだけのものです。 ReactのContext APIを知らない方のために補足しておきますと、アプリケーション内深くまでデータを渡す方法、それも手動で複数階層にまたがってバケツリレーをせずに済む方法です。データを引き回すことさえできれば良いという時には、Reduxのようなツールの代替手段として機能

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 でのデータ取得事例

Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第3回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/usereducer-hook-examples/ 新機能React Hooksの中で、名前だけをみると、これが最もホットです。 「reducer」という言葉は、多くの人にReduxのイメージを思い起こさせますが、この記事を読んだり、React v16.7.0 alphaから使える新しい useReducer フックを使うのにReduxを理解する必要はありません。 「reducer」は実際どんなもので、 useReducer を使ってコンポーネントの複雑なstateをどう管理するのか、そして、この新しいフックはReduxにとって何を意味するのかについてお話します。R

Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第4回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/useeffect-hook-examples/ 想像してみてください。完璧なファンクションコンポーネントにある日、ライフサイクルメソッドを追加しなければらなくなったと。 ああ。 「何とかして回避できるかもしれない？」それが最終的には「もういいや、クラスに変更しよう！」となります。 class Thing extends React.Component に始まり、関数の本体を render にコピー＆ペーストし、最終的にライフサイクルメソッドを追加します useEffect フックならもっと上手くやれます。 useEffect によって、ファンクションコンポーネント

Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第2回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/usestate-hook-examples/ これまでは、ファンクションコンポーネントで書き始めて途中からstateが必要な局面になると、コンポーネントをクラスに書き換える必要がありました。 class Thing extends React.Component を書き、関数の本体を render() メソッド内に移植し、インデントを修正して、ようやくstateを追加することができます。 今日は、Hooksを使って同じ機能を手に入れることができます。 「フック」とは何でしょうか？良い質問です。Hooksについてはここで学んでください。 この記事では、特に useS

Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第1回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/intro-to-hooks/ 先日、ReactチームはHooksと呼ばれる大きな新機能をリリースしました。 興奮を抑えきれないのですが、落ち着いて全体を見ていきましょう。 Hooksとは？ ご存知の通り、Reactのクラスコンポーネントはstateを保持することができ、ファンクションコンポーネントにはそれができません。 また、クラスコンポーネントはライフサイクルを持ち、ファンクションコンポーネントはそれを持ちません。 クラスコンポーネントは PureComponent を継承できますが、ファンクションコンポーネントは都度レンダリングされます。 ところが、Hooks

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JAMstackの概要を意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://jamstack.org/ 「スタック」について言及する際、OS、特定のWebサーバ、バックエンドのプログラミング言語やデータベースについてはもう触れる必要はありません。 JAMstackは特定のテクノロジーではありません。これは、高速化、堅牢なセキュリティ、スケーリングコストの低減、そしてより良い開発者体験をもたらすWebサイトやアプリケーションを構築する新たな手法です。 JAMstackとは？ 下記3点の基準を満

Dave Ceddia氏によるRedux vs. The React Context APIを本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/context-api-vs-redux/ React 16.3は新Context API（旧Context APIはほとんど知られておらず、また非推奨であったことから、生まれ変わったと言っても良いでしょう）を追加しました。 Context APIはReactの第一級オブジェクトとして公式のものとなったのです。 React 16.3 が登場するや否や、Context APIがもたらすReduxの終焉についての記事がWeb上を賑わせました。しかしReduxは言うでしょう、「私が死ぬだって？馬鹿馬鹿しい」と。 この記事では、新Context APIの機能、Re

Ryan Florence氏のReact Rally talkはこの原則をより深くカバーしているのでオススメです。 2つのコンポーネントがstateを共有したい場合、stateを同期させるのではなくstateを持ち上げる必要があります。 コンポーネントベースのアーキテクチャでは、stateの共有は自ずと困難になります。2つのコンポーネントが同じstateに依存する場合、そのstateはどこにあるべきでしょうか？これは最終的にReduxで決着した解決策のエコシステム全体を活性化するような人気のある質問でした。Reduxの解決策は「store」と呼ばれる別の場所にstateを集約することです。コンポーネントはstoreを必要な部分だけ購読でき、storeを更新するための「actions」をdispatchすることもできます。Reactの解決策は2つのコンポーネントの最も近い親を探し、そこで共有

React Redux Starter Kit の概要を意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/davezuko/react-redux-starter-kit/blob/master/README.md 廃止予定の警告 Reduxエコシステムの到来により始まったこのプロジェクトは、ユーザーのクイックスタートを支援することが目的でした。 それ以降、ツール群やベストプラクティスは劇的に進化しました。可能な限り最新の経験を得るために、多くのReactとReduxのコア開発者がサポートするcreate-react-appのようなものをチェックすることをお勧めします。 React Redux Starter Kit このスターターキットは、素晴らしいフロントエンドテクノロジーを多数搭載して稼働させるために設計されています

9 things every React.js beginner should knowを意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 私は約6ヶ月間React.jsを使用してきました。それほど長い歴史ではありませんが、あなたがひげの長老として扱われるようなJavaScriptフレームワークの目まぐるしい世界の大きな枠組みの中で、私は最近、React初学者のTipsで少数の人々を支援してきましたので、ここでより多くの人々にその内容を共有するのが良いアイデアであると思いました。これらは全て私が始めた時に知っておきたかったことか、もしくはReactを習得するために本当に役立ったもののいずれかです。 あなたが絶対的な基本を知っていると想定して話を進めますが、もしコンポーネント、propsやstateなどの言葉に馴染みがなければ、公式の入門やチュートリアルページを読むと

Robert Chang氏によるYou don't (may not) need Lodash/Underscoreを和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/cht8687/You-Dont-Need-Lodash-Underscore LodashとUnderscoreは必要ない（かも） LodashとUnderscoreは素晴らしいモダンなJavaScriptユーティリティライブラリであり、フロントエンド開発者に広く使われています。しかしながら、モダンブラウザがターゲットとなる場合、ES5やES6のおかげでネイティブにサポートされたメソッドが多くあることに気づくでしょう。プロジェクトの依存関係を減らし、ターゲットブラウザが明確になっているのであれば、LodashとUnderscoreは必要

React初学者のためのガイドで著者のPete Hunt氏がオススメしていたwebpack入門を和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/petehunt/webpack-howto Webpack入門 このガイドの目的 これはwebpackで物事を成し遂げるためのクックブックです。インスタグラムで実際に使用されているものをほぼ網羅した実践的な内容となっています。 私からのアドバイス：まずはこれをwebpackの参考資料として手元に置いて始めてみましょう。公式ドキュメントは理解を深めるために後で参照することにしましょう。 前提条件 browserify、RequireJSまたは類似したものを知っていること 下記のいずれかに価値を見出していること バンドルの分割 非同期ローディング 画像やCSSの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React初学者のためのガイドを和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/petehunt/react-howto React初学者のためのガイド あなたがReact（もしくは一般的なフロントエンド）の初学者である場合、Reactのエコシステムがわかりにくいものに感じられるかもしれません。これにはいくつかの理由があります。 Reactは歴史的にアーリーアダプターや専門家を対象としてきました Facebookは実際に使用しているもののみをオープ