React/Reduxを管理画面に使った話 - Qiita
自己紹介 @adwd118 adwd 株式会社ビズリーチ スタンバイ事業部 Web歴1年 サーバーサイドエンジニア？ React/Redux入門やりました speakerdeck 求人検索エンジン スタンバイ スタンバイ スタンバイ 社内向け管理画面 スタンバイの__社内向け管理画面__でReact/Reduxを使った スタンバイ本体ではない SPA的要素はあまりない パフォーマンス、セキュリティなどそこまで気を使ってない コンテンツ React/Fluxについて 管理画面の構成 React/Reduxを使った感想 React React javascriptでUIを構築するライブラリ （MVCのV） コンポーネント指向 js-centric ほぼjsの中で完結する Flux 単方向データフロー Flux ViewはStoreからデータ（状態）を受け取って表示するだけ Storeの状態を変
すべてのReact.js初心者が知っておくべき9つのポイント - Qiita
9 things every React.js beginner should knowを意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 私は約6ヶ月間React.jsを使用してきました。それほど長い歴史ではありませんが、あなたがひげの長老として扱われるようなJavaScriptフレームワークの目まぐるしい世界の大きな枠組みの中で、私は最近、React初学者のTipsで少数の人々を支援してきましたので、ここでより多くの人々にその内容を共有するのが良いアイデアであると思いました。これらは全て私が始めた時に知っておきたかったことか、もしくはReactを習得するために本当に役立ったもののいずれかです。 あなたが絶対的な基本を知っていると想定して話を進めますが、もしコンポーネント、propsやstateなどの言葉に馴染みがなければ、公式の入門やチュートリアルページを読むと
Reduxでのクライアントサイドvalidationをどこでやるべきか？ - Qiita
入力フォームを利用するとやっぱり大事になってくるValidationについてあれこれ悩んだ。 結論が完全に自分の中でも出てないが、とりあえず考え尽くした所まで 前提など validation validationとひとくちに言っても色々考える事がある 出力するエラーは一つ？複数？ エラーが出たフォームを赤くしたいとかある？ 複数の値を見てvalidationしたいとかある？ validateするタイミングは随時？ボタン押されたら？ 今回の話 Redux + Reactを使う 簡易なTodoリストを想定する Actionの形式はFlux Standad Actionを使う 一旦細かいことは脇に置きつつ、下記のvalidationを想定して実装してみる エラーメッセージは一つ Todoのinputが空だったらエラーとする Todoの追加ボタンが押されたタイミングでvalidateする redu
React15.2.0でRedux-FormV5ワーニング対策＆V6使用例 - Qiita
React 15.2.0を使い始めたら・・・！！！ React15.2.0がリリースされました。エラー周りが強くなっててこれはいいぞ!と使っていたところ、redux-formを実装したら、warningが吐き出されるようになっていた。 warningの内容は bundle.js:1309 Warning: Unknown props initialValue, autofill, onUpdate, valid, invalid, dirty, pristine, active, touched, visited, autofilled on <input> tag. Remove these props from the element. For details, see よくわかんないpropsを渡さないでくださいよ！ ということらしい。どうやらReact 15.2.0では予期しないp
自社サービス採用へ。本気で作るReact+Reduxのプロジェクト構成 - Qiita
サイバー・バズの@yuinchirnです。 弊社で最近リリースした「Cloud-F」というアパレルのクラウド展示会サービスは、フロントサイドはReact + Redux + Webpack、サーバサイドはScala + Akka HTTPで作られています。 今回は、フロント側のReact + Reduxを使ったプロジェクトの構成について紹介していきます。 React + Reduxプロジェクトを作る上で参考になればと思っております。 下記記事を読んで基本を押さえておくと読みやすいと思います。 React+Redux入門 全体のディレクトリ構成 今回はバイヤー向け管理画面、ブランド向け管理画面という二つの画面を作るため、 両方のプロジェクトで共通で利用する部分は/common バイヤー向け管理画面は/buyer ブランド向け管理画面は/brand という３つのReact ＋ Reduxプロジ
redux-thunkなのかredux-promiseなのかredux-sagaなのか、それともredux#bindActionCreatorsをやめるのか - Qiita
前提 ここで書くのはあくまで個人的な意見です。 react, reduxはどちらも使い方次第でフレームワークっぽくも使えるし、ただのツールとしても使える。だからreact, reduxを使ったフロントアーキテクチャはいくらでもあっていいと思う。 これはそのうちの一つを提案するものです。 とはいえ特別な実装方式を編み出したわけでは全然なくて、むしろ１周して出戻りしたかんじ。 結論 非同期処理をコンテナ(またはそこで使うモジュール)に書くだけ。 今は、非同期処理をするためのredux middlewareを使ってないです。 過去記事(react, redux周りのパッケージ選定とKPT[2016-05-27現在])にて、この辺についてもなんやかんやと言っているけど、今はthunkもpromiseもsagaも使っていない。その実装が凄くシンプルで気に入ってるので紹介します。 どうやるのか red
react, redux周りのパッケージ選定とKPT[2016-06-18現在] - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに react, redux周りのnpmパッケージはまさに春秋戦国じだいがごとくパッケージが乱立し、訳がわからない状態になっています。 １か月後には全然違うKPTになってるかもしれませんが、現時点をログっておいて、１か月後に差分見たい。 [2016-06-18 追記]実際めっちゃ変わった。ウケる。 あくまで個人的な KPTですので悪しからず。 でもコメントは歓迎です。いろんな人とこの辺の構成の話したい^^ 前提 サーバーサイドレンダリングは不要 クローラーの対象になる必要がない画面なので reactらへん react(keep)
![react, redux周りのパッケージ選定とKPT[2016-06-18現在] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/73d65458330a3c09fc520a56a0c8566d1bc4f058/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzY2NDAlMkZwcm9maWxlLWltYWdlcyUyRjE1MTIwNTAwNjA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZTk1YzEzZjRlYzRkMmQwZWVhY2YwYTNjM2U4N2QyMWE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5c5da7ae76cef4913c3603f39926503e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9cmVhY3QlMkMlMjByZWR1eCVFNSU5MSVBOCVFMyU4MiU4QSVFMyU4MSVBRSVFMyU4MyU5MSVFMyU4MyU4MyVFMyU4MiVCMSVFMyU4MyVCQyVFMyU4MiVCOCVFOSU4MSVCOCVFNSVBRSU5QSVFMyU4MSVBOEtQVCU1QjIwMTYtMDYtMTglRTclOEYlQkUlRTUlOUMlQTglNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0zNWE1YzRmMzZiOGUzODM5OWRmNWQ5NDM2ZWE4OTU0NA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDAxOTMmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1iZTBhYWZjNzJlZTdmYTgwMDMxYWIyOWY2NzVlZTdjNg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4c0cff9c42d3c93aae4eb8c7031217ad)
React DnDのドキュメント私訳 : Overview - Qiita
#まえがき React DnDの和訳ドキュメントがなさげので、自分用に私訳した記録です。 私訳なので英文の直訳を自分なりに解釈し記述した部分が結構あります。 むしろ内容すら間違ってる。と、見兼ねてつっこみたくなる箇所がありましたら、どうぞ宜しくお願いします。 #Overview ： 概要 本家ページ： Overview - React DnD ##Items and Types fluxと同じく、React DnDはデータをviewとしてではなく、事実上のソースとして使用します。 画面上で何かしらのデータをDragした際、そのデータをコンポーネントやDOMノードとしては扱わず、代わりにDragされているデータを特定のタイプのアイテム("item")として扱います。 ###■ "item"とは？ 現在Dragされているものがどのようなものなのかを、プレーンなJavascriptオブジェクトで
react-reduxのAjaxリクエスト時の初期描画について
ReduxでAPIをたたいで初期データを持ってくることがあるんだけど、何も考えないとハマる AjaxリクエストではcomponentDidMount()を使う。 クライアント上(サーバー上は除く)でのみ、初期描画(rendering)が発生した直後に一度実行される componentDidMountでAjaxをcallするActionを呼ぶのだけど、 データが返ってくる頃にはUnmountされていてコンポーネントが落ちると、 this.props.hoge is undefined とかreactjs - Cannot read property 'map' of undefined類いのエラーが起こる。 なのでレンダリングがされた後にActionを呼ぶようにしたい。 isMounted()でレンダリングされているかの判定が返ってくるAPIがあるのですが、isMounted()はアンチパタ
React.jsのRefsをES2015で書いてみた - Qiita
初投稿です。 これから備忘録代わりにキータに記事書いて行こうと思います。 早速ですがReact.jsのrefsのサンプルをES2015で書き直しました。 #React.jsのrefsについて とりあえずrefsについてはこのリンクを見て頂ければと思いますが http://js.studio-kingdom.com/react/guides/more_about_refs stateにデータを流してDOM操作してると、jQueryでいうところのremoveやappendは使わないにしてもサンプルのようにある動作をした後に直接DOMを操作したいということが稀にあります。 そんな時にrefs使うと良いよっていう話しです。 とりあえず、上記リンクのコードをES2015化して行きます。 var App = React.createClass({ getInitialState: function()
[翻訳] Airbnb React/JSX Style Guide - Qiita
この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
![[翻訳] Airbnb React/JSX Style Guide - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3f9c1a13a2d921a4c00c7e4138f2cab3d619a2b9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTQ4MTAlMkZwcm9maWxlLWltYWdlcyUyRjE2NDkzMDU5NzQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9OTcxNTJmOTAxYzY4OTUwZmE2NTRjNDcxZDA3MmYzNDI%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D197c29633cfc4106f69f23fd161148cb%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQWlyYm5iJTIwUmVhY3QlMkZKU1glMjBTdHlsZSUyMEd1aWRlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OGUzZmJjNDJmZTI1MmJkMjU5ZjRiOTc3NzkyMDBiNDU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YW1hZGFzaHkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0wYjFhYTE5YTA2NWZkZDczNWQ1NTdmNGYxYmFiZDM0ZQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D039d2c724a02268a1427af1a035e6a56)
React+ReduxのAction、Reducerを個別にテストする - Qiita
概要 Reactでユニットテストをしたく、コンポーネントのテストであれば以下の様な記事を参考にすればできそうだが、Fluxをつかったアプリで、ActionやDispatcherにロジックがある時には、それでは十分で無いと考えた。 React.js + Jest - Qiita 今回はReact+Reduxを使っているので、Action、Reducerを個別にテストする方針を考えた。テストフレームワークは、karma+jasmineを使用している。 Action テストするactionは以下の様なものを想定している。単純にAPIを叩いてresを得るというもの。 import { REQUEST, REQUEST_SUCCESS, } from 'constants'; // リソース管理はsuperagent import request from 'superagent'; functio
Material UI使ってみた - Qiita
Material UIとは Material UI GoogleのマテリアルデザインをReactベースで使えちゃう今時なCSSライブラリ おっ、これかっちょいいと思って少し触ってみました。 日本語の解説記事とかが見当たらなかったので簡単に紹介します。 Get started この辺で解説されているので、公式のドキュメントとともに参考にする感じで。 Componentの使い方とか 大別して3種類のAPIがあります。 Props Events Methods 名前の通りそれぞれ、 reactコンポーネントのrenderで要素を生成する際に利用できるprop 要素で発生するhtmlイベント（onChange,onClickなど） 要素で使える関数 になります。 使い方を見ていきます。 Props これはそのまんま。 render() { return ( <DatePicker hintText
React.js の 公式Tutorial を Redux を利用して書き直した。また Mocha + power-assert を利用したテストも追加 - Qiita
前回 QiitaにReact.js の React.js の公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した で公式TutorialをECMA2015(ECMA6)を利用して書き直しを行ったのですが、ReactといえばFlux、Flux といえばRedux ということで、流行りのRedux を利用して記述したらどうなるのかを試してみました。 また 同じく流行りのテスト環境である Mocha + power-assert を利用して、テストを追加してみました。 React および Redux はテストも非常に行いやすいのを体感しました。 前回の続編として、以下GitHub で公開しています。 https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6-redux Rea
React+Reduxでreducerのテスト - Qiita
概要 reduxでreducerのテストをしたく、以下の様な記事を書いた。 React+ReduxのAction、Reducerを個別にテストする - Qiita モックしたデータをstore.dispatchするという方法をとっていたが、これも、reducer実行終了時まで待つ必要があるため、タイミングを担保するのが難しい。そこで、別の方針でテストすることにした。 方針 reduxのドキュメントを参考にすると、dispatchをせず、直接reducer関数を実行している。同じように実装することにした。 Writing Tests | Redux // createReducerは以下の様なutilメソッドを用意しておく // export function createReducer (initialState, reducerMap) { // return (state = init
React+ReduxのコンポーネントをKarma+Jasmineでユニットテストする - Qiita
function increment() { return { type : COUNTER_INCREMENT }; } export class Counter extends React.Component { static propTypes = { dispatch: React.PropTypes.func.isRequired, counter: React.PropTypes.number, } constructor() { super(); } render() { return ( <div className='container text-center'> <h1>Sample Counter</h1> <h2>{this.props.counter}</h2> <button onClick={this.props.dispatch(increment)}> I
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stateless な React Component の記法をまとめてみた - Qiita
JavaScriptが辿った変遷 - Qiita
Reactjs v0.14 changes