タグ別アーカイブ: React

Node.js (Server API) と React + Flux (Client) で CSRF 対策

はじめに

 前回は機能だけ満足するよう実装しましたが、POST、PUT、DELETE といったサーバー側のデータを変更するようなリクエストを受け付けるには CSRF 対策が欠かせません。今回は、前回のカウントアップアプリに CSRF 対策を施します。

続きを読む

Node.js (Server API) と React + Flux (Client) でカウントアップアプリ作成

はじめに

 JS によるクライアントサイドのフレームワーク界隈では、Backbone.js や AngularJS、vue.js などいろいろと選択することができます。どのフレームワークを選択するかでにぎやかな界隈です。
 今回は React を使って、Flux アーキテクチャに沿って簡単なカウントアップアプリを作ってみます。また、API と通信する部分も実装してみて、構成を確認したいと思います。
 
 具体的なアプリの見た目はこの図のような、
ui

  • ボタン「Countup」をクリックすれば数字が 1 つ大きくなる
  • ボタン「Reset」をクリックすれば 0 に戻る
  • 複数のクライアントでカウントを共有できる
といった、簡単なものを作ります。
 また、Heroku へのデプロイも実際にやってみます。
 この投稿の内容で作成したアプリは http://ssdn-heroku-nodereactflux.herokuapp.com/ で確認できます。

続きを読む

VisualStudio Code で JavaScriptReact モードで表示する拡張子をカスタマイズする

はじめに

 VisualStudio Code Windows版 0.10.1 で、React なコードを書いていて、render 内に HTML タグを記述しています。通常は拡張子を .jsx などにすれば JavaScriptReact モードで表示してくれるのですが、プロジェクトによっては拡張子が .js だったり、.react.js だったりして JavaScriptReact モードでは表示してくれません。
 今回、拡張子が .react.js のものを JavaScriptReact モードで表示できるよう、設定を調整してみましたので紹介します。

続きを読む