React:

Zero to Hero

Erica Mitchell

 @duggiemitchell

ericadaniellemitchell

@duggie_mitchell

Why React?

Composition

Declarative

Unidirectional Dataflow

Explicit Mutations

Just JavaScript

Composition

Composition

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

More Readable code

Less Bugs

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

LETS CODE! 

React: Zero to Hero

By erica mitchell

Made with Slides.com

React: Zero to Hero

Girl Develop it workshop slides.

  • 850

More from erica mitchell