All about React

A LOT OF TIMES I FEEL LIKE TOSSING REACT IN THE GARBAGE AND JUST ROLLING MY OWN INTERFACE WITH ELIXIR AND PHOENIX. Every one who is out there on the internet is like OMGORDDD REACT IS SO FUCKING EASY LIKE A DOG COULD DO IT. SIT YOU BITCH, just like that.

via GIPHY

Fuck that, fuck you for saying it’s easy. It’s just as hard as anything else. AND WHAT MAKES IT MORE DIFFICULT IS ES5, ES6 and ES7. SO DEBUGGING A PROBLEM AIN’T SO EASY BECAUSE WHAT YOU’RE OFFERED AS A SOLUTION MAY NOT BE SO RIGHT. THEN YOU ALSO HAVE TO SET UP WEBPACK, not impossible, BUT NOT EASY. OH LORD JUST LET ME GO ON MY BLOG, GET ON MY HIGH HORSE AND SAY EVERYHING IS SO EASY.

So anyways. Now that we know it isn’t always so easy. Here’s where I list my FUCKED UP SHIT ABOUT REACT.

One of the most annoying things about react is…

Passing props from the parents to the children. It’s fine at the begunning. Then as time goes on, the application grows, state goes higher in the component tree, components that need props are deeply nested. THEN IT’S A PAIN IN THE ASS. IT’S VERY EASY TO BE A PAIN IN THE ASS.

Supposedly redux helps solve this with connect.

AJAX REQUEST LOSES this

Even if you properly bind this and pass it properly into your function, it may get lost when you do an AJAX request.

/* from within the render function */
<input className="form__input" placeholder="Address, City or Zip" value={this.state.address} onBlur={this.handleOnBlur.bind(this)}/>

handleOnBlur(e) {
  /* this fires when leaving the input area
     Purpose: it takes the address and geocodes the address into lat lng
     Why? Yelp API only works properly with lat and lng coordinates
  */
  let that = this;
  $.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=chicago&key=mykey",
    success: function(data) {
      that.setState({
        lng: data.results[0].geometry.location.lng
      })
    },
    error: function(data) {
    }
  })
}

You gotta save this in a variable, so you can reference it. Here’s the answer. http://stackoverflow.com/questions/27175184/setstate-in-get

Here’s all the shit that I found that was not what I needed…

http://www.ian-thomas.net/autobinding-react-and-es6-classes/ https://github.com/airbnb/react-native-maps/issues/269 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=babel%20brunch%20handle%20es7

EXPORT YOUR FUCKING COMPONENT

PLEASE EXPORT YOUR COMPONENT TO FIX.

https://codereviewvideos.com/blog/warning-react-createelement/

export default class GMap extends React.Component {

}

React Class

componentWillUnmount is to clean up after yourself. For instance trying to set state on a component that isn’t mounted any more is bad practice

export default class Timer extends React.Component { constructor() { super(); this.state = { seconds: 0 } } componentDidMount() { console.log(“Component Mounted”); setInterval(() => { this.setState({ seconds: this.state.seconds + 1 }) }, 1000) }

componentWillUnmount() { clearInterval(this.interval); } render() { return (

I have been running for { this.state.seconds } seconds.

); } }

reduce…

Reduce to a single value!

React Class

Post Content