コンパイラかく語りき

import { Fun } from 'programming'

React.js

React, Express, Webpack, Relay, GraphQLでつくるSPA

アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…

Relayアプリケーションに、routerを導入する

RelayでSPAを作っています。前回までで、ひとまず形には為りました。 chuckwebtips.hatenablog.com ただ、現在の状態だと1つのページしかありません。 (求人一覧が表示されている状態) 求人をクリックしたら、求人の詳細画面にうつる。みたいな処理をReac…

JS開発環境の構築(1)

つくるやつ React, Webpack, Express, Relay, GraphQLあたりをつかった何か。 内容はあまり重要ではなくて、ひとまずぜんぶJSだけで作ってみたい。 ただし、以下の記事でも書かれているように、必要ないものをどんどん盛り込むのは違うと思う。 medium.com …

React + Webpack + Expressで初めてのサーバサイドレンダリング

すみません、こちらの記事に完全にお世話になりました。 サーバーサイドReactをwebpackを使って最小構成で試す (ES6 & TypeScript) - Namiking.net 以下、すべて写経のメモになります。 いつものクライアントレンダリング まずは、HTML。 gistacfad61f44971…

自分なりに順を追って、Reduxを理解する(5)

引き続き、Reduxのお勉強です。 chuckwebtips.hatenablog.com 今回はようやくReduxに触れます。ひとまずactionを書こうと思います。 CSS in JS with Webpack actionの前に、ちょっとだけスタイルを書きます。 今回は、HTMLではなく、JS内にスタイルを持って…

自分なりに順を追って、Reduxを理解する(4)

Reduxのお勉強の4日目です。と言っても、まだまだReactの復習でしかありませんが。 前回は、AppコンポーネントにひもづくSlideコンポーネントとPageコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回はスライドのデータを用意して、Pageが…

自分なりに順を追って、Reduxを理解する(3)

Reduxのお勉強です。 前回はすべての親要素となるAppコンポーネントを作成しました。 chuckwebtips.hatenablog.com 今回は子要素を作成したいと思います。 今回作成するものはスライドです。スライドなので、各々のページと、それを格納するスライドの親子コ…

自分なりに順を追って、Reduxを理解する(2)

Redux練習記録です。 前回は基本的なセットアップを行いました。 chuckwebtips.hatenablog.com 今回からは実際にReactを書いていきます。 Reactの基本となる、コンポーネントを作成します。 コンポーネントディレクトリ Reduxを利用する場合のコンポーネント…

自分なりに順を追って、Reduxを理解する(1)

前回までで、Reduxチュートリアルの写経が終わりました。 chuckwebtips.hatenablog.com でも、やっぱりまだ分かってなくて、というか実はReactだってまだまだ書けなくて、まとめて理解を深めるために、なんか作ります。 得意のスライドでも作ります。 今回は…

いい加減、Redux入門する。

します。 手始めにQiitaのそれっぽいポストを読みます。この記事は、その勉強メモになります。 1日目 Reduxとは qiita.com 背景 Reactの登場によって、Reactに非同期とDOM操作を任せられるようになった。ただし、State(状態)の管理は開発者に委ねられてい…

Rails環境にWebpackを導入する(後半)

どうも、chuckです。 前回は以下の記事を参考に、Rails環境にWebPackを導入してみました。 qiita.com その記事がこちら↓ chuckwebtips.hatenablog.com 前回までで、環境設定は終わったので、今回は実際にJSを書いてビルドをしてみようと思います。 モダンJav…

React.jsでタグ機能を実装する(前半)

タグ機能ってあるじゃないですか。 イメージ的には以下のプラグインのような感じ。 Select2 - The jQuery replacement for select boxes こんな感じで、選択肢から何かを選ぶ形式。それで、ちょっと離れたところにあるDOMにも影響が出る感じ。 要は、複数のD…

いざ!React入門

前回まででReactの雰囲気をそれとなくつかむことができました。 chuckwebtips.hatenablog.com おまけにこちらの記事も読みました。 blog.masuidrive.jp 今回からは、Reactを実際に書いていこうと思います。 利用させていただいたチュートリアルがこちら。 c1…

Reactが怖いので、まずはReact風なjQueryを書いてみる②

これの続きです。 chuckwebtips.hatenablog.com 前回は、jQueryでもオブジェクトを使うことによって、状態の記述を分離できるよという話でした。 今回は、session storageを利用して、状態をある程度保存してみます。 作ったDEMOがこちら。 http://chuck0523…

Reactが怖いので、まずはReact風なjQueryを書いてみる①

もう2016年ですね。いい加減、脱jQueryしなくては。 でも、Reactってちょっと怖いですよね。 そこでとても良い記事を見つけました。 postd.cc 軽く冒頭を読んでみたところ、なかなか面白い。こんな自分でも面白いと思えました。 なので、数回に渡って噛み砕…

React.js in Rails を試す(前半)

「試す」なんて気軽に書きましたが、まだRails初心者です。Reactに至っては、公式のチュートリアルを1度やった限りです。 果たして達成できるのでしょうか…。 参考にしたのはこちらの記事。 qiita.com いつもどおり、rails new。なにはともあれ。 $ rails n…

React.jsのチュートリアルを消化する(前半)

どうも!chuckです。 今回はフェイスブック製のJavaScriptライブラリである、React.jsについて勉強していきます。やり方として、公式のチュートリアルを消化していこうと思います。 (たぶん前に一回やったことあったような気がするけど、忘れちゃった…w) …