コンパイラかく語りき

import { Fun } from 'programming'

React.js

React v16.6.0で追加された lazy, memo そして contextType を試してみる

React.js v16.6.0 にて追加された新機能を試してみました。 reactjs.org 環境づくり React.memo React.Suspense と React.lazy static contextType static getDerivedStateFromError() 環境づくり サクッと、create-react-app を利用しました。 create-react…

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) …