erica mitchell
Founder, blackGirlsCode(2), Javascript Enthusiast
@duggiemitchell
ericadaniellemitchell
@duggie_mitchell
Explicit Mutations
var getProfilePic = function (username) {
return `https://photo.fb.com/${username}`
}
var getProfileLink = function (username) {
return `https://photo.facebook/${username}`
}
var getAvatarInfo = function (username) {
return {
pic: getProfilePic(username),
link: getProfileLink(username)
}
}
getAvatarInfo('duggiemitchell')
var ProfilePic = function() {
return (
<img src={`https://photo.fb.com/${this.props.username`}/>
)
}
var ProfileLink = function() {
return (
<a href={`https://facebook.com/${this.props.username`}>
{this.props.username}
</a>
)
}
var Avatar = function() {
return (
<div>
<ProfilePic username={this.props.username}/>
<ProfileLink username={this.props.username} />
</div>
)
}
<Avatar username="duggiemitchell" />
/* Imperative (How) */
var numbers = [4,2,3,6];
var total = 0;
for (var i = 0; i < numbers.length; i++) {
total += numbers[i]
}
/* Declarative (What) */
var numbers = [4,2,3,6];
numbers.reduce(function(previous, current) {
return previous + current
})
Reduce Side Effects
More Readable code
Less Bugs
... for the most part.
$(#button).click(function() {
$(this).toggleClass("highlight")
? $(this).text() === 'Add Highlight'
: $(this).text('Add Highlight')
})
<EricasBtn
onClick={this.handleToggleHighlight}
highlight={this.state.highlight} />
...
this.setState({
highlight: !this.state.highlight
)}
this.setState({
highlight: !this.state.highlight
)}
<ul>
{friends.map(function(name) {
return (
<li>
{name}
</li>
)
})}
</ul>
React
React Router
Webpack
Babel
"babel": {
"presets": [
"env",
"react"
]
}
class FriendsList extends React.Component {
componentDidMount () {
return axios.get(this.props.url).then(this.props.callback)
}
render () {
...
}
}
class FriendsList extends React.Component {
componentWillUnmount () {
ref.off()
}
render () {
...
}
}
class FriendsList extends React.Component {
componentWillReceiveProps () {
...
}
}
class FriendsList extends React.Component {
shouldComponentUpdate () {
...
}
render () {
...
}
}
By erica mitchell
Girl Develop it workshop slides.
Founder, blackGirlsCode(2), Javascript Enthusiast