FRONTEND CONFERENCE 2017のハンズオン用資料です。 教科書はこちら https://github.com/fand/react-hands-on
ReactのCSSTransitionGroupを利用して簡単なエフェクトを実装します。CSSTransitionGroupはCSSのアニメーションをReactで手軽に利用できるように作られたものです。 Animation | React CSSTransitionGroupの使い方 CSSTransitionGroupコンポーネントで子の要素を囲む事で、その子の要素の追加や削除のタイミングでアニメーション用のCSSクラスを自動的に付与してくれます。 たとえば、下記のように items を囲ったとすると、 <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {items} </CSSTransitionGroup> transition
* This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant
v15.0.0がリリースされました(2016/04/08) RC2が出たので追記 RC2 ではIE、Edgeでマークアップの構造によって一部のテキストが表示されないバグ(#6246)とSVGに関する変更がrevertされました。 React.js v15.0がリリースされたので変更内容などを整理したいと思います。 https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html http://facebook.github.io/react/blog/2016/03/16/react-v15-rc2.html http://facebook.github.io/react/blog/2016/04/07/react-v15.html 今回の一番大きな変更はバージョン番号かなと思います。 0.14から15.0に。 0.x系
autoscale: true How to work as a Team 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info 目的 新規でそこそこ複雑なウェブページを作る(アプリに近い) ある程度柔軟に拡張でき、メンテできるような設計にしたい 無難にReact + 何かでちゃんと設計して作っていきたい この設計部分をどう決めていくのかという話 現状 チームにReact/Flux/Reduxを触ったことがない人が多い どれが(主にView以外の設計)ベストかは分からない Flux的な部分の話 ものごとは変わる。 混乱は変わらない 混乱の原因 情報過多 情報不足 適切でない情報 上記の組み合わせ! via P21 今日からはじめる情報設計 情報の共有 情報不足 そもそもReactなどを知らない人には知ってもらう必
Note: update is a legacy add-on. Use immutability-helper instead. Importing import update from 'react-addons-update'; // ES6 var update = require('react-addons-update'); // ES5 with npm Overview React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it’s easy to implement a fast sho
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304 We’re trying to push the limits of what’s possible on the web with React. My talk will start
2015-07-08 React.jsのContext周りで嵌ったはなし (owner-based vs parent-based context) # Context React.js の Material Design パッケージ material-ui (mui) などを使ってると出てくる Context 。 これって ドキュメント を読んでもさっぱり出てこないんですよね。 私の探し方が悪いのかもしれませんが。 React.jsのコンポーネント間で情報を渡すためには props を使うわけですが、これはいちいち明示的に指定しなきゃいけないし、子は良くてもそれよ り下の子孫に渡すにはその全てにわたって渡していかなきゃならない。 これはめんどくさいし、コンポーネントの結合度がとても高くなってしまう。 そこで登場するのが Context なのかと。 以下、個人の見解になります。 例えば m
基本的に、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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く