All About React and Redux

React can take many different forms. I’m going to talk about React with npm, webpack, jsx, es6.

// app.js

import React from 'react';
import ReactDom from 'react-dom';
import First Component from './first-component';

ReactDOM.render((
  <FirstComponent />
), document.getElementById('root'));

Call backs in React

Call backs are very confusing in React. All yall want yo parents to control dat state, but dayummmmmm dawg, then I need those confusing ass call backs.

Call backs happen like so.

You got the parent who runs the show. You got the child who’s the paren'ts bitch.

This is all in es6 and jsx. // this is the parent… class TheParent extends React.Component { constructor(props) { super(props) this.state = { damagepercentage: this.props.damagepercentage } }

  handleDamagePercentage(damage_percentage) {
    this.setState({
      damage_percentage: damage_percentage
    })
  }

  render() {
    return (
      <DamagePercentage damage_percentage={this.state.damage_percentage} onChange={this.handleDamagePercentage.bind(this)} />
    )
  }
}

// this is the child...
class DamagePercentage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      damage_percentage: this.props.damage_percentage
    }
  }

  handleChange(e) {
    this.props.onChange(e.target.value)
    this.setState({
      damage_percentage: e.target.value
    })
  }

  render () {
    return (
      <input onChange={this.handleChange.bind(this)} value={this.state.damage_percentage} />
    )
  }
}

The weird thing is basically everything. But the thing I always forget about is the this.props.onChange(e.target.value). That part will call the function that is referenced when you call the child. OH FUCK. I thought I just had a breakthrough in thought,but I didn’t. I decided to work at a coffee shop today and I just saw the weirdest couple. Well it’s not as weird. But this chick is hip and she’s with a guy who definitely dresses like a dad who has kids who just graduated college.

You can always tell people who have been married for like 30 years and then the new found loveers. Just the way they interact is different. Like these peeps were holding hands and hugging and kissing, EWWWWWW. Definitely not married for 30 years. I guess what tripped me up is her outfit, it’s like something a 16 year old would wear. And then the dude is tripped out in sweat pants.

Well I had to snap a pic…

Anyways, I thought that you could switch out the parent and call the child element with a different call back. I suppose that is true.

Redux

in npm, the package is react-redux

Unidirectional Dataflow. Redux is a simpler Flux. Flux can have any number of stores. Redux you only have one store.

When you only have one store, you’re putting all the data into one javascript object. One massive javascript object that is immutable.

{
  currentAlbum: {},
  currentTrack: {},
  playlist: [],
  user {
    email: ...,
    blah: ...,
  }
}

( state ) => ({ repeat: user.preferences })

{ type: ‘PLAY_TRACK’, track: 1234, }

User Actions are handled by simple functions.

( state, action ) => { switch ( action.type ) {

} }

Abstract Examples. I have no idea what a reducer is. And I couldn’t understand the javascript code. I need to see shit work to understand it.

I judge classes by whether I feel smarter or more stupid after taking the class. I definitely feel more stupid.

Also I feel like you were going very fast and I couldnt stop to ask questions.

Wow. It’s amazing. The spread operator. It takes a key_value pair and recreates an object. So lets say you want to update state. use simply pass the …state and what you want to update!!! FUCK SO GOOD.

…state, currentTrack: action.track,

React Big Ideas Everything is a Component ( state ) => ui (ui is a function of state, translated) State is immutable Data Flows Down Events Bubble Up (state, action) => state

React doesn’t need gulp or grunt. Only webpack.

Post Content