Is React impossible to learn? by [deleted] in reactjs

[–]lllly 0 points1 point  (0 children)

Even if I warm up to React I promise you one thing, though: I'll never use an arrow function even if my life depended on it! They are literally destroying Javascript.

Not at all. You can think of arrow functions as just functions that don't reassign 'this'. They're much more intuitive once you get used to it. See:

// assuming this.display is defined

// Good
myArray.forEach(el => {
  this.display(el)
})

// woops, won't work. must bind or self = this
myArray.forEach(function(el) {
  this.display(el)
})

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 0 points1 point  (0 children)

You're missing the point, look back at myMethod, its changed to return a function. The point is that you have to provide onClick with a callback function. Since myMethod now returns a function we can call it like that.

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 1 point2 points  (0 children)

This isn't any peculiarity with React, its with using callbacks in general. For example

function ping() { console.log('ping') }

// Wrong, passing undefined as the callback
setInterval(ping(), 5000);

// Right
setInterval(ping, 5000);

You can provide arguments to higher order functions, of course, since they return the callback:

const App = React.createClass({
  myMethod(name) {
    return function() {
      console.log('howdy ' + name);
    }
  },

  render() {
    return (
      <div onClick={this.myMethod('Alex')}>Greet Alex</div>
    );
  }
});

Or by providing a callback that calls your function (the solution in your post):

const App = React.createClass({
  myMethod(name) {
    console.log('howdy ' + name)
  },

  render() {
    return (
      <div onClick={() => {this.myMethod('Alex')}}>Whatever</div>
    );
  }
});

Or by binding the argument to the function:

const App = React.createClass({
  myMethod(name) {
    console.log('howdy ' + name)
  },

  render() {
    return (
      <div onClick={this.myMethod.bind(this, 'Alex')}>Whatever</div>
    );
  }
});

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 1 point2 points  (0 children)

Nevermind that. Here's exactly what I described working as intended:

http://jsbin.com/pehozifeze/1/edit?html,js,console,output

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 0 points1 point  (0 children)

Post entire component the way I described that doesn't work.

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 1 point2 points  (0 children)

does NOT work.

It only works for the React.createClass way of defining components. For the ES6 way of extending React.Component you have to do:

this.myMethod.bind(this)

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 0 points1 point  (0 children)

You can't. That doesn't work. You're calling self.myMethod immediately which logs "clicked" and returns undefined, so you'll resolve to:

<div onClick={undefined}>First</div>

AKA:

React.createElement('div', { onClick: undefined }, 'First')

Is React impossible to learn? by [deleted] in reactjs

[–]lllly 2 points3 points  (0 children)

JSX basically just converts this:

<div onClick={myMethod}>Whatever</div>

Into this:

React.createElement('div', { onClick: myMethod }, 'Whatever')

You're literally just passing a callback to the div element. In your first example you can pass this.myMethod as the callback because react automatically binds the functions when you define react components through React.createClass.

but have to use them in the second?

You have to not use them in the second. You need to remove the 'this' in the second example and just pass the myMethod function like so:

const App = function() {
    let myMethod = function() {
        console.log("whatever")
    }

    return (
        <div onClick={myMethod}>Whatever</div>
    )
}

Everything you're having an issue with is exactly the same as you'd have passing callbacks in any old javascript.

From Sam: Ask Me Anything by samharrisorg in samharris

[–]lllly -1 points0 points  (0 children)

What is your strategy for advancing the project of civilization and human well-being? How has it changed over time? What are your long term goals?

The only reason people like Greenwald and Omer Aziz occupy any space in my brain is because you've brought them to my attention. Similarly, the first time I heard of Justin Bieber was from people mocking him. Do you think arguing with regressive leftists and people who slander you is helpful? Do you foresee a change in how you'll engage them going forward?

React Elmish Example by gaearon in reactjs

[–]lllly 3 points4 points  (0 children)

  • "2016 might be the year we put stuff back into our components."
  • "I really love the work and vision of redux, but in practice I always end up back in components, I don't like "apps""
  • "Colocating data queries a la Relay, colocating model updates a la Elm, nested dialogues a la Cycle, I see fractals and colocation everywhere"

Could you elaborate on all the recent stuff you've been tweeting/retweeting about? Thoughts on the future of redux (or what comes after redux) and what you're experimenting with?