React

1/79ページ

Reactサンプル:redux-sagaとreact-router v4でWebAPIの結果に応じて画面遷移させる。(前編)

はじめに TL;DR  React によるフロント開発の作例です。ソースコードは以下から取得できます。  https://github.com/jun68ykt/saga-and-router4 背景  目下、reactとredux を使ったSPA開発に従事しています。その開発途上で、  WebAPIをリクエストし、その結果に応じた画面遷移をredux-sagaとreact-routerで実現する […]

【このご時世にjQuery!?】まさかのjQuery+webpack+babelでマンスリーカレンダーを作ってみた

このReactのコード、jQueryで書いたらどうなるんだろう… ふと、Reactを書いていてそんなことを思いました。 ここ最近Reactも主流になりつつあり、仕事でもReactを書くことが増えてきました。 Reactはstateやpropsを更新することによりviewを自動で更新してくれるのが超便利な点です。(あまり詳しくはないのですが、AngularやVueもそういうものだと思っています。) […]

LispでJSXを書いてみる

はじめに LispベースのDSLを定義できるJavaScriptのライブラリー 「Liyad」v0.0.3 をリリースしました。 Liyadには、JSXをLispで記述する 「LSX」 の演算子セットがバンドルされています。 ※「LSX」の名前は今回のリリース時に付けました。 TL;DR LispでJSXを書く(LSX)のは最高に使いやすいので広めていきたい。 Playgroundはこちら。 トラ […]

JavaScriptでClean Architectureを導入してみた – Vue.js・Reactのサンプルつき

事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・? と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは? まず根本の理解がほぼな […]

Redux-Form の v7 を React-Bootstrap と併せて使う

ただいま Fields と FieldArray を使った複雑な構成についての記事も執筆中です、執筆出来次第こちらにリンクさせます。 はじめに 2017年の8月、使用ライブラリのバージョンを一斉にアップデートする、という作業を行った。 こと Redux-Form を v5 から v7 に上げる作業が困難を極め、全ての画面の Form まわりを書き換えるという精神衛生上よろしくない苦行のような改修を […]

webpack4で外部のCSSフレームワークを自分のjsにbundleせずに読み込みたい

やりたいこと 外部CSSフレームワークのCSSを自分のjsにbundleせずに読み込みたい。 例えばBootstrapのCSSを使いたいけど、自分のReactコンポーネントではcss-modulesやreact-css-modulesを使いたいので、vendorとは分けたいという場合の忘備録。 必要なものをインストール npm install --save webpack webpack-cli […]

react-rails と webpacker を使って Rails アプリケーション上で React を動かす

Rails アプリケーション上で React を使う場合、何が必要なのかを知りたくなりました。 調べた所、最近では webpacker と react-rails の組み合わせで導入するのが簡単そうだったので、そちらを試してみました。 前提 検証環境 Rails 5.1.6 ruby 2.4.3 Mac OS X 10.13.4 利用する Gem について webpacker webpacker […]

styled-components vs SASS (SCSS)

概要 Reactと一緒にCSSを使うときstyled-componentsとSCSSがメジャーな選択肢だと思いますが、両方使った経験からどちらがいいか紹介したいと思います。結論から言うと、シンプルでメンテしやすいstyled-componentsが個人的に好みです。 比較 スタイルは別ファイルにすべきか とりあえず同じファイルに書いてしまうのがいいと思います。自然に書けば、styled-compo […]

1 79