はてなブックマーク

react-router また仕様変更 react-router v1.xからv2.xへのバージョンアップ v0.xからv1.xにあがった時点で色々ありましたが、v2.xでもまた色々あるみたいです。 本家サイトに、v2.0.0 Upgrade Guideがありました。 それによると、大きな変更点は、 historyをrouter定義時に必ず指定することになった コンポーネント定義時にmixinsでHistoryを指定しなくなった contextでrouterを使い回すことになった なのでpushStateなんかはcontext.router.push()とかすることになった 今までの実装のままだとコンソールに警告出る、で、次のVerから使えなくなる というところです。 context 以前はReactの公式ページでは確かcontextについて記述がなかったのですが、いつの頃からか記述が追加

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Structorとは React UI Builder改めStructor reactのGitHub wikiでも取り上げられているStructor。 Structor:http://helmetrex.com/ 以前はReact UI Builderという名前でしたが、模様替えしてStructorというものに変わったようです。 Structorでできること Material-UIまたはReact-Bootstrapをベースとした、コンポーネントの作成がブラウザ上で行えます。コンポーネントのソースはファイルに保存して流用することもできます。ちなみにソースはES6ベースで作成されます。 YouTubeにいくつか動画がアップされていて、概要を見ることができます。 YouTube:Speed designing of ToDo list with ReactJS and Redux まだまだ微妙

前回→今からはじめるReact.js〜画面遷移〜 処理の流れは一方向で Flux React.jsの開発元のFacebookがFluxというアーキテクチャ概念を生み出しました。 アーキテクチャといえばMVC（Model、View、Controler）が有名です。 FluxはMVCで発生する処理の役割を明確化して流れをわかりやすく、シンプルにしたもののようです。 本家サイト（ https://facebook.github.io/flux/docs/overview.html ）でも図が提示されていますが、 頭の中を整理してみたらこんな感じになりました。 図を見てお分かりの通り、一方通行になっています。 一方通行とすることで、例えばViewはViewの役割に集中できるであるとか、ソースが複雑化するのを防ぐメリットがあるらしいです。 本家サイトの図だと、WEB APIはActionで呼ぶとなっ

前回→今からはじめるReact.js〜propsとstate、それからrefs〜 サーバサイドの実装(今回はReact.jsは出てきません) Node.js いいかげん、サーバーサイドを実装します。 Node.jsでサーバーを起動できるようにします。 Node.jsはノンブロッキング（非同期）IOという特徴があります。 クライアントサイドから来たリクエストごとにスレッドを立てるわけでなく、 サーバー側で処理が終わったものからどんどんクライアントサイドに返却していきます。 下記のサイトが参考になりました。 http://satoshun00.hatenadiary.com/entry/2012/08/02/172936 express 実装するにあたり、フレームワークのexpressを利用したいと思います。 npmでインストールします。 npm install express --save

前回→今からはじめるReact.js〜スタイルの適用〜 ReactDOM 0.14でReactDOMがReactから分離されました。 そのため、render()やfindDOMNode()はReactDOMのメソッドを使用しなければなりません。 さっそく、react-domをインストールします。 index.jsは以下のように、インポートの追加と、最後のReact.renderの箇所を書き換えます。 npm install react-dom --save var React = require('react'); var ReactDOM = require('react-dom');//react-domをインポート var Header = require('./views/header.jsx'); var Body = require('./views/body.jsx'); v

前回→今からはじめるReact.js〜コンポーネントをまとめる〜 [2016/05/18追記] 上記のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では 今からはじめるReact.js〜React ver0.14〜 で記載のように実装する必要があります。 スタイルを適用する classNameとstyle サービスを実装するにあたり、基本的なスタイルを独自に定義することになると思います。 React.jsでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することができます。 前段階として、 htmlに直接cssを適用する場合、 <button class="btn btn-default"/> のようにclassを指定する方法が一般的な方法としてあげられますが、 React.jsのJSXで定義する場合、clas

前回→今からはじめるReact.js〜初めてのコンポーネント〜 [2016/05/18追記] 当記事のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では 今からはじめるReact.js〜React ver0.14〜 で記載のように実装する必要があります。 複数のコンポーネントを一つにまとめる 前回でも述べましたが、コンポーネントは最終的に一つにまとめてあげる必要があります。 ヘッダ、ボディ、フッタとコンポーネントを作成した場合を例に、ソースを書いてみます。 index.jsを以下のように書き換えます。 var React = require('react'); //ヘッダの定義 var Header = React.createClass({ render: function(){ return ( <h1>ヘッダです</h1> ); } }); //ボデ

前回→今からはじめるReact.js〜準備〜 コンポーネントを作成する React.jsの特徴は、何と言っても コンポーネント 仮想DOM です。 React.jsは画面の構成要素をコンポーネントとして実装していきます。 さまざまなコンポーネントをdivタグなどで囲んでいって、ヘッダやボディ、フッタなど それぞれのコンポーネントを作成し、最終的に一つのコンポーネントとしてまとめます。 コンポーネントとして実装するため、作成したコンポーネントは 同じ仕様の機能が要求されるページで再利用することができます。 仮想DOMについては開発者はあまり意識することはありません（仮想DOMを実現するために直接DOMをいじっちゃダメとかのお約束は意識する必要がありますが）。 ので、仮想DOMについての説明は他に譲るとして、早速コンポーネントを作成して、ブラウザで表示してみましょう。 index.htmlの作

あたらしくプロトタイプ作ろ〜って思って、 必要なライブラリをinstall。 とりあえず、indexページだけ表示できるようにしよう。 サーバーサイドにプログラム用意して、クライアントサイドにindex.html置いた。 routeファイルも作ったから、とりあえず動かしてみるぞー。 nodeコマンド実行して、さてブラウザで確認した。 。。あれ、画面が真っ白。Router.runのところでコンソールに undefined is not function と出ておる。 しばし試行錯誤の後、react-routerで何か手が加わったのかと邪推し、 gitページ( https://github.com/rackt/react-router )を眺めてみる。 ファイル一覧にUPGRADE_GUIDE.mdというそれらしいファイルを見つける。 https://github.com/rackt/reac

#Visual Studio Code Visual Studio Code https://www.visualstudio.com/ja-jp/products/code-vs.aspx でNode.jsがデバッグできるとのことだったので試してみました。 以前はCOBOLのようにlog吐くようにしてデバッグしてたのですが（eclipseは重くて使いたくない。。）、Visual Studio Codeは無料なのにライン実行できて大助かりです。 ##プロジェクトを開く Visual Studio Codeを起動したら、 デバッグしたいソースがあるプロジェクトをVisual Studio Codeで開きます。 右上にある、をクリックして、をクリックするか、メニューバーの[FIle]->[Open...]でプロジェクトを開きます。 ↓こんな感じ ##launch.jsonの設定 デバッグするに

仕事を進める上でReact.jsについて教える機会が増えてきました。 React.jsがなんなのかは、各自ググっていただくとして、基本的なところで 何をどうやったらReact.jsでサービスが実装できるのか？ という点について理解できるよう、チュートリアルを作っていきたいと思います。 前提 ・ES5ベースで実装。 ・npmを利用して必要なライブラリを追加。 ・JSXのコンパイルはreactifyで行う。 ・サーバサイドはnode.jsで実装 ・DBはpostgreSQL(Herokuにデプロイするため) 上記、各単語は必要になった時点で触れていきますが、よくわからなければ調べてください。 ※React.jsの技術情報を調べていると、よくES6ベースで書かれたソースをよく見るのですが、現状はブラウザ自体が一部しか対応してなかったり、知識レベルがバラバラな複数の技術者とチームで開発するというこ

前回→今からはじめるReact.js〜Flux〜 Herokuへのデプロイ Herokuは自分が作成したWEBサービスを無料でクラウド上に公開できるサービスです。 OSや開発言語のインストールが不要なため、ソースをデプロイすることでサービスが起動できます。DBなどもアドオンという形で面倒なコマンド作業を行うことなく利用することができます。 サポートしている開発言語は以下の図のようになっています。 Salesforce社の一事業であるため、アドオンを使えばSalesforceサービスとのデータ連携が容易に実現できます。 Herokuにサインアップ サインアップしていない場合はサインアップします。 https://www.heroku.com/home サインアップが完了するとダッシュボード画面が表示されます。 アプリの追加 公開したいサービスを設定します。ダッシュボードの画面右上にある、＋ボ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

前回→今からはじめるReact.js〜サーバーとの通信〜 react-router ※(2016/01/19)react-routerのバージョンは1.xを前提にしています。 ※(2016/02/18)2.xネタはこちら なんらかのサービスを作成した場合、製品カテゴリーごとに画面が存在するとか、メインの画面とは別にに設定画面があるとか、会員制サイトであればログイン画面があって、ログインしたら、ポータル画面に遷移したり、といったように、複数の画面が存在して、それらの画面に行き来できる仕掛けが必要になってきます。 react-routerというライブラリは画面遷移を管理してくれるライブラリです。 インストール npm install react-router --save npmのバージョンが3以上の場合は、historyもインストールします。 npm install history --sa