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
470
Front Trends: Migrating complex software
jackfranklin
1
810
Migrating from Angular to React: Manc React
jackfranklin
1
180
Half Stack Fest: Webpack
jackfranklin
4
540
FullStackFest: Elm for JS Developers
jackfranklin
1
230
Codelicious: Intro to ES2015
jackfranklin
0
380
PolyConf: Elm for JS Developers
jackfranklin
0
280
Other Decks in Technology
See All in Technology
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
380
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.4k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.5k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
270
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
940
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.9k
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
330
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
We Have a Design System, Now What?
morganepeng
53
7.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Context Engineering - Making Every Token Count
addyosmani
5
180
Why Our Code Smells
bkeepers
PRO
339
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Designing Experiences People Love
moore
142
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Become a Pro
speakerdeck
PRO
29
5.5k
For a Future-Friendly Web
brad_frost
180
9.9k
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