GitHub - felipeochoa/rjsx-mode: A JSX major mode for EmacsYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ReactのテストをEnzymeで書いてみよう - Qiita
GithubのExploreを覗いていたら面白そうなテストツールがありました。 https://github.com/airbnb/enzyme Reactに力を入れているというAirbnbが作ったテスティングツールなのですが、ドキュメントがサラッとしか書いてなかったのでお遊びがてら使えるようになるまで触った軌跡を書いてきます。 「んなことより早くブツを見せんかい！！」という猛者JSerな方は以下のリポジトリから何となく意図を汲みとって何となくマサカリを投げてください。 はじめに まずは必要なものをnpmで入れてきましょう。 $ npm install -g mocha $ npm install --save-dev chai $ npm install --save-dev babel-register $ npm install --save-dev enzyme インストールしたも
Testing React Components with Enzyme and Mocha - Semaphore
Full-stack web developer, passionate about solving engineering problems of all kinds with elegant solutions that deliver incredible user experiences. Some thoughts & some code @ ifelse.io. @markthethomas everywhere else. Introduction React has become an increasingly popular and widely-used JavaScript application tool for developing web applications. Popular frameworks like Angular.js, Ember.js, an
Redux + React + ES6 の簡単アプリを作成する②(ReactとReduxの連携編) - Qiita
概要 前回記事の続き。 実際にReduxでReactのstateを管理する。 Reactのインストールは出来ている前提とする。 ReactとReactDOMはwebpackでグローバル変数かしている事とする。 Components ReactでComponentsを作成していく。 まずは、メインとなるComponent。 (CSSフレームワークはMaterialize.cssを利用している。) import FormApp from './Form/FormApp.jsx'; export default class App extends React.Component { render() { return ( <div className="container"> <FormApp handleClick={this.props.onClick} value={this.props.
Redux + React + ES6 の簡単アプリを作成する①(Redux編) - Qiita
背景 Reactにも慣れが出てきたので、次はFluxのデータフローについて学ぼうと思った。 Fluxの詳しいデータフローに関しては、公式サイトや別の記事を参考に。 Fluxのフレームワークとしては、頭1つ抜けているReduxを選定した。 ReactとReduxの連携部分で多少はまったのでメモ。 学習内容 Flux(Reduxベース)の基本的な考え方。 Flux(Reduxベース)のデータフローと登場人物。 Fluxでよくみる図。 概要 入力した内容がそのまま出力されるだけのアプリ。 state管理をReduxのみで行う。 Action ActionはActionCreatorという純粋な関数である。 ActionCreatorはActionオブジェクトを返し、Store(※後述)のdispatch関数に引数として渡される事でStoreにEmit出来る。
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"
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
ReactJS入門@ES6:Redux編 - Qiita
対象者：Reactの基本を理解している人 / Reduxについて勉強している人 前：ReactJS入門@ES6:ReactRouter編 次：未定 まえがき Reduxの目的はStateを一元管理することです。 素のReactでは、Stateはコンポーネントが管理します。 コンポーネントの数が多くなり、親から子、子から子へとStateを継承したり、 コンポーネント間の連携などを考えだすと、Stateをどこかで一元管理し、 コンポーネントはイベントを受け、Stateを変更する命令を出すことに専念したくなります。 その仕組と制約を実現するのがReduxの役目だと、私は考えています。 まずはReduxを使わないカウンターをつくってみる カウンターをつくりましょう、カウンター。 画面にカウント回数と、プラスボタンとマイナスボタンが表示されているだけのやつです。 class Counter exte
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
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
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
EcmaScript6のハマり記法問答集（変数編） - Qiita
Reactで開発的なことをしてみたら、わりとReactそのものよりES6の記法的な質問がそれなりにあったのを感じたので雑多に問答集 Q. varとletとconstって何が違うの？ A. ざっくり言えばこう var a = "hoge" // もう忘れていい let b = "fuga" // 変更できる値。mutable const c = "baz" // 変更できない値。immutable varに関しては、多分使うことはもう無いはず（と僕は思っている）。ESLintでもno-varというルールがあるので、設定しちゃっている。 Q. let obj = { hoge }っていうこれなに A. {hoge}は{hoge: hoge}となる。いわゆるシュガーシンタックス的なもの こんな感じ。便利。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Payforward
GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint
GitHub - jmrog/react-essentials-es6-version: A refactoring of the project described in "React.js Essentials" using ES6 rather than just ES5.