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
210
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
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
140
re:Invent2024 KeynoteのAmazon Q Developer考察
yusukeshimizu
1
150
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
250
技術に触れたり、顔を出そう
maruto
1
150
Evolving Architecture
rainerhahnekamp
3
250
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
140
メールヘッダーを見てみよう
hinono
0
110
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
140
AWSサービスアップデート 2024/12 Part3
nrinetcom
PRO
0
140
FODにおけるホーム画面編成のレコメンド
watarukudo
PRO
2
280
メンバーがオーナーシップを発揮しやすいチームづくり
ham0215
2
120
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
160
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
What's in a price? How to price your products and services
michaelherold
244
12k
Designing for Performance
lara
604
68k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
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!