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
100
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
170
Components on the Web: Frontend NE
jackfranklin
1
690
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
390
Front Trends: Migrating complex software
jackfranklin
1
690
Migrating from Angular to React: Manc React
jackfranklin
1
130
Half Stack Fest: Webpack
jackfranklin
4
460
FullStackFest: Elm for JS Developers
jackfranklin
1
200
Codelicious: Intro to ES2015
jackfranklin
0
320
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
330
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
620
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
750
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
270
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
170
20240416_devopsdaystokyo
kzkmaeda
1
210
MapLibreとAmazon Location Service
dayjournal
1
140
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
160
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
4
230
アクセス制御にまつわる改善 / Improving access control
itkq
0
500
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Become a Pro
speakerdeck
PRO
10
4.5k
Agile that works and the tools we love
rasmusluckow
324
20k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Optimizing for Happiness
mojombo
370
69k
Music & Morning Musume
bryan
41
5.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
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