React Hooks自体の解説記事はいくつかあるけど, Hooksの登場によってReactがどう変わったのかについて書かれている記事が無かったので書いた 継承, Mixin, HOC, render props, Hooksの登場によって, Reactの副作用分割パターンがどう変遷していったのか分かるようにすることがこの記事の目的
投稿開発部の外村(@hokaccha)です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション(以下SPA)についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
facebook/flux 2.1.0からFlux UtilsというStoreなどの実装が含まれるようになりました。 今回Flux Utilsを使って、指定したアカウントのはてなブックマークを検索するウェブアプリを書いてみました。 azu/hatebu-mydata-search azu.github.io/hatebu-mydata-search/ mydataのAPIがCORS対応してないのでJSONProxyを挟んでます。(なのでブックマークデータが多いアカウント名は避けたほうが…) これを作ってみてFlux Utilsについて思ったことを書いていきます。 Flux Utilsの紹介ページに、Flux Utilsの解説が書かれています。 簡単にまとめると以下の4つのクラスがFlux Utilsとして提供されています。 Store ベースとなるクラス ReduceStore Store
Built for scaleRelay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay’s incremental compiler, it keeps your iteration speed fast even as your app grows. Keeps iteration quickRelay is data-fetching turned declarative. Components declare their data dependencies, without wo
できあがったのはこちら。 sadah/react-tutorial-es6 Reactを触ってみたいと思って、チュートリアルをやってみた。翻訳してくださっているかたがいて、訳もわかりやすくてとても助かった。 Tutorial | React React.jsチュートリアル【日本語翻訳】 | mae's blog チュートリアルでは JSXTransformer.js を使っているので、JSXの変換などを考える必要はない。手軽なんだけど、Reactを使おうとしたらけっきょくコンパイルしなきゃいけない。 コンパイルにはBabelが必要になる。Babel使うならES6も使いたい。ES6の変換は自動的にやりたいし、ファイルはminifyしたいし、minifyしたらsource mapが欲しいし、変更したら自動的にブラウザを更新したい。って感じであれこれやってみた。 Environment ディレク
Flummoxは、いくつもあるFlux実装のうちの1つです。 ドキュメントにはいくつかの特徴が挙げられていますが、 Isomorphicであること(サーバとクライアントのどちらでもOK!)、ES6記法に対応していることなどがあります。 今回は、簡単なTODOアプリを作りながらFlummoxの使い方を紹介しようと思います。 このチュートリアルでは、ReactやFluxの初心者を対象にしています。簡単な概要ぐらいは知っているけど、これから始めるために簡単なサンプルが欲しいというような人にちょうど良いと思いますが、React全く初めてでも順を追えばなんとなくやっていることがわかると思います。 ソースコードはこちらです。 <完成イメージ> 準備 コードを書き始める前にいくつか必要となるツールがありますので紹介します。 Gulp よく使われているタスクランナーです。この後でコードを変換する必要が出て
今話題の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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く