日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
React-Reduxを簡単に利用するためのパッケージ@jswf/redux-moduleを利用して、最小限の労力でToDoアプリを作成するという内容です。 ※追記 @jswf/redux-moduleの使い方は以下記事で、もう少し短いソースにて確認できます React-ReduxだけどReducerもActionも書かず、Dispatchすら使わず、データも何となく受け取れるようにする方法 最初に プログラムはファイル一つだけにまとめました。 内容は以下のように構成されています。 データ構造の定義 データ操作用クラスの作成 データ入力用コンポーネント データ表示用コンポーネント 今回はReduxラッパーの機能を使うため、データの入力と表示はコンポーネントは分けてあります。 ここで見ていただきたいのは、propsもuseStateも使っていないということです。 全てのデータはReduxのS
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
次期プロダクトでReact.jsを使ってみようと思っていて、その設計をどうすれば良いのかと試行錯誤した結果、それなりにイケてる結論に辿り着いたので、そのメモ書きです。 作ってみれば、Fluxとはこういうことか！というのがわかります。(若干アレンジはされてると思うけど。) それまで漠然と「ふーん、なるほどね。。」みたいな感じでなんとなくしか理解してなかったFluxが実は超画期的なパラダイムシフトであったことに気がついて結構衝撃を受けています。(^^; ちなみにプログラミングの文脈でeと言ったらまず思いつくのがEventかExceptionのどちらかだと思うけど、この場合はもちろんEventのことです。 すべてがExceptionになるのなら、即刻使うのを止めた方が良い。(^^; Fluxとは Fluxの説明では必ずと言って良いほど参照される図なので見たことある人も多いと思うけど、こういうアー
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた 白石 俊平（HTML5 Experts.jp編集長） おはようございます。編集長の白石です。 昨日（2015年4月30日）、isomorphic tokyo meetupに参加してきました。 というのも実は近々、HTML5 Experts.jpでは「Webアプリケーション・アーキテクチャ」に関する特集を行う予定なのですが、そこでキーワードとして挙げられていたのがisomorphic。 サーバサイドとクライアントサイドでコードの共有を促進するのが主な目的の一つ、というところまでは理解できたのですが、実際のところ、アーキテクチャはどう変わるのか？ それを探りたいと思っていたところ、ちょうどよくイベントの開催がアナウンスされていたので、急遽取材させていただきました。 取材を快く受け入れてく
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
2017/03/01 WebサービスとしてリニューアルしてHerokuで公開しました。 QiiTrend QiitaトレンドをリニューアルしてQiiTrendを作った - Qiita データ取得方法を変更したので、長期間のデータが高速に取得できるようになりました。 サーバーサイドでデータをキャッシュしているので、一度表示したデータは次回から高速に表示できるようになりました。 Qiitaの検索オプションがそのまま使えるようになり、タグ以外の検索もできるようになりました。 以下、2015/04/06の内容 最近話題になってるReact.jsを使ってクライアントサイドだけで動く簡単なアプリを作ってみた。 ソース https://gist.github.com/tag1216/819ded0722cedf75996f デモ http://bl.ocks.org/tag1216/raw/819ded
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
- + 最近の小学校では、「お父さん・お母さんの名前をグーグルで検索してみましょう」という、世にも恐ろしい授業があるらしい。・・・。 — 丹 洋介 (@yosuke_tan) January 25, 2015
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く