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
220
intro to javascript unit tests for client side
weblancaster
0
160
Desktop Apps with NW.js and Angular.js (updated)
weblancaster
9
2.3k
CSS the right way?
weblancaster
15
2k
Other Decks in Technology
See All in Technology
実践! AIエージェント導入記
1mono2prod
0
150
Definition of Done
kawaguti
PRO
6
470
A2Aのクライアントを自作する
rynsuke
1
160
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
150
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
180
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
160
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
160
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
480
ローカルLLMでファインチューニング
knishioka
0
130
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
110
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
390
Featured
See All Featured
Done Done
chrislema
184
16k
The Cult of Friendly URLs
andyhume
79
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Making Projects Easy
brettharned
116
6.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Docker and Python
trallard
44
3.4k
Bash Introduction
62gerente
614
210k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
146
16k
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!