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
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
【Forkwell】「正しく」失敗できるチームを作る──現場のリーダーのための恐怖と不安を乗り越える技術 - FL#83 / A team that can fail correctly by forkwell
i35_267
2
110
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
110
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
210
“常に進化する”開発現場へ! SHIFTが語るアジャイルQAの未来/20250306 Yuma Murase
shift_evolve
0
100
AIエージェント入門
minorun365
PRO
33
20k
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
4
520
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
4
700
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
サバイバルモード下でのエンジニアリングマネジメント
konifar
22
7.3k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
Six Lessons from altMBA
skipperchong
27
3.6k
Faster Mobile Websites
deanohume
306
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What's in a price? How to price your products and services
michaelherold
244
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Site-Speed That Sticks
csswizardry
4
420
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!