Since a few months I’ve stopped using React’s setState on all my new React components. Don’t get me wrong, I didn’t stop having local component state, I just stopped using React to manage it. And it’s been delightful! Using setState is tricky for beginners. Even experienced React programmers easily introduce subtle bugs when using React’s own state mechanism, like this: Bug introduced by forgettin
こんにちは!ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we’re announcing that we’re switching to major revisions for React. The current version is 0.14.7. The next release will be: 15.0.0 This change shouldn’t materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwar
Preact Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. View on GitHub Download .zip Download .tar.gz Preact Preact is a fast, 3kb alternative to React, with the same ES2015 API. Preact retains a large amount of compatibility with React, but only the modern (ES6 Classes and stateless functional components) interfaces. As one would expect coming from React, Components are
localStorageにstateのスナップショットを保存するRedux middlewareを作りました。 インストール import {createStore, applyMiddleware} from "redux"; import saveState from "redux-save-state/localStorage"; // combineReducersされたreducer達 import reducers from "./reducers"; // 保存先キー名 const key = "app-state-snapshot"; const store = applyMiddleware(saveState(key))(createStore)(reducers); // React Componentでdispatchが呼ばれるたびに保存 store.dispatc
One difficulty with ReactDOM.renderToString is that it is synchronous, and it can become a performance bottleneck in server-side rendering of React sites. This is especially true of pages with larger HTML payloads, because ReactDOM.renderToString's runtime tends to scale more or less linearly with the number of virtual DOM nodes. This leads to three problems: The server cannot send out any part of
基本的に、ReactのpropsはImmutable, stateはmutableという扱いです。 storeはストレージ抽象じゃない— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 rootComponent以外のComponentで参照するプロパティは基本的に全てpropsになるしstoreからの関数読み出しみたいな動的な状態決定は行わない— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 そもそもViewを論理的に分割しても人間のよくわからん都合でしっぺ返し食らうだけなんでコンポーネントが独立して稼働するなんて状態になりにくくて、一意な状態を作るのに一旦一箇所に集約した上で各コンポーネントに発散するのがいい— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 @r7kamura 親が正しいprops持ってれば、結果として正しいpr
fluxフレームワーク、今は Redux が一番アツい様子なので触ってみた。 github.com (追記 2015-10-03 18:15 APIや用語が大幅に変わったので更新した) Redux の経緯 2015-05-30 に公開された "The Evolution of Flux Framework" という記事がある。 medium.com Reduxはその PoC 的な実装だったんだけど、実用的ということでめっちゃ流行っているみたい。 Initial commit も 2015-05-30 だった。 Initial commit · rackt/redux@8bc1465 · GitHub 最近の flux フレームワークだと fluxible と flummox が人気だったけど、 flummoxのページには 4.0 will likely be the last major
Edit · May 15, 2015 · 16 minutes read · Follow @mgechev Flux JavaScript AngularJS React MVC MVW This is the first blog post of the series “Flux in Depth”. Is this “yet the another flux tutorial”? What I have seen so far, while researching flux, were mostly “how-to” tutorials (usually with todo applications), which describe the main components of given flux application and the data flow between the
サブスタックさんがfluxについてひとこと言いたいそうです。.md つまりfluxっていうのは基本的にはEventEmitterでイベントの順序があるっていうことかな? なんか色々書いてあるけども https://facebook.github.io/flux/docs/dispatcher.html#content そして僕にはEventEmitterからみて利点がよくわかってない、単なる人目を引かせるためのマーケティングかな これがほぼ全てのコードか。 https://t.co/y2dbxOtUn9 ドキュメントとは異なっているようにみえるが、、、 @substack fluxはライブラリって言うよりコンセプトだよね。だからflux inspired libraryがたくさんあるんだと思うけど @NickDima なんか騙してるっぽく見える。。。 @NickDima さらに言えば、fl
今、React・Fluxで作っているツールで、window.onresize時にwindow.innerHeightをdivのheightとして設定するようなComponentを作った。 こういう感じ: class Example extends React.Component { constructor (props) { super(props); this._onWindowResize = this.onWindowResize.bind(this) this.setState({ height: 0, width: 0 }) } render () { let {width, height} = this.state; return <div {...this.props} style={{ width, height }} />; } onWindowResize () { t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く