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
Tech Nottingham: Introduction to React
Search
Jack Franklin
April 04, 2016
Technology
2
120
Tech Nottingham: Introduction to React
Jack Franklin
April 04, 2016
Tweet
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
220
Components on the Web: Frontend NE
jackfranklin
1
800
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
460
Front Trends: Migrating complex software
jackfranklin
1
800
Migrating from Angular to React: Manc React
jackfranklin
1
170
Half Stack Fest: Webpack
jackfranklin
4
530
FullStackFest: Elm for JS Developers
jackfranklin
1
230
Codelicious: Intro to ES2015
jackfranklin
0
360
PolyConf: Elm for JS Developers
jackfranklin
0
270
Other Decks in Technology
See All in Technology
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
300
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
580
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1.2k
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
150
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
7.5k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.5k
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
130
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
0
130
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
910
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
3.5k
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
Music & Morning Musume
bryan
46
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Building Applications with DynamoDB
mza
95
6.5k
How to Ace a Technical Interview
jacobian
278
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Language of Interfaces
destraynor
158
25k
Scaling GitHub
holman
460
140k
Facilitating Awesome Meetings
lara
54
6.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Invisible Side of Design
smashingmag
301
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
None
@Jack_Franklin
None
None
None
None
None
The ideas in React are more important than React itself
Components
Header News Feed Nav Chat with Alice
React Components
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;
} })
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;
} })
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;
} })
return <h1>Hello World!</h1>;
JSX https://facebook.github.io/react/docs/jsx-in-depth.html
This is a good thing, trust me…
It’s not HTML in your JavaScript
It’s JavaScript in your JavaScript
// Input (JSX): var app = <Nav color="blue" />; //
Output (JS): var app = React.createElement( Nav, { color: "blue" } );
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;
} }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;
} }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;
} }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
https://jsbin.com/fujaru/edit?html,js,output
props
var Person = React.createClass({ render: function() { return ( <div>
<h2>Name: { this.props.name }</ h2> <p>Favourite colour: { this.props.colour }</p> </div> ); } });
ReactDOM.render( <Person name="Jack" colour="Blue" />, document.body )
https://jsbin.com/wulolu/edit?js,output
props: data the component doesn’t change
state
var OnOff = React.createClass({ getInitialState: function() { return { on:
false } }, render: function() { return ( <div> <button>Toggle</button> <p>{ this.state.on ? 'ON' : 'OFF'}</p> </div> ) } })
var OnOff = React.createClass({ getInitialState: function() { return { on:
false } }, render: function() { return ( <div> <button>Toggle</button> <p>{ this.state.on ? 'ON' : 'OFF'}</p> </div> ) } })
var OnOff = React.createClass({ ... render: function() { return (
<div> <button onClick={this.toggle}> Toggle </button> </div> ) } })
var OnOff = React.createClass({ ... toggle: function() { this.setState({ on:
!this.state.on }) }, … })
http://jsbin.com/senedajafa/edit?js,output
state: data the component owns and will change
use props by default
None
None
None
None
None
virtual dom https://facebook.github.io/react/docs/reconciliation.html
components in components
var Mailbox = React.createClass({ getInitialState: function() { return { messages:
[{ id: 1, title: 'Hello', content: 'How is it going?', sender: 'Alice' }, {…}] } },
render: function() { }
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var messages = this.state.messages; var mails = messages.map(function(message) { return
( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
var Message = React.createClass({ render() { return ( <h4> {
this.props.message.title } </h4> ); } });
http://jsbin.com/jagizaheqo/edit?js,output
reusable components
var Person = React.createClass({ render() { return <p>{this.props.name} has a
favourite colour of {this.props.colour} </p> } }) ReactDOM.render( <Person name="jack" colour="blue" />, document.body )
ReactDOM.render( <Person colour="blue" />, document.body )
ReactDOM.render( <Person />, document.body )
propTypes
var types = React.PropTypes; var Person = React.createClass({ propTypes: {
name: types.string.isRequired, colour: types.string.isRequired },
var types = React.PropTypes; var Person = React.createClass({ propTypes: {
name: types.string.isRequired, colour: types.string.isRequired },
var types = React.PropTypes; var Person = React.createClass({ propTypes: {
name: types.string.isRequired, colour: types.string.isRequired },
http://jsbin.com/wawevinesi/edit?js,output
encourage reuse use propTypes
lifecycle
None
https://docs.google.com/drawings/ d/ 15yjhlRlNs2k8rDw1g_F9_nYWUL0 FsUDCFzAxMOGv5nI/edit
https://facebook.github.io/ react/docs/component- specs.html
componentWillMount
var GitHubPerson = React.createClass({ getInitialState: function() { return { data:
{} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
var GitHubPerson = React.createClass({ getInitialState: function() { return { data:
{} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
var GitHubPerson = React.createClass({ getInitialState: function() { return { data:
{} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
var GitHubPerson = React.createClass({ getInitialState: function() { return { data:
{} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
render: function() { return ( <p>{this.state.data.name} from { this.state.data.company }</p>
); }
http://jsbin.com/nalozobapa/edit?js,output
https://facebook.github.io/ react/docs/thinking-in- react.html
Large applications
http://redux.js.org/
http://redux.js.org/docs/ introduction/ Motivation.html
As the requirements for JavaScript single-page applications have become increasingly
complicated, our code must manage more state than ever before
STATE
STATE STORE
STATE STORE Uni-directional data flow
URLs
https://github.com/ rackt/react-router
One of the best (and overlooked) things about React is
how much code you write that's just plain old JavaScript.
https:// facebook.github.io/react/
Questions?
jackfranklin/react-introduction- exercises
10th of June, London React Workshop http://www.whiteoctoberevents.co.uk/ event/reactjs-workshop-june-16/
@Jack_Franklin jack@pusher.com javascriptplayground.com