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
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
800
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
950
Featured
See All Featured
Debugging Ruby Performance
tmm1
71
11k
In The Pink: A Labor of Love
frogandcode
139
22k
Producing Creativity
orderedlist
PRO
340
39k
The Pragmatic Product Professional
lauravandoore
29
6.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Practical Orchestrator
shlominoach
185
10k
Statistics for Hackers
jakevdp
792
220k
KATA
mclloyd
20
13k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Six Lessons from altMBA
skipperchong
24
3.2k
A designer walks into a library…
pauljervisheath
201
24k
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!