Submit Search
Upload
React entry
•
1 like
•
457 views
N
Nobuaki Miura
Follow
Reactの超入門資料
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 18
Download now
Download to read offline
Recommended
Node.js+MongoDB in SPA
Node.js+MongoDB in SPA
Naoki Sasaki
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+docker
Nobuaki Aoki
AWS CLIでEC2の利用料金を節約する
AWS CLIでEC2の利用料金を節約する
Yasuyuki Sato
Repaint & reflow
Repaint & reflow
Kingsley Zheng
Introduction to React
Introduction to React
Yos Riady
Synchronizing application state using Virtual DOM trees
Synchronizing application state using Virtual DOM trees
Jari Voutilainen
Intro to Web Map APIs
Intro to Web Map APIs
Yos Riady
Introduction to React
Introduction to React
Quentin Leonetti
Recommended
Node.js+MongoDB in SPA
Node.js+MongoDB in SPA
Naoki Sasaki
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+docker
Nobuaki Aoki
AWS CLIでEC2の利用料金を節約する
AWS CLIでEC2の利用料金を節約する
Yasuyuki Sato
Repaint & reflow
Repaint & reflow
Kingsley Zheng
Introduction to React
Introduction to React
Yos Riady
Synchronizing application state using Virtual DOM trees
Synchronizing application state using Virtual DOM trees
Jari Voutilainen
Intro to Web Map APIs
Intro to Web Map APIs
Yos Riady
Introduction to React
Introduction to React
Quentin Leonetti
Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina
Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina
University of Helsinki
Why and How to Use Virtual DOM
Why and How to Use Virtual DOM
Daiwei Lu
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
Jimit Shah
ReactNativeを語る勉強会
ReactNativeを語る勉強会
yohei sugigami
Pjax 深入淺出
Pjax 深入淺出
Kingsley Zheng
React
React
MinJae Kang
From Back to Front: Rails To React Family
From Back to Front: Rails To React Family
Khor SoonHin
React Native - Workshop
React Native - Workshop
Fellipe Chagas
Introduction to ReactJS
Introduction to ReactJS
Hoang Long
React.js in real world apps.
React.js in real world apps.
Emanuele DelBono
[@NaukriEngineering] Git Basic Commands and Hacks
[@NaukriEngineering] Git Basic Commands and Hacks
Naukri.com
An Introduction to ReactJS
An Introduction to ReactJS
All Things Open
ReactJS presentation
ReactJS presentation
Thanh Tuong
Intro to react native
Intro to react native
ModusJesus
React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016
React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016
Codemotion
DOM Features You Didn’t Know Existed
DOM Features You Didn’t Know Existed
FITC
Effective ES6
Effective ES6
Teppei Sato
React + Redux Introduction
React + Redux Introduction
Nikolaus Graf
ES6: The Awesome Parts
ES6: The Awesome Parts
Domenic Denicola
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
Reactのおさらい
Reactのおさらい
iPride Co., Ltd.
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
Ryusaburo Tanaka
More Related Content
Viewers also liked
Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina
Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina
University of Helsinki
Why and How to Use Virtual DOM
Why and How to Use Virtual DOM
Daiwei Lu
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
Jimit Shah
ReactNativeを語る勉強会
ReactNativeを語る勉強会
yohei sugigami
Pjax 深入淺出
Pjax 深入淺出
Kingsley Zheng
React
React
MinJae Kang
From Back to Front: Rails To React Family
From Back to Front: Rails To React Family
Khor SoonHin
React Native - Workshop
React Native - Workshop
Fellipe Chagas
Introduction to ReactJS
Introduction to ReactJS
Hoang Long
React.js in real world apps.
React.js in real world apps.
Emanuele DelBono
[@NaukriEngineering] Git Basic Commands and Hacks
[@NaukriEngineering] Git Basic Commands and Hacks
Naukri.com
An Introduction to ReactJS
An Introduction to ReactJS
All Things Open
ReactJS presentation
ReactJS presentation
Thanh Tuong
Intro to react native
Intro to react native
ModusJesus
React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016
React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016
Codemotion
DOM Features You Didn’t Know Existed
DOM Features You Didn’t Know Existed
FITC
Effective ES6
Effective ES6
Teppei Sato
React + Redux Introduction
React + Redux Introduction
Nikolaus Graf
ES6: The Awesome Parts
ES6: The Awesome Parts
Domenic Denicola
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
Viewers also liked
(20)
Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina
Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina
Why and How to Use Virtual DOM
Why and How to Use Virtual DOM
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
ReactNativeを語る勉強会
ReactNativeを語る勉強会
Pjax 深入淺出
Pjax 深入淺出
React
React
From Back to Front: Rails To React Family
From Back to Front: Rails To React Family
React Native - Workshop
React Native - Workshop
Introduction to ReactJS
Introduction to ReactJS
React.js in real world apps.
React.js in real world apps.
[@NaukriEngineering] Git Basic Commands and Hacks
[@NaukriEngineering] Git Basic Commands and Hacks
An Introduction to ReactJS
An Introduction to ReactJS
ReactJS presentation
ReactJS presentation
Intro to react native
Intro to react native
React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016
React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016
DOM Features You Didn’t Know Existed
DOM Features You Didn’t Know Existed
Effective ES6
Effective ES6
React + Redux Introduction
React + Redux Introduction
ES6: The Awesome Parts
ES6: The Awesome Parts
React JS and why it's awesome
React JS and why it's awesome
Similar to React entry
Reactのおさらい
Reactのおさらい
iPride Co., Ltd.
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
Ryusaburo Tanaka
PostgreSQLの連携!クラウド移行!負荷分散!バックアップ!DBMotoで一挙解決!
PostgreSQLの連携!クラウド移行!負荷分散!バックアップ!DBMotoで一挙解決!
株式会社クライム
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
sairoutine
データベース勉強会 In 広島 mongodb
データベース勉強会 In 広島 mongodb
Ryuji Tamagawa
Grid application テンプレートを紐解く
Grid application テンプレートを紐解く
Kazuhide Maruyama
Daisukei vsug ef
Daisukei vsug ef
vsug_jim
Continuous delivery chapter13
Continuous delivery chapter13
favril1
React + Reduxで作る対話AI
React + Reduxで作る対話AI
Kentaro Tada
Djangoとは
Djangoとは
Gomamatsu
Similar to React entry
(10)
Reactのおさらい
Reactのおさらい
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
PostgreSQLの連携!クラウド移行!負荷分散!バックアップ!DBMotoで一挙解決!
PostgreSQLの連携!クラウド移行!負荷分散!バックアップ!DBMotoで一挙解決!
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
データベース勉強会 In 広島 mongodb
データベース勉強会 In 広島 mongodb
Grid application テンプレートを紐解く
Grid application テンプレートを紐解く
Daisukei vsug ef
Daisukei vsug ef
Continuous delivery chapter13
Continuous delivery chapter13
React + Reduxで作る対話AI
React + Reduxで作る対話AI
Djangoとは
Djangoとは
React entry
1.
入門 React 2015-08-28 miuranobuaki
2.
React 〔ある作用に対して〕 作用し合う,反応を示す
3.
• シンプルで利用が容易 • Virtual
DOMによるレンダリング効率向上 • コンポネント指向で保守性、可読性が高い http://facebook.github.io/react/
4.
Virtual DOM
5.
• DOMを直接操作しない • メモリ上にDOMと同じ構造のVDOMを構築 •
Viewの状態変化を検知すると状態変化前後のVDOMを比較 • 差分をパッチとしてオリジナルのDOMに当て、効率的なレンダリングを実現 要素の親も 変更されたことがわかる
6.
最速というわけではない Virtual DOMを使った差分更新は すべてをDOM書き換えるよりは高速 という意味
7.
コンポーネント指向
8.
値 -> DOMの変換をする 再利用を前提にする 変換処理だけをする(関数みたいな感じ) •
冪等性と疎結合が担保 • テスタブル • カジュアルな変更・削除が可能
9.
データの流れを一方向に保つ
10.
とりあえず動かそう
11.
FacebookのJSを読み込む ダウンロードする <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> http://facebook.github.io/react/ OR
12.
HelloWold <title>Hello React!</title> <script src="react.js"></script> <script
src="JSXTransformer.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
13.
コンパイル 1.brew install npm 2.npm
install -g react-tools 3.jsx --watch src/ build/
14.
JSX (JavaScriptXml)
15.
JSX <script type="text/jsx"> React.render( <h1>Hello, world!</h1>,
document.getElementById('example') ); </script> HTMLやXMLみたいな感じでVirtual DOMを表現
16.
Tutorial
17.
入門しきれなかったorz また続きをやります。。。
18.
・GET STANDARD http://facebook.github.io/react/docs/getting-started.html ・Tutorial http://facebook.github.io/react/docs/tutorial.html ・Thinking in
React http://facebook.github.io/react/docs/thinking-in-react.html
Download now