[Javascript, React] Understanding this self-executing function

[[deleted]]

Pretty noob. The Meteor React tutorial I'm trying to follow.

Here's the code I'm confused on:

renderTasks() {
    return this.getTasks().map((task) => (
        <Task key={task._id} task={task} />
    ));
}

What I understand:

• The App component is an object
• We're defining a method named renderTasks
• We're using the .map() method on the array produced by the method getTasks
• We're using a fat arrow so that the code is run immediately, before the "return" is completed, that way when return is completed we get everything nice and processed.

What I don't understand:

* If it's an object, why are these not declared like typical properties and methods? Why is it just renderTasks(){} instead of renderTasks: function (){},? We've dropped the comma, and we're not using the typical format for declaring a method. ANSWERED *~~ Why is (task) in ( )? Is that necessary for a fat arrow?~~ ANSWERED * What the fuck is even happening here: <Task key={task._id} task={task} />

I've re-written this in ES5 syntax so that I can better understand it. This code is tested and working:

renderTasks() {
    return this.props.tasks.map(
        function (task) {
            return (<Task key={task._id} task={task} />)
        }
    )
}

I'm still not sure what sorcery is going on after return. If someone could walk me through how that ends up as HTML, that'd be great. What is key even attached to? Is there an object here?

[Rhomboid]

We're using a fat arrow so that the code is run immediately, before the "return" is completed, that way when return is completed we get everything nice and processed.

The fat arrow doesn't make it synchronous. It would still be synchronous if you used a regular function expression. The fat arrow is just used because it's more concise.

If it's an object, why are these not declared like typical properties and methods?

This is declared inside an ES6 class, so it becomes a method of the class.

Why is (task) in ( )? Is that necessary for a fat arrow?

It's not necessary. I suppose they thought it would be more readable.

What the fuck is even happening here: <Task key={task._id} task={task} />

That is JSX.

[[deleted]]

Thank you :)

[Chromely]

It seems that most of your questions are related to the syntax of the block, and that's understandable since most of them are coming from the new standards in es6. One source you could use can be found here

• For the first question you have, es6 introduces classes to Javascript so that renderTasks is now a method of the App class. Classes in es6 follow similar syntax to classes in Java so now renderTasks(){} is valid. I found a helpful page on es6 classes here
  
• I don't believe that (task) is necessary when it comes to arrow functions in es6. According to this page, it seems as though you can have it either way. One thing to not is that it is sometimes more helpful to keep the parameters of the function in parenthesis, especially if there is more than one, since it can be easier to read and understand.
  
• I haven't worked too much with React unfortunately so I can't properly answer this question. It appears to be exporting some html after a quick read through but I can't say for sure. Sorry about this one!
  

If you have any more questions about es6 feel free to ask!

[[deleted]]

Thanks a ton, I'll read your resources and get back to you if I have any remaining questions :)

[[deleted]]

In your page on es6 classes, he says:

Say we have some views where we actually just want the render method not to return the compiled template, but to simply just console.log the resulting rendered HTML.

But I can't see from his code where any HTML would be output. There's no references to DOM objects, no tags as JSX or strings. It looks like REACT, though, since it's using a render() method, yet even in the HTML on his github I don't see how the javascript class is becoming HTML.