Front End Engineer
Twitter @tomrutka
Tom Rutka
Made of Components
Create:
var MyThing = React.createClass({
render: function() {
return (<div>{this.props.mydata}</div>)
}
})
Usage:
<MyThing mydata={value} />
Made of Components
<MyThing mydata={value} />
Values in expressions cannot be html
but can have html entities
No raw html in data, Entities are okay
var value = '<div>React and Node</div>'; // NO
var value = 'React & amp Node'; // YES
<MyThing mydata={value} />
Outputs
var value = '<div>React and Node</div>'; // NO
var value = 'React '&'amp Node'; // YES
<MyThing mydata={value} />
Renders:
<div>React & Node</div>
dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: '<div>React & amp; Node'</div>}} />
Create:
var Item = React.createClass({
render: function() {
return (<a href={this.props.link}>{this.props.linkName}</a>)
};
});
var Menu = React.createClass({
// assign data
render: function() {
return (
<nav>{this.props.mydata}
<Item link={linkValue} linkName={linkName} />
</nav>)
}
})
/* Item.jsx */
var Item = React.createClass({
render: function() {
return (<a href={this.props.link}>{this.props.link}</a>)
};
});
/* Menu.jsx */
require('./Item.jsx');
var Menu = React.createClass({
const {myTitle, link} = mydata; // es6 destructuring
render: function() {
return (
<nav>{myTitle}
<Item link={linkValue} />
</nav>)
}
})
/* Menu.jsx */
require('./Item.jsx');
var Menu = React.createClass({
const {myTitle, link} = mydata; // es6 destructuring
render: function() {
return (
<nav>{myTitle}
<Item link={linkValue} />
</nav>)
}
})
Usage:
ReactDOM.render(
<Menu mydata={myTitle: 'My App', link: 'https..."}/>,
document.getElementBydId('example')
);
Declarative or Imperative
Imperative tells how to do something
for (var i = 0; i < 100; i++;) {
// loop over collection
}
Declarative tells what to be done
var newCollection = collection.map( function(x) {
return x+x;
})
Auto-binding 'this' context
To specify the value for this
ES6 Arrow Function
// ES5
foo.map( function(x) {
return x+x;
});
// ES6
foo.map( (x) => {x*x} ); // has auto-binding
/* JS Bind method */
this.setState({ loading: true });
fetch('/').then(function loaded() {
this.setState({ loading: false });
}.bind(this));
/* React Component Method Binding */
React.createClass({
componentWillMount: function() {
this.setState({ loading: true });
fetch('/').then(this.loaded);
},
loaded: function loaded() {
this.setState({ loading: false });
}
});
Transpiling !== Compiling
Pre-processing
Transpiling is source-to-source compiling
Parsed by Acorn
https://github.com/ternjs/acorn
Abstract Syntax Tree (AST)
https://github.com/facebook/jsx
Performance
http://esprima.org/test/compare.html
Preferred coding and optimization
/* Anti-pattern */
var myObj = {};
myObj.someProp = 9;
myObj.otherProp.push(2)
/ * Better */
var myObj = { someProp: 9 }
var newObj = extend(myObj, { otherProp: 2}
Browser API has Object.freeze()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
Shortcut with react-addons-update or an existing library
var update = require('react-addons-update');
var newData = update(myData, {
x: {y: {z: {$set: 7}}},
a: {b: {$push: [9]}}
});
Javascript (ES5)
Javascript (ES6) - BabelJS
Declarative (Functional Programming)
Immutability Concepts
Component
PropTypes
Prop
State
Component
PropTypes - type checking
Prop - for data flow
State - for UI changes
Component
PropTypes - type checking
Prop - for data flow
State - for UI changes
getInitialState()
getDefaultProps()
componentWillMount()
componentDidMount()
render()
Component
PropTypes - type checking
Prop - for data flow
State - for UI changes
getInitialState()
getDefaultProps()
componentWillMount() - before render
componentDidMount() - after render
render() - required
Tom Rutka
Front End Engineer
Twitter @tomrutka