Redux + Reactのboilerplateっぽいチートシート未満 - Qiita
何回か使ううちに微妙な所も見えつつ、とはいえ結局より良いfluxは出てき無いので付き合っている感じのRedux。 毎回最初にどう書くんだったか忘れてしまうのでここらで自分が毎回やっているのをまとめておく。 だいたい下記を入れておいてる前提 react関連 react react-dom redux関連 redux react-redux redux-actions redux-thunk babel必要ならこのへんのpreset babel-preset-react babel-preset-es2016 main エントリポイントになる所。あんまり考えることはない。 ./store、./containerは下記で記載する。 あんまり気合いれない時はこのファイルにstoreもcontainerもまとめちゃう。 import React, { Component } from "react"
Custom elementsはES6のclass記法で定義可能になりそうです - Qiita
class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; } static get observedAttributes() { return ["country"]; } attributeChangedCallback(name, oldValue, newValue) { // observedAttributes によって、 name はいつも "country" になる this._countryCode = newValue; this._updateRendering(); } get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v)
Wantedlyの最近のReact事情についてMeguro.es #3で発表しました! - Wantedly Engineer Blog
目黒界隈のJavaScriptを書くエンジニアがあつまる勉強会、 “Meguro.es #3 in Drecom”に参加してきました。 会場はドリコムさんのオフィス内のカフェのようなスペースで、お酒を飲みつつ、ゆるやかで居心地良い雰囲気でした。 Wantedlyからは高松と森脇の2人で最近のWantedlyのフロントエンド開発で使っているツールやライブラリの話をしました。 WantedlyにReact + Reduxを導入した話 Wantedlyのこれまでのフロントエンド開発の歴史と、既存のRailsプロジェクトにReact + Reduxを導入した方法について話しました。 Immutable.jsとReact @Wantedly ~入門編~ Facebookが開発している不変オブジェクトライブラリの Immutable.jsの特徴や、Wantedlyでの活用例についての発表です。 We
HubotをES6で書いてHeroku上で動かした時のメモ - Qiita
"dependencies": { + "babel": "^6.5.2", + "babel-cli": "^6.7.5", + "babel-preset-es2015": "^6.6.0", "hubot": "^2.18.0", "hubot-diagnostics": "0.0.1", "hubot-google-images": "^0.2.6",
ReactJS入門@ES6:Redux編 - Qiita
対象者：Reactの基本を理解している人 / Reduxについて勉強している人 前：ReactJS入門@ES6:ReactRouter編 次：未定 まえがき Reduxの目的はStateを一元管理することです。 素のReactでは、Stateはコンポーネントが管理します。 コンポーネントの数が多くなり、親から子、子から子へとStateを継承したり、 コンポーネント間の連携などを考えだすと、Stateをどこかで一元管理し、 コンポーネントはイベントを受け、Stateを変更する命令を出すことに専念したくなります。 その仕組と制約を実現するのがReduxの役目だと、私は考えています。 まずはReduxを使わないカウンターをつくってみる カウンターをつくりましょう、カウンター。 画面にカウント回数と、プラスボタンとマイナスボタンが表示されているだけのやつです。 class Counter exte
日経有料記事の類似記事を無料で読めるChrome拡張をES6+Webpackの最小構成でつくった - Qiita
require('babel/register'); module.exports = exports = [ require('./config/webpack'), ]; import config from './index'; const globals = config.get('globals'); const paths = config.get('utils_paths'); const webpackConfig = { entry: paths.src('entry'), output: { path: paths.project(config.get('dir_dist')), filename: 'main.js' }, plugins: [], module: { preLoaders: [ { test: /\.js$/, loader: 'eslint', i
ReactNativeをなんとなく理解するためのReactCanvas - Qiita
個人的にはそこまでReactNativeに興味ないのだけど、今日なんとなくReactCanvasを試していたらなんとなくReactNativeを察した。 Flipboard/react-canvas https://github.com/Flipboard/react-canvas 作者はCanvasのネイティブ向け変換を作っていたEjectaの人。なるほど感ある。 参考: React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova http://wazanova.jp/items/1676 試してみる SurfaceがReactCanvasのトップノードでそれ以下はcanvasでレンダリングされる 各ノードはleft, top, width, height が必須の絶対座標配置。CSSが分かる人は position: absoluteな状態だと思
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
ES6+Karma+Jasmine環境のテンプレート - Qiita
ちょっとしたES6スクリプトをテスト付きでさくっと試すためのテンプレを作りました。 テストランナーはKarma、テスト本体はJasmineです。 はじめてpackage.jsonとかreadmeまじめに書きました。 任意のリポジトリを作成して、一時的にこのテンプレをリモートに設定し、プルしてからリモートを削除。 git remote add babel-starter https://github.com/110chang/babel-starter.git git pull babel-starter master git remote rm babel-starter npm i karma start
Redux初めて触って色々わかったメモ - Qiita
最初思ってたこと vs 現実 思ってたこと：なんか軽量？ 現実：誤解だった。割りと作ってくと大きめになってくる。軽量感は無い が、redux本体のコードは結構薄い。本当に関数群だけ提供しているイメージ 思ってたこと：他のfluxと圧倒的に違う？ 現実：これも誤解。構成としては色々作りこむと最終的には一般的なfluxと同じ感じになる（flummoxとかmartyあたりと体感一緒になる） ActionとかActionCreatorとかその辺が一緒になってくる。 思ってたこと：ES6で圧倒的に書ける？ 現実：正解。圧倒的にES6を前提にしている。 思ってたこと：React用のもの？ 現実：別にそうでもない。react-reduxを使うことでreactで使えるようになる。 詰まった所など 用語編 割りと初めて見たりする用語に出会った ActionCreator martyあたりにもあった。{typ
ざっくり React with Redux チュートリアル - Qiita
!!!Caution!!! (2019/8/15追加） ここに書いてあるやり方には、今は推奨されていない古い書き方があります（Class Component、propTypes、Redux における Action と Reducer の扱い方など）。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 前回までのまとめ React Tutorial 編 http://qiita.com/pullphone/items/efcaee59cf2a5725c61d 今回のテーマ そもそも Redux とは？ Redux で実装するにあたってのテンプレ・お約束 React と Redux をつなぐ そもそも Redux とは何者なのか？ React State の
ReduxとES6でReact.jsのチュートリアルの写経 - undefined
成果物 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
reduxを試してみた(1日目) - Reduxをざっくり理解する - Qiita
React.jsと組み合わせるfluxのライブラリreduxを試してみた。 このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 ゴール 最近のJavaScript開発環境に馴染むこと reduxを使ったアプリケーション開発がどんなものか理解できていること reduxを試した理由 React.jsと組み合わせるfluxの中で最右翼 今作っているSPAアプリがある程度複雑になりそうなのが見えているため (Mithrillくらいシンプルな方が良さそうな気がする) やったことメモ node.jsの更新 まずはnodeを更新しようと思い、下記のコマンドを実行。 するとError: uninitialized constant Formulary::HOMEBREW_CORE_FORMULA_REGEX. Please report this b
Electron x React x Webpack
3.md Electron x React x Webpack 0. Synopsis 今回は次のような問題を解決してみる。 ES6が使いたい よりアプリらしく作りたい 変更するとRefresh押すのが面倒いい まず、Electronは現状Node v4.1.1を使っているので、ES6で使えないものがまだ多い。今回はこれをWebpackで抑えてみる。ついでに、WebpackのHot module replace(以下、HMR)を利用して、ScriptやCSSの変更をRefreshsせずに反映されるようにしてみる。その上にReactを導入する。 1. 初期設定 Electronを設置する。 npm i -D electron-prebuilt WebpackのLoaderとPluginを設置する。 まずは、WebpackとJSXをコンパイルするためのBabel loader、React tr
webpack + babel-loaderでES6デビューしつつ、gulpもES6で書く - Qiita
こんにちは！ギャザリーで開発を担当している手塚＠inureoです。 今回はタイトル通りwebpack + babel-loaderでES6デビューしつつ、gulpもES6で書く、というところをやってみたいと思います。 gulpfile.jsをES6で書こうと思った理由 「ES6やりたいなー、しかも業務に直結するところで。」と考えていた時に、こちらの記事のgulpfile.js をES6で書く理由を拝見して「たしかにgulpfileなら実装に頭使わないし慣れるのにはピッタリだ！」と思ったからです。 早速ES6でgulpfileを書いていく gulpfileをES6で書くには、gulp側でES6対応をするか、node.js側でES6対応をするかの2択になります。 gulp側での対応 gulpの3.9.0からbabelを標準サポートするようになりました。ファイル名をgulpfile.babel.
Electron の開発環境を gulp + babel で整える - Qiita
概要 Electronとは、JavaScriptでデスクトップアプリが作れるツールです。 詳しくは前回の記事「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」をご覧くだい。 これまではElectronを使ったアプリ開発方法について書いてきました。 今回はコードをガリガリ書いていく前に、開発環境を整えたいと思います。 今回はElectronの開発を ES6 + React でしたいと思いました。 そのための開発環境を gulp + babel を使って整えていきます。 この辺りは他の記事をかなり参考にしました。既に同じようなことをやっている方がたくさんいらっしゃいますが、個人的なメモも兼ねてまとめます。 参考記事 * ぼくのかんがえたさいきょうのElectron 何がしたいか まずは何がしたいか、というところから話します。 JavaScr
Coffee, jQueryで書いていたElectronアプリをES6, React, Reduxで書き直した - k0kubun's blog
ElectronベースのTwitterクライアント: Nocturn ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog の時にCoffeeScriptとjQueryで作っていたNocturnというTwitterクライアントがあり、これをES6, React, Reduxを使って書き直した。この記事ではその時に得た知見、感じた事を書いておく。 移行したスタックと移行時に感じたこと あらかじめお断りしておくと、僕は普段はRubyでサーバサイドの実装や運用をやっている人であり、JavaScriptに関してはほぼ素人の意見なので、以下はReactとかRedux興味あるけどまだ触ったことないですみたいな人向けの内容になると思う。 CoffeeScript → ES6 移行 参考: 春からはじめるモダンJavaScript / ES201
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Payforward
GitHub - infofarmer/eslint-plugin-jsx-a11y
Error with eslint@2.3.0: Cannot find module 'estraverse-fb' · Issue #267 · babel/babel-eslint
