Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 3/22 (日) の rebuild.fm で React の話をしようと思っているが、その前に頭を整理するために React 雑感。雑感なので殴り書き。 React はこれ一つで複数の課題を解決しようとしている。そのため、人と議論してると話のコンテキストがぶれやすい。ざっくりは フロントエンドのプログラミングパラダイムを、サーバーサイドのような富豪的なスタイルに変える コンポーネント (雑に言うと独自タグ) 指向で UI を組み立てる ステートレスコンポーネントやメッセージパッシングで疎結合性を高めることにより、イベントの依存関係地獄
最近話題のReact.jsですが、実戦投入に当たっては結構重たい選択を迫られることになります。 ざっくり言えば、テンプレートエンジンを捨ててReactしますか?それともReactあきらめますか?という選択です。 本記事ではReactの基本思想とこうした選択肢が生まれてしまう背景を述べるとともに、後半では「どちらもあきらめない」という(若干シミュレーションRPGあるある感のある)第三の方策について案を提示します。 Reactの基本 最初に、Reactの基本的な仕組みについてまとめておきます。 Reactは公式ドキュメントが非常に充実しているので、始める際はぜひQuick Startのドキュメントに目を通すことをお勧めします。 Getting Started Tutorial Thinking in React 後述しますが、Reactを使ってアプリケーションを作る際の設計方法についての記載が
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation. Built with compatibility in mind, we embrace our bootstrap core and strive to be compatibl
A walkthrough of the Test Driven Development (TDD) process for testing React.js components with Jest from requirements to passing tests.James Burnett I write software for fun and profit. At the moment, I'm doing front-end web development because it is fun. Test Driven Development (TDD) is a very powerful and popular development methodology. Testing React.js components is most easily accomplished w
React is Awesome! Rails is Awesome! Jest is awesome! Using Jest with React in Rails should be Awesome Cubed... and yet it seems so difficult. Recently, the author was in a position where a legacy project wanted to redesign the front-end while keeping the Rails backend. The project decided to go with a React based redesign phased in, piecemeal, over time. Eventually the old JavaScript would just d
React-Rails is a flexible tool to use React with Rails. The benefits: Automatically renders React server-side and client-side Supports Shakapacker v7 Supports Propshaft Supports Sprockets 4.x, 3.x Lets you use JSX, ES6, TypeScript, CoffeeScript While ShakaCode will continue to support this gem, you might consider migrating to React on Rails or React on Rails Pro with proper Node rendering. Why? Re
React.js 最近良く名前を見るので始めた。 React.js v0.13RC では，ECMAScript6風のclass文などに対応したので，ES6の構文を使った簡単なサンプルを作成． 作成したサンプル Count Up!ボタンを押すと上の数値が増えるだけ 作成したファイルは__2つだけ__ index.html app.jsx index.html React.js本体と、JSX変換スクリプトを読み込む ES6風記述を有効にするためにtype="text/jsx;harmony=true"とする <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- React.js, JSX変換, アプリの3つを読み込む --> <script src="http://fb.me/react-0.13.0
クリスマス・イヴですね！ 今日はあと2日ということでReact.jsの今後について紹介してみたいと思います。 React.jsをこれからどうしていきたいかについては、facebook/reactとは別のrepositoryで議論されています。 ここにあるものはあくまでアイデアレベルですが具体的なコードで説明されているのでイメージしやすいです。 また昨日も紹介しましたが「React Through the Ages」というスライドでもReact.jsのこれまでとこれからについてが紹介されているのでこちらも注目です。 これまでのReact.js React.jsは元々はfacebookがPHP + XMLとして作っていたXHPというプロジェクトから始まっています。 それをJavaScriptに持ってきたのがReact.jsで、アプリケーション全体をrerenderする構造はサーバーサイドでのr
前回はTestUtilsの使い方を中心に説明したので、今回はfacebookが開発しているJestというフレームワークとの組み合わせてみたいと思います。 Painless JavaScript Unit Testing Jestのページには「Painless JavaScript Unit Testing」とある通り導入が簡単という特徴を持っています。 その特徴として「Mock By Default」があって、DefaultでCommonJS Styleのrequireを全てMockに置き換えます。ちょっと過激な感じですね。 なので、テスト対象の挙動だけに依存したテスト簡単に書くことが出来ます。逆に完全にテスト対象以外はMockになるのでI/FのテストにはならないですがまぁそれはUnit Testの範囲外ということで。 Jasmine JestはJasmineをベースとしてその上に作られて
今回はReact.jsとテストについて書きたいと思います。 React.jsとテスト React.jsのテストということはComponentに対してテストをすることになるので、DOMが絡んで来て辛そうだなと思うかと思いますがReact.jsはAddonとしてReact.addons.TestUtilsに便利な関数を提供してくれているのでそれを使うとテストが書きやすくなります。 DOMは必要？ React.jsのテストを書くとき、server-sideでも動くのでnodeの環境でテストを実行したくなりますが、実際にonClickイベントに反応して〜などのテストを書こうとするとやはりDOMが必要になってきます。 ちなみに、Prop渡してrenderToStaticMarkupを使ってその結果のHTMLを確認するようなテストであればnodeの環境で実行することは出来ます。 イベントのシュミレート
今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。 Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。 自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。 Bootstrap 何はともあれまずは定番のBootstrapですがやはりちゃんとあります。 前回のRouterのサンプルでも使っていました。 使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。
前回はserver-side renderingの話をしましたが、今回はRoutingについて書きたいと思います。 React.jsはComponentを作るライブラリなので、Routerは当然含まれていません。 なのでBackbone.RouterだったりDirectorだったり好きなRouterライブラリと組み合わせて使うことが出来ます。 でもPageの単位でComponentを作って切り替える場合にそれだと面倒だったり冗長になってしまいがちです。 なのでここでは、react-routerというものを紹介したいと思います。 React Router 以前まではReact Routerではserver-side renderingがサポートされていなかったので、react-router-componentというのを使っていたのですが、今はサポートされているのでserver-side re
今回はReact.jsの大きな特徴の1つで、これが出来るから使うという人もいるserver-side renderingについて書きたいと思います。 server-side renderingとは文字どおりサーバーサイドでHTMLを生成してrendering出来るようにするものです。SinglePageApplicationのようなJavaScriptでDOMを組み立てるようなアプリケーションの場合、サーバーから返されるHTMLには空のdivだけがあってそこからJavaScriptを読み込んでtemplateを描画することになり、これには2点の問題点があります。 初期のロード時間 HTMLが返されてJavaScriptを評価してそこからtemplateの表示になるので、サーバーサイドからHTMLが返される場合と比べて当然時間が掛かります。なので別途ローディングを見せるなどの工夫が必要になり
今回はReact.jsでのAnimationについて書きたいと思います。 React.jsではAddonとしてサポートされていて、CSS Animationを使ったCSSTransitionGroupとComponentのLifecycle MethodのようにMethodでフックして書く2パターンあります。 CSSTransitionGroup こちらではComponentの追加・削除時にCSSアニメーションさせることが出来ます。やりかたはAngular.jsやvue.jsのものに近くて追加・削除時にclassが追加されるのでcssにアニメーションを記述する感じです。 {transitionName}-{enter,leave}のclassName追加された後、次のイベントループで{transitionName}-{enter,leave}-activeのclassNameが追加されるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
