Why ReactJS
Front End Engineer
Twitter @tomrutka
Tom Rutka
Introduction
- Currently at Credit Karma
- Javascript, CSS, NodeJS, PHP
- 10 years working on the web
- Consulting work and Startup life
- Department of State, DOD
- USPS HQ
To React
or
Not To React
Interfaces for large applications
Benefits
Interfaces for large applications
Changing data overtime with state
Benefits
Interfaces for large applications
Changing data overtime with state
Composition of components with logic
Benefits
Interfaces for large applications
Changing data overtime with state
Composition of components with logic
One-way data flow
Benefits
Interfaces for large applications
Changing data overtime with state
Composition of components with logic
One-way data flow
Declarative Programming
Benefits
ReactJS Concepts
&
Details
Syntax
Made of Components
Create:
var MyThing = React.createClass({
render: function() {
return (<div>{this.props.mydata}</div>)
}
})
Usage:
<MyThing mydata={value} />
Syntax
Made of Components
<MyThing mydata={value} />
Values in expressions cannot be html
but can have html entities
Syntax
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} />
Syntax
Outputs
var value = '<div>React and Node</div>'; // NO
var value = 'React '&'amp Node'; // YES
<MyThing mydata={value} />
Renders:
<div>React & Node</div>
Careful!
dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: '<div>React & amp; Node'</div>}} />
Composition
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')
);
ES5 or ES6
Declarative or Imperative
ES5 or ES6
Imperative tells how to do something
for (var i = 0; i < 100; i++;) {
// loop over collection
}
ES5 or ES6
Declarative tells what to be done
var newCollection = collection.map( function(x) {
return x+x;
})
ES5 or ES6
Auto-binding 'this' context
To specify the value for this
ES5 or ES6
ES6 Arrow Function
// ES5
foo.map( function(x) {
return x+x;
});
// ES6
foo.map( (x) => {x*x} ); // has auto-binding
ES5 or ES6
/* JS Bind method */
this.setState({ loading: true });
fetch('/').then(function loaded() {
this.setState({ loading: false });
}.bind(this));
ES5 or ES6
/* React Component Method Binding */
React.createClass({
componentWillMount: function() {
this.setState({ loading: true });
fetch('/').then(this.loaded);
},
loaded: function loaded() {
this.setState({ loading: false });
}
});
JSX Transpiling
Transpiling !== Compiling
Pre-processing
Transpiling is source-to-source compiling
JSX Transpiling
Parsed by Acorn
https://github.com/ternjs/acorn
Abstract Syntax Tree (AST)
https://github.com/facebook/jsx
Syntax Tree
JSX Transpiling
Performance
http://esprima.org/test/compare.html
Immutability
Preferred coding and optimization
Immutability
/* Anti-pattern */
var myObj = {};
myObj.someProp = 9;
myObj.otherProp.push(2)
/ * Better */
var myObj = { someProp: 9 }
var newObj = extend(myObj, { otherProp: 2}
Immutability
Browser API has Object.freeze()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
Immutability
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]}}
});
ReactJS Pre-requisites
Javascript (ES5)
Javascript (ES6) - BabelJS
Declarative (Functional Programming)
Immutability Concepts
Structure
Component
PropTypes
Prop
State
Common Usage
Structure
Component
PropTypes - type checking
Prop - for data flow
State - for UI changes
Common Usage
Structure
Component
PropTypes - type checking
Prop - for data flow
State - for UI changes
Common Usage
Lifecycle
getInitialState()
getDefaultProps()
componentWillMount()
componentDidMount()
render()
Structure
Component
PropTypes - type checking
Prop - for data flow
State - for UI changes
Common Usage
Lifecycle
getInitialState()
getDefaultProps()
componentWillMount() - before render
componentDidMount() - after render
render() - required
Happy Learning!
Tom Rutka
Front End Engineer
Twitter @tomrutka
Why ReactJS
By Tom
Why ReactJS
- 658