すでに動いているRailsアプリケーションにReact.jsを投入する
React×RailsについてLTをしたのでその時のスライド http://www.slideshare.net/KoheiIto/the-first-react-on-rails-58486821 スライドって声で補う前提なので、スライドだけみてもよくわからないかなと思ってQiitaに書く このスライドでは、すでにRailsで開発されているサービスにReact.jsを導入する方法を説明した。実際に使っているコンポーネントを元に、実用的な内容にした。 前の記事が中途半端で終わったので http://qiita.com/khrtz/items/89773651bf3698aae029 React化にあたって考えること react-railsを使う RailsのView上でのSPA遷移は諦める Rubyで出力しているHTMLをJavaScriptで書き換えることだけ考える ReactRoute
React.jsをWebstorm上でミニマムでLiveEditする - Qiita
背景 ごちゃごちゃダウンロード・インストールせずにindex.html, style.css, script.jsくらいで新しいライブラリの味見をしたかった。 久しぶりにWebの技術の勉強を始め、ブランクの間に出てきたJSライブラリを触ってみようとした。PlunkerなどのWebエディタでも良いのだが、キーバインドは勉強でも本番と同じものを使いたいのでJetbrainsのエディタを使いたい。LiveEditは（昔自分がやっていたような）gruntとかgulpを導入してnodeパッケージを管理してwatchするリソースをTaskRunnerで定義してgrunt/gulp serveでローカルサーバを立ち上げるというやり方があるが、これだと特定のライブラリの勉強をするのに本質的でないファイルをいくつも導入しないといけない。 WebstormのLiveedit機能を使うことで、ほぼindex.h
結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita
FluxやReduxがまた分からなくなったので、個人的なまとめをしました。 「これ間違ってるぜ！」ってのがあればコメント等でご指摘していただけると嬉しいです。 また何か気付きがあればちょこちょこ更新入れることもあります。 Fluxって？ Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。 JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。 そのためFluxではその流れを一方向にまとめよう！といったことをやっています。 Dispatcherを通して状態を変化させていく様子はデザインパターンのオブザーバーパターンと同じような形ですね。 基本的には以下の様な流れです。 またユーザーの行動によってViewから新たにActionを発行し、Dispatcherへと伝搬させることも出来
Reactを始めてから今までにお世話になった記事 - Qiita
ReactAdventCalendarの２，３，８日を埋めたらカレンダーが全て埋まるので頑張ってるしょっさんです。 今回はReactを始めてから今までにお世話になった記事を紹介していきます。 これからReactを始める方の何かご参考になれば嬉しいです。 （ 勿論ですがまず最初に公式のチュートリアルをやりましょう:-) ） 30分間React入門「いいねボタン」作成チュートリアル とりあえず手っ取り早くReactで何か動かしたい！って人にうってつけの記事です。 結構日本語でのReactを使ったアプリ作成チュートリアルって貴重なので、Reactの公式チュートリアルが終わった人は次にこっちをやってみるのもいいかもしれません。 React でマテリアルデザインを実装する Material UI を試してみる Reactでのデザイン面をどうしようかな・・・と考えてた時に出会った記事です。 デザインで
Reactデザインパターン - すべてがeになる - Qiita
次期プロダクトでReact.jsを使ってみようと思っていて、その設計をどうすれば良いのかと試行錯誤した結果、それなりにイケてる結論に辿り着いたので、そのメモ書きです。 作ってみれば、Fluxとはこういうことか！というのがわかります。(若干アレンジはされてると思うけど。) それまで漠然と「ふーん、なるほどね。。」みたいな感じでなんとなくしか理解してなかったFluxが実は超画期的なパラダイムシフトであったことに気がついて結構衝撃を受けています。(^^; ちなみにプログラミングの文脈でeと言ったらまず思いつくのがEventかExceptionのどちらかだと思うけど、この場合はもちろんEventのことです。 すべてがExceptionになるのなら、即刻使うのを止めた方が良い。(^^; Fluxとは Fluxの説明では必ずと言って良いほど参照される図なので見たことある人も多いと思うけど、こういうアー
React.jsのrenderでベタHTMLを表示させてみた覚書
「WP-APIやjsフレームワークの発達で表示部分とコンテンツ生成部分を個別システムでできるようになるのかなー」などとFacebookに書いたところ、「それReact.jsとかでもう起きてる」という情報を頂いたので早速触ってみました。 React.jsのインストール React.jsのインストールはこちらからできます。→A JavaScript library for building user interfaces | React ローカル環境を使用できない状況の方は、ブラウザ上でテストもできるこちらをどうそ→React Base Fiddle (JSX) – JSFiddle 一番手っ取り早いのはダウンロードしたファイルのルート部分にgulpやgruntを入れて、そのままlocalhostからアクセスできるようにすることかなと思います。 とりあえずHello World 新しいものを触
【入門】React.jsさわってみた。 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは制作担当の奥田です。 2016年冬アニメ圧倒的イチオシは「僕だけがいない街」です。 前期の「すべてがFになる」もそうでしたが、ノイタミナ枠は毎回面白いですね。 あと面白いのは「Dimension W」ですね。気になる方はぜひご覧ください。 と、アニメの話はさておき（冒頭がアニメの話ばっかりですねw） 最近はJavaScript界隈がとても活発ですね。 今回は現在人気沸騰中のライブラリ「React.js」をさわってみました。 まだまだ僕も触り始めたばかりなので超入門編といったところでしょうか。 Table of contentsReact.jsとはgulpで環境を構築するとりあえず動かしてみるPropsとState最後に参考にさせていただいた記事React.jsとはReact.jsとはFacebookが作ったライブラリで、MVCフレームワーク(Model,View,Controll
【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample) | 武骨日記
こういうのあったらいいなと思って作りました「【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)」。 画像をクリックしてみてください。小さいgifですが。。Reactで動きを理解したい人の為の最小サンプルです。 サンプル ※もし「routingNoMatch」と表示されたらキャッシュですので、違うデバイスで訪れるかsafariならプライべートモードでキャッシュをクリアーにしてご覧ください GitHubはこちら。 https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground githubリプレイスしました。こちらからどうぞ↓ https://github.com/kenmori/React-Sample npm install ↓ gulp と叩いてください React
React.js 実戦投入への道 - Qiita
最近話題のReact.jsですが、実戦投入に当たっては結構重たい選択を迫られることになります。 ざっくり言えば、テンプレートエンジンを捨ててReactしますか?それともReactあきらめますか?という選択です。 本記事ではReactの基本思想とこうした選択肢が生まれてしまう背景を述べるとともに、後半では「どちらもあきらめない」という(若干シミュレーションRPGあるある感のある)第三の方策について案を提示します。 Reactの基本 最初に、Reactの基本的な仕組みについてまとめておきます。 Reactは公式ドキュメントが非常に充実しているので、始める際はぜひQuick Startのドキュメントに目を通すことをお勧めします。 Getting Started Tutorial Thinking in React 後述しますが、Reactを使ってアプリケーションを作る際の設計方法についての記載が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react tag input - Google 検索