React v16 and beyond React FiberHTML5 Conference 2016 http://events.html5j.org/conference/2017/9/session/#a4
GitHub - mirrorjs/mirror: A simple and powerful React framework with minimal API and zero boilerplate.
We love React and Redux. A typical React/Redux app looks like the following: An actions/ directory to manually create all action types (or action creators) A reducers/ directory and tons of switch clause to capture all action types Apply middlewares to handle async actions Explicitly invoke dispatch method to dispatch all actions Manually create history to router and/or sync with store Invoke meth
React Fiber現状確認
F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。 Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。 もちろん、react-fiberというパッケージをインストールするというわけでもありません。 むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。 とりあえずどうなるのか知りたい人向けのまとめ v16では、基本的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わ
Scala入門としてCLIツールを作り、Scala.js, React, ScalaCSSでサイトを作った - マルシテイア
fand.github.io 今年2月からScalaのチームに異動し、Scala入門している。 2月中はゆっくりコップ本を読んでいたのだけど、やっぱり手を動かさないと自信が付かないので、何かツールを作る事にした。 ついでにGitHub PagesもScala.jsやScalaCSSで実装してみた。 つくったツール github.com !!! 実用性は度外視しています !!! レポジトリをまるごとコピーしてくれるやつ。 ブランチを移動する度にコンパイルで時間かかるのを回避するため、ブランチ毎にコピーしたらいいのでは、という発想（上手く行ってるかはわからない……）。 手で cp -r するのが一番はやいし、ツールを作るにしても普段だったらJSで書くとこだけど、今回はせっかくなのでScalaでCLIツールを作ってみた。 使い方 brewでインストール可能。 $ brew tap fand/cl
FRONTEND CONFERENCE 2017でReactハンズオンを開催しました - マルシテイア
speakerdeck.com 2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。 kfug.jp 今回のハンズオンでは Reactアプリケーションの開発を身体で覚える React開発環境におけるトレンドを体験する の2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。 この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。 ハンズオンの方向性 Next.jsを採用 ハンズオンの流れ 工夫した点 お手本ブランチを用意する コード修正の指示をdiff形式で書く 自己紹介よりも前にセットアップをお願いする 反省した点 gitが手元にない人は git checkout できない お手本ブランチ作るのしんどい…… 皆様の反応 ハンズオン 資料 感想
React ShallowRender internals
This post is tracing ReactShallowRender flow. ReactShallowRender is a "shallow" render for unit testing, which returns a "shallow" ReactElement tree. "shallow" means that it renders its ReactElement tree only one level. You can use it like this. import assert from 'assert'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; const Child = ({foo}) => <div>{foo}</div>; const
React Interview Questions
For the record, asking someone these questions probably isn't the best way to get a deep understanding of their experience with React. React Interview Questions just seemed like a better title than Things you may or may not need to know in React, but you may find helpful none the less. What happens when you call setState? The first thing React will do when setState is called is merge the object yo
The Inner Workings Of Virtual DOM
Virtual DOM (VDOM aka VNode) is magical ✨ but is also complex and hard to understand😱. React, Preact and similar JS libraries use them in their core. Unfortunately I couldn’t find any good article or doc that explains it in a detailed-yet-simple-to-understand fashion. So I thought of writing one myself. Note: This is a LONG post. I’ve added tons of pictures to make it simple but it also makes the
Elm Architecture for React
Disclaimer: This is just an experiment. I’m not advocating this approach for real-world applications. It’s neither reactive nor does it actually work anything like Elm at all. In this post I will try to explain an experiment in making the Elm architecture work for plain React applications, without any of the FRP aspects. While it doesn’t really work like Elm at all it may still be useful to unders
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 の宣
Using Electrode to Improve React Server Side Render Performance By Up To 70%
We built Electrode, the react/node.js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most importantly, performance. We use server side rendering for almost all of our applications for two reasons: Improved performance for the customerBetter for SEOIn our tests, however, we found that React’s render
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
Immutable User Interfaces (Lee Byron) - Full Stack Fest 2016
One of the greatest challenges of building a rich UI is keeping track of all that is changing: incoming touch and mouse events, new data from your servers, animations, and more. Here we propose a new way to tackle this challenge that is as old as computing itself: don't let anything change in the first place. Come learn about how to build rich and highly performant UIs without losing your sanity b
GitHub - FormidableLabs/react-game-kit: Component library for making games with React & React Native
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Style your Components with styled-component!
GitHub - gabrielbull/react-router-server: Server Side Rendering library for React Router v4.
Vim on Browser (short)
https://grommet.github.io/