Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to Reactjs
Search
Michael Lancaster
May 12, 2015
Technology
5
2.1k
Intro to Reactjs
A quick intro to React.js
Michael Lancaster
May 12, 2015
Tweet
Share
More Decks by Michael Lancaster
See All by Michael Lancaster
Docker?! But I'm a frontend.
weblancaster
3
470
Soundnode, The Journey
weblancaster
0
210
intro to javascript unit tests for client side
weblancaster
0
150
Desktop Apps with NW.js and Angular.js (updated)
weblancaster
9
2.2k
CSS the right way?
weblancaster
15
1.9k
Other Decks in Technology
See All in Technology
事業を差別化する技術を生み出す技術
pyama86
2
440
サバイバルモード下でのエンジニアリングマネジメント
konifar
7
1.6k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
500
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
180
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
860
困難を「一般解」で解く
fujiwara3
7
1.6k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
660
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
200
手を動かしてレベルアップしよう!
maruto
0
240
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
A Philosophy of Restraint
colly
203
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Documentation Writing (for coders)
carmenintech
68
4.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Side Projects
sachag
452
42k
What's in a price? How to price your products and services
michaelherold
244
12k
For a Future-Friendly Web
brad_frost
176
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Intro to React.js
How a Chinese Company built a 57-storey skyscrapers in 19
days?
None
None
None
Composability Encapsulation Reusability Declarative Flexibility Performance Interoperability
None
JSX
import React from "react"; import ReactDOM from "react-dom"; class App
extends React.Component { constructor(props) { super(props); this.state = { todos: ['buy soy milk', 'call mom'] } } render() { return (<div><Todos todos={this.state.todos} /></div>) } } const Todos = ({todos}) => { return ( <ul> {todos.map(todo => { return <TodoItem key={todo.replace(' ', ‘’)} todo={todo} /> })} </ul> ) }; const TodoItem = ({todo}) => (<li>{todo}</li>); const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
None
Compiled
var App = (function(_React$Component) { _inherits(App, _React$Component); function App(props) {…}
_createClass(App, [ { key: "render", value: function render() { return React.createElement( "div", null, React.createElement(Todos, { todos: this.state.todos }) ); } } ]); return App; })(React.Component); var Todos = function Todos(_ref) { var todos = _ref.todos; return React.createElement( "ul", null, todos.map(function(todo) { return React.createElement(TodoItem, { key: todo.replace(" ", ""), todo: todo }); }) ); }; var TodoItem = function TodoItem(_ref2) { var todo = _ref2.todo; return React.createElement("li", null, todo); };
import React from "react"; import ReactDOM from "react-dom"; class App
extends React.Component { constructor(props) { super(props); this.state = { todos: ['buy soy milk', 'call mom'] } } render() { return (<div><Todos todos={this.state.todos} /></div>) } } const Todos = ({todos}) => { return ( <ul> {todos.map(todo => { return <TodoItem key={todo.replace(' ', ‘’)} todo={todo} /> })} </ul> ) }; const TodoItem = ({todo}) => (<li>{todo}</li>); const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Diff Algorithm
Level by Level * source http://calendar.perfplanet.com/2013/diff/
Components * source http://calendar.perfplanet.com/2013/diff/
List * source http://calendar.perfplanet.com/2013/diff/
Batching * source http://calendar.perfplanet.com/2013/diff/
Sub-tree rendering * source http://calendar.perfplanet.com/2013/diff/
Selective Sub-tree rendering * source http://calendar.perfplanet.com/2013/diff/
Component Lifecycle
Mounting Update (new props or state) constructor() static getDerivedStateFromProps() render()
componentDidMount() static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting componentWillUnmount() Error Handling static getDerivedStateFromError() componentDidCatch()
Props vs State
- Props State Can get initial value from parent Component?
Yes Yes Can be changed by parent Component? Yes No Can set default values inside Component? Yes Yes Can change inside Component? No Yes Can set initial value for child Components? Yes Yes
React-Native React-Native-Web React-Primitives React-Sketch React-360 React-Native-Windows
Demo
Thanks!