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
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
100
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
220
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
CoRL 2025 Survey
harukiabe
0
130
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
160
Wasmのエコシステムを使った ツール作成方法
askua
0
120
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Visualization
eitanlees
149
16k
The Language of Interfaces
destraynor
162
25k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Context Engineering - Making Every Token Count
addyosmani
5
230
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
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