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
460
Soundnode, The Journey
weblancaster
0
200
intro to javascript unit tests for client side
weblancaster
0
140
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
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
190
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
130
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
210
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
580
Functional TypeScript
naoya
10
4.5k
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
550
contenteditableと向き合う
kikuchikakeru
2
270
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
190
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
140
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
技術ブログや登壇資料を秒で作るコツ伝授します
minorun365
PRO
23
5.4k
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.1k
Featured
See All Featured
How to name files
jennybc
75
98k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
Producing Creativity
orderedlist
PRO
340
39k
What the flash - Photography Introduction
edds
67
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
For a Future-Friendly Web
brad_frost
174
9.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
A better future with KSS
kneath
235
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
88
16k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
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!