名刺の代わりにCLIアプリを書く - Qiita
すると自己紹介CLIアプリが起動。 ``` $ npx sindresorhus ```https://t.co/QO3ogKmu1d pic.twitter.com/xZdQSzFLAq — Sindre Sorhus (@sindresorhus) May 9, 2018 基本的には、このレポジトリを適当に書き換えれば簡単にできる。 はじめてのnpmライブラリにちょうどいいかも知れない。 また、使っている技術がちょっとおもしろくて、inkを使っている。 これは何かとCLIのためのReactだ。 普通にReactでCLIを書くことができる。 なお、ｖ０．５がちょっと壊れている雰囲気あってエラーが出るのでv0.4推奨です。 const {h, render, Component, Color } = require('ink'); class Counter extends Compone
redux-sagaで非同期処理と戦う - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
なぜ React か? サービスを成長させるための技術選択 | Wantedly Engineer Blog
Wantedlyでは、React + Reduxを中心としたWebフロントエンドの技術スタックを導入しました。モバイル版の会社フィードや、このブログを書いているエディタ、企業が使う候補者管理の画面などがこのスタックで実装されています。 導入したスタックの詳細や導入の理由、既存のRails環境への導入方法は以前発表した以下のスライドを参照ください。 また、先日Wantedlyに導入した技術スタックを使った勉強会を開催しました。React + Reduxを使って実際にアプリケーションを構築していく演習になっていますので、ぜひ手元で動かしてみてください。 React + Reduxを使ったWebアプリケーション開発速習会＠Wantedly 今回はこれらの背景にある"なぜReactか？"という判断の背景と"どう技術選択するか？"という話を書きたいと思います。 JavaScript界隈の流れの早さフ
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
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 他に必要なのは React の使い方を説明してくれる人だけです。 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、です。
3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations
Why I’m using React with Rails I've been using Rails for years and recently I’ve been integrating javascript frameworks into my stack in various ways to help with front end development. There are a lot of great javascript frameworks out there like Angular, Ember, Meteor, etc, but my current favorite is React and Flux. Facebook has been doing tremendous work open sourcing their javascript stack fro
React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート
結論 Sprocketsの動作を維持しつつ、npmやgulpなどのモダンなパワーも取り入れた、いいとこどりな環境を構築してみた。 やりたいこと SEOのため、Reactでserver-side renderingをしたい JSコードをES6で記述したい 既存のCoffeeScriptのコードも共存させたい（後ほど書き換える予定） npmやgulpといったモダンな環境でアセット管理をしたい browserifyを使いたい Sprocketsが実現している機能は維持したい そもそもSprocketsは何をしているか 周知のことでしょうが念のためおさらい。 ファイル毎の依存関係の管理 application.jsなどのマニュフェストファイルがやってること altJSのコンパイル アセットのminify アセットの連結 アセットファイル名にMD5フィンガープリントを挿入 Sprocketsの問題点
FacebookのReactで綺麗で高速なDOMのView操作 - 素人がプログラミングを勉強していたブログ
それほど新しい話題でもないが、FacebookがReact | A JavaScript library for building user interfacesというDOMを抽象化したようなView操作のライブラリをリリースした。 Githubが出してるエディタのAtomが実験的にReactを採用したり、Instagramが採用していたり、エディタでReactのシンタックスがサポートされ始めたり、海外では実際に使われはじめていて、実際に使ってみたら思いのほか使いやすかったので、簡単に使い方を書いていこうと思う。 まず、ReactにはJSXという、htmlをJS内で書ける言語がある。オプショナルなものだが、使ったほうがコードが綺麗になるので、この記事では使っていく。下記コードはEdit fiddle - JSFiddleなどでコンパイルなしにそのままテストできるので、適当にコピーしながら確
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
関数コンポーネントはクラスとどう違うのか?
Elemental UI