React:

Zero to Hero

Erica Mitchell

@duggiemitchell

ericadaniellemitchell

@duggie_mitchell

Why React?

Composition

Declarative

Unidirectional Dataflow

Explicit Mutations

Just JavaScript

Composition

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" />

Declarative

/* 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

Is React Declarative?

... 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
)}

Unilateral Data Flow

Explicit Mutations

this.setState({
    highlight: !this.state.highlight
)}

Just JavaScript

<ul>
    {friends.map(function(name) {
        return (
            <li>
                {name}
            </li>
        )
    })}
</ul>

React Ecosystem

React

React Router

Webpack

Babel

REACT ROUTER

WEBPACK

BABEL

"babel": {
    "presets": [
        "env", 
        "react"
    ]
}

FETCH

LETS CODE!

React Life Cycle Events

Called when the component is initialized and added to the DOM (mounting), and when the component is removed from the DOM (unmounting).

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 () {
    ...
  }
}

Called when the component receives new data from it's parent component.

class FriendsList extends React.Component {
  componentWillReceiveProps () {
    ...
  }
  
}


class FriendsList extends React.Component {
  shouldComponentUpdate () {
    ...
  }
  render () {
    ...
  }
}