タグ

reactjsとtodoに関するmanabouのブックマーク (6)

  • React + Redux + Firebaseで作るTodo App - Qiita

    最初に 先日、フロントエンジニアが今話題のFirebaseについて語りたいという記事を投稿しました。 予想以上の方にストック頂き、とても嬉しい反面驚きがすごいです。 改めてFirebaseは注目されてるサービスで、サーバーレスアーキテクチャはフロントエンドエンジニア & アプリ開発者の夢なんだなぁと実感しました。 ポエミーで長い記事になってましたが、 設計&具体的な実装については一切触れていなかったので、その辺りを書きたいと思います。 まだまだ勉強中の身のため、ご指摘いただけると幸いです。 アプリ構成 React.js (UI) Redux (データフロー) Firease (ホスティング + データベース) でTodo Appを作りたいと思います。 キモは、 Firebaseのデプロイ データベースと連携 です。 React + Reduxで作るのはスキルセットがそうなのに加えて、Red

    React + Redux + Firebaseで作るTodo App - Qiita
  • React+Fluxxor+MilkcocoaでfluxなTODOアプリ #geekhouseday - Qiita

    React+Fluxxor+ajaxでfluxなTODOアプリと合わせて読んで下さい。 Web+DB Pressのvol86と87で伊藤直也さんのReact.js+Fluxの記事があったので勉強してみました。 ReactとMilkcocoaとうまく繋げられないかなぁと思って前回の記事のコードを元にMilkcocoa連携をやってみます。 前回はバックエンド開発が面倒だったのでPOSTしてデータを貯める仕組みは割愛しました。 Milkcocoaを使うことでフロント開発だけでデータ蓄積などが可能になります。 (リアルタイム機能がMilkcocoaの持ち味なんですけど、今回はデータ蓄積の部分だけにします。) タイトルは参考にさせて頂いた橋商会さんの記事(React+Fluxxor+socket.ioでfluxなチャットを作った)にかぶせてます笑 ※ちなみにギークハウスデイというイベントがオンライ

    React+Fluxxor+MilkcocoaでfluxなTODOアプリ #geekhouseday - Qiita
  • React+Fluxxor+ajaxでfluxなTODOアプリ - Qiita

    Web+DB Pressのvol86と87で伊藤直也さんのReact.js+Fluxの記事があったので勉強してみました。 vol86のReactだけだと外部のAPIとかとの連携のイメージがつきにくかったんですけど、vol87の記事のサンプルを動かしてみてやっと とはいえまだまだですが汗 やったこと Reactに慣れてからfluxへという流れです。 ボタンを押すとカウンタの数字を変えるカウンタアプリをReactだけで カウンタアプリをfluxで todoアプリをfluxで todoアプリにajax通信を追加 まずはTODOアプリを作る サンプルはこちらに置いておきます。 https://github.com/n0bisuke/react-study/tree/todo-flux Flux構成のフレームワークであるFluxxorを使って、vol87の記事では紹介してくれています。 早速ですが、

    React+Fluxxor+ajaxでfluxなTODOアプリ - Qiita
  • ReactでTodoアプリを作る(実装編) - Qiita

    前提 http://todomvc.com/examples/react/#/ が作りたい。react.jsのキャッチアップ用エントリー。 実装の流れがメインでreact.jsの解説はほとんどないので、必要に応じて家のドキュメント参照して下さい。 ソースコード 開始時点のもの git clone、npm installして開始します 完了(リファクタ前) 完了(リファクタ後) リファクタ、データをlocalstrageへ保存、速度改善など(まだあげてない) 準備 準備編。も参照のこと。主にgulp,package.jsのお話。 前回のエントリから続いてやる場合は、以下の対応を行ってください。 ベースとなるhtml,sassを作成 まずはお手を参考に、静的なhtmlを返す実装と、sassファイルを作成する。これをベースにコンポーネント化をしていく。(お手とは少しdom構成等異なります)

    ReactでTodoアプリを作る(実装編) - Qiita
  • ReactでTodo appを作るまで(開発環境編) - Qiita

    Reactを使おうとすると、ファイルの変換やらなんやら色々あるので、まずは簡単なsampleを使って各種開発環境を整えてみる。 前提 npmを利用 ブラウザはchrome 最終的につくるのはこれ(http://todomvc.com/examples/react/#/) 目次 sampleページの作成 webサーバの導入 サーバーサイドでの変換 browserifyの導入 ファイル変更の監視とgulpジョブ sassの導入 までを行う。 続きは実装編へ 簡単なsampleページ 単体で動作する簡単なsample。 <html> <head> <script src="http://fb.me/react-with-addons-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

    ReactでTodo appを作るまで(開発環境編) - Qiita
  • React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ

    ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree

    React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
  • 1