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
230
Components on the Web: Frontend NE
jackfranklin
1
810
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
480
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
180
Half Stack Fest: Webpack
jackfranklin
4
550
FullStackFest: Elm for JS Developers
jackfranklin
1
240
Codelicious: Intro to ES2015
jackfranklin
0
380
PolyConf: Elm for JS Developers
jackfranklin
0
280
Other Decks in Technology
See All in Technology
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
370
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
80k
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
140
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
740
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
190
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
210
Developer Advocate / Community Managerなるには?
tsho
0
140
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
440
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
620
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
320
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
220
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
We Have a Design System, Now What?
morganepeng
53
7.8k
Fireside Chat
paigeccino
40
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
A Tale of Four Properties
chriscoyier
161
23k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Adaptive Systems
keathley
43
2.8k
Practical Orchestrator
shlominoach
190
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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
[email protected]
javascriptplayground.com