React.js
あらすじ react-dnd を使いました。いつものように、きっと思い出せなくなる自分の為にTutorial を書きました。 つくるもの 9マスの BOX を左から右へ向かってコマを進める。 コマは最大2マス進めるが、後ろには戻れない。 コマを選択する(isDragging)と、コ…
とうわけで S3 に配備しました。API へのアクセスは API Gateway -> Lambda -> DynamoDB なのでそんなにお金かからないはず。しばらくは動かしたままにするのでよかったら下記URLへ訪問してみてください。 http://serverless-fav-articles.s3-website-ap-nor…
あらすじ Nginx + Node.js + React.js + Mongodb で Web Application の構築手順を説明する必要があるのですが、Dockerfile をドキュメントとして扱う事になりました。 % docker --version Docker version 17.06.2-ce, build cec0b72 % node -v v8.1.0 % cre…
あらすじ 以下のような記事を見つけたので facebook がいい感じの UI components を出したかと思って興味をもちました。 jp.techcrunch.com で以下の動画を見た。どうやら期待していた話とはちがっている模様。UI component な話ではないらしい。 www.youtub…
title で全ての説明が終わった気がしますが以下のようなコードを書いていて const apiUrl = (process.env.NODE_ENV !== "build") ? "http://localhost:3041/api" : "/api" package.json には以下のような記述をしていましたが process.env.NODE_ENV が build…
github.com React.js で SPA しようとすると redux が登場するので学習コストが割と高くなると思ったのでいっその事 redux 使わなければいいんじゃないかと思いました。README.md に手順を書いてあるのでお試しください。 一応日本語で書いたものをなんとな…
あらすじ react-router@v4 にしたら色々な変更が入っていて全く動かなくなったので react-router の機能を確認しました。 追記: 2017-03-23 16:30 withRouter について追記しました。 言及すること <Route> の挙動が v3 と異なる <Switch> と <Route exact ...> の挙動を理解して対処しましょ</route></switch></route>…
あらすじ 先日 react-paginators という React components な module を publish しました。 github.com その時に色々調べた事があるので備忘録として残します。 作成手順 create-react-app と storybook を使ってプロジェクトの雛形を作成します。create-re…
github.com どんなの？ こんなの 作った経緯 最初は react-paginate を使う予定でした https://github.com/AdeleD/react-paginate なんですが最初のページを指定する機能がどうやら動作しない模様 https://github.com/AdeleD/react-paginate/issues/124 init…
create-react-app material-ui-storybook && cd $_ getstorybook npm install --save react-tap-event-plugin material-ui npm install --save-dev storybook-addon-material-ui edit `src/stories/index.js import React from 'react'; -import { storiesOf…
あらすじ redux-form といった ecosystem が要らない場合はこういうやり方もあるんではないかと思います。 やり方 create-react-app practice-react-router-spa && cd $_ touch src/Posts.js src/api.js npm install --save react-router edit src/App.js im…
Datetime Picker も使用頻度が高い、というよりもほとんどマストなので記事をひとつ追加します。 Bootstrap 風のデザインの react-datetime を最後に紹介します。 github.com この他にも airbnb/react-dates など沢山モジュールがありますので、各自でいろい…
react-select 前回は redux-form について触れました。 今回は react-select について触れます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる redux-saga に触れる react router に触れる npm で公開されている components を…
今回は redux-form について触れます。 おそらく React, Redux で管理画面作る場合はこの module を使うことになると思います。 github.com ちなみに react-redux-form という似た名前のモジュールがありますが優劣に関してはここでは言及しません。 やりた…
前回は react での routing について触れました。 今回は HTTP 通信が成功した時などに表示する Notification (Flash Message) に触れます。 Notification も色々あるのですが豊富な機能を備えた reapop を紹介します。 github.com 目次 開発環境を準備 Reac…
前回は React で Single Page Application をするためによく使われる redux-saga に触れました。 今回もよく使われる機能である react-router に触れます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる redux-saga に触れる r…
あらすじ 前回は redux による state の管理について触れました。 今回は http 通信などによる非同期処理の方法について触れます。 なお外部との通信に https://jsonplaceholder.typicode.com を利用しています。 目次 開発環境を準備 React の基本的な Life…
あらすじ 前回は React の基本的な作法に触れました。 今回は Redux を使ってみます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる <= 今日やること redux-saga に触れる react router に触れる npm で公開されている compone…
あらすじ 前回は開発環境の構築方法を紹介しました。 今回はReact で使われる簡単な記述方法に触れます。 たぶん直感で理解できると思いますので細かい説明は省略します。 目次 開発環境を準備 React の基本的な Life Cycle に触れる <= 今日やること redux …
追記(2017-02-08) webpack.config.js がエラーが出るので訂正しました。js 界隈は変化が早いのでチュートリアルを試される方はお早めにお願いします。 あと React.js の tutorial というよりも redux の tutorial ではないかという意見を頂戴しましたがよく…
現在 Google App Engine で Golang + React での開発を行っているのですが、学習曲線を高めるために同じ構成で Blog を作ってみました。 いろいろとはまるポイントがあって学ぶポイントが結構あったので折を見て共有したいと思います。とりあえずはてなブロ…
前回は Redux の範疇である action と reducer を定義しました。 今回は React の処理を記述します。 create src/index.js: import React from 'react' import { render } from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { …
前回でサーバーを準備したので今回はフロント側を準備します。 準備 以下を参考に webpack 関係を準備します。 https://gist.github.com/okamuuu/831b03f1dee84dea8d3893b9c8afabe3 Frontend で実装する機能 Frontend で以下の機能を実装します。 /api/sessi…
あらすじ SPA で認証機能を使いたいので練習します。 対象読者 redux の middleware について大体わかる JWT について大体わかる 大体わからない場合は以下をご一読下さい http://qiita.com/kuy/items/c6784fe443f1d5c7bbdc http://qiita.com/nabeliwo/items…
あらすじ 最近 Google が Material design なるものを発表して material design light という css と javascript を公開しました https://github.com/google/material-design-lite そして、これと React.js 使ってアプリ使いたい気分になった今日この頃なの…
開発環境の準備の仕方をまとめました。 概ね 入門 React ―コンポーネントベースのWebフロントエンド開発 から抜粋していますが一部自分のメモ用に修正しています。 開発環境 以下、私が実際に動作確認をした環境です。 % node -v v0.12.4 % direnv help | he…
あらすじ React 始めようとするとこんな事言われるかもしれません。 % browserify --debug index.js > bundle.js Error: EMFILE, open '~/practice-react/node_modules/react/package.json' 原因と対処方法 ulimit -n の数値が足りない % ulimit -n 256 なの…
