I’m using redux and I’m not sure about how to organize my components, I think the best is to keep them in folders with the name of the main component as the name of the folder and all inner components inside: components Common/ things like links, header titles, etc Form/ buttons, inputs, etc Player/ all small components forming the player index.js this one is the top layout component playBtn.js ar
Elixir、Phoenixの勉強のための題材として、ブログシステムで作ってみることにした。飽きるまでのんびり改修していこうと思う。Elixir/Erlangの学習はすごいE本を並行して進める。 Elixir、Phoenixのインストールは完了しているものとする。 今回のゴール 記事の投稿ができる 記事の閲覧ができる 動作環境 Erlang 17.5 Elixir 1.2.0 Phoenix 1.1.4 node.js 4.2.1 プロジェクトの作成 プロジェクトを作成する。ただし、自分みたいなフロントな人間は真っ先に--no-brunchを付けたくなると思うんだけど--no-brunchを付けずにあとから手動で変更したほうが楽だという話しを聞くので参考にしてみる。 $ mix phoenix.new phoenix_redux_blog 参考にしたのは以下の記事。 qiita.com 以
最初はちょっととっつきにくいけど、責務がはっきり分かれていて比較的コードがごちゃごちゃになりにくい(と思っている)Reduxですが、やはり実戦投入するとどうにも扱いにくい部分が出てきます。 特にそう感じるのは通信系の処理、ユーザーとのインタラクションです。これってつまるところ非同期処理なんですが、処理を依頼する側、つまりActionを投げる側としては「あとのことはまかせた!」と言いたい。Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。 本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。 その前にmiddlewareについて Reduxの公式ドキュメントではログ出力を例に取り、アプリケーション本体から分離し
ElectronベースのTwitterクライアント: Nocturn ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog の時にCoffeeScriptとjQueryで作っていたNocturnというTwitterクライアントがあり、これをES6, React, Reduxを使って書き直した。この記事ではその時に得た知見、感じた事を書いておく。 移行したスタックと移行時に感じたこと あらかじめお断りしておくと、僕は普段はRubyでサーバサイドの実装や運用をやっている人であり、JavaScriptに関してはほぼ素人の意見なので、以下はReactとかRedux興味あるけどまだ触ったことないですみたいな人向けの内容になると思う。 CoffeeScript → ES6 移行 参考: 春からはじめるモダンJavaScript / ES201
Note: This example app has a bug due to bad flow design. See the explanation and the solution in this follow-up post! The Superhero battler appThis post presents a simple React-Redux example app. The aim was to have a small example to complement the official Redux ones, that is also more portable. It uses React, Redux, React-Router, React-Redux and browserify. And (almost) no ES6 syntax. Instead o
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
※ Presentational and Container Components - なっく日報 に補足を書きました。 概要 http://rackt.github.io/redux/docs/basics/UsageWithReact.html medium.com らへんに書いてある「Smart Components」「Dumb Components」を理解したよというお話です。 ポイント 以下、個人的な解釈です(ツッコミどころあればどうぞ!) VとCを切り離す ReduxとかFlux系ライブラリへの依存を切り離す あたりがポイントかなと。 VとCを切り離す Reactコンポーネントは 気をつけないと、MVCでいうところのVとCを兼ねた作りになりがち(Fluxアーキテクチャを採ったとしても!) 以下のように別々にわけるとより良い作りになる コントローラ的なコンポーネント(Smart
hisasann/electron-react-redux-boilerplate はじめに Node.js + Babel 6 + React + Redux + Webpack + Gulp + Electron Electronを母体として、React・Reduxを使ったフロントエンドのアーキテクチャについて試したことをメモメモ Webpackはbrowserifyとしか使っていません Electron 最近はやりのElectron(MacやWindowsのアプリ化)を使った場合の開発の仕方や、どうやるのが効率的かを少しずつメモしていきます 現時点では、Electronでビルドしたアプリのリリースやアップデートに関しては未調査になります Livereload まずは Livereload これがないとはじまりません 以下の記事を参考に、gulpのタスクを作ってみました ぼくのかんがえ
FluidScapes by Reza AliRedux, now in version 3, has been around less than a year but it has proved very successful. Inspired by Flux and Elm, is used to handle Application state and bind it to the User Interface in a very effective way. Redux also enables cool features like hot reloading or time travel with little effort. Redux is usually seen with React but it can be used separately. Redux builds
最近、Angular 2を使ってWebアプリ作成の手伝いをする機会がありました。このフレームワークの複雑さに戸惑いもありましたが、Angular 2は間違いなくすばらしいものです。この事後分析では私がAngular 2のフレームワークを使った時に感じたいい面と悪い面の両方を掘り下げていくことにします。 Angular 2 Angularは携帯電話やデスクトップのWebアプリケーションを作成するための開発プラットホーム。 https://angular.io/ Angular 2+リアクティブプログラミング=❤ 私はすでに、Angular 1アプリケーション ではRxJSをかなり使っていました。特に、サービス間のメッセージ・バスを行うアプリを作成する時です。Angular 2はObservableを非常によくサポートしているので、アプリ全体にリアクティブプログラミングを取り入れることができ、
概要 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でユニットテストする。 基本 以下の様なカウンターのコンポーネントを想定する。 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>{
Recommended practices for testing apps using ReduxExamples of test configuration and setup Guiding PrinciplesThe guiding principles for testing Redux logic closely follow that of React Testing Library: The more your tests resemble the way your software is used, the more confidence they can give you. - Kent C. Dodds Because most of the Redux code you write are functions, and many of them are pure,
In my ongoing love affair with static code analysis tools, I wanted to find a good code linter for Javascript, to use with Sublime. More specifically, a React.js project, with Mocha for tests, and of course using the awesome ES6 syntax (with Babel). With a background in Ruby and Go, I'm used to some great tooling like Rubocop/BeautifyRuby/govet/gofmt/golint. I enjoy the tight feedback loop of runn
成果物 github.com 目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気!!みたいなのを見て、覗いてみたら4.0 will likely be the last major release. Use Redux instead. It's really great.って書いてあってReduxを触ってみることにした。exampleとawesome-reduxを眺めたらどれも当たり前のようにES6で書かれていて、合わせて入門することにした。 Redux概要 まだかなり理解が怪しいんだけど、以下の図がイメージしやすかった。 André Staltz - Unidirectional User Interface Architecturesより S
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
巷で話題のReduxを仕事で使えそうです。ただReact/fluxを半年前に趣味のサービス開発でけっこう触っていたのに、Reduxはドキュメントを読んだだけではピンと来ず…。動かさないと分からないので、スターターキットを利用しながら実際に触ってみたいと思います。 react-redux-starter-kit https://github.com/davezuko/react-redux-starter-kit スターターキットのくせにスターが2000以上ついてるスゴイやつです。 ちなみにReduxは関連するライブラリや開発ツール等のエコシステムもすごいのですが、スターターキット(Boilerplate)も恐ろしいほど数があります。関連するライブラリやツール等の情報は awesome-redux にまとまっています。Reduxの最初のコミットが5月末でホットリローディングと共にお披露目され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く