Screencast ES2015 and the Virtual DOM in a React Application JavaScript

  • Sergio Cruz
  • 4044 views

Comments

  1. Jinal Jhaveri said

    Just to clarify:

    The spread operator (...) on ES2015 only works with arrays, the spread attributes like: is more a JSX feature right?

    PD: There is a proposal to implement spread properties (currently on stage 2)

  2. Faculty

    Sergio Cruz said

    Hi Jinal, yes you're right: the spread operator for objects are more of a JSX thing. It is also supported by Babel but definitely not in the JavaScript language spec yet, so not widely available in case we wanted to use it in other places outside of JSX. But yeah, just to clarify we were drawing a comparison from the array spread operator available in ES2015.

  3. Grzegorz Brzezinka said

    Awesome guidelines for the React freshmans like me, thanks Sergio and Carlos! Just a small bug report on the links in Resources list: the link to Add a Router to a React Application is not working (contains adding in path instead of add.

  4. mech said

    hey, when you using the arrow for delete, you passed in the commentID as parameter, but when you do it at the top of the constructor, where do you pass in the commentID?

  5. Christopher DEBOVE said

    Hello, really loves the way you do things, so much informations. That's really cool. Mech, when they're using the arrow function for delete directly as parameter and passing the commentID, it's because when using the arrow function they're creating a wrapper around the function _onDelete which is called with the commentID parameter, then they need to pass it to the _onDelete function. When pre-binding it on the constructor there's no need to pass the parameter because this is the function that will be called when the event is triggered, they just automatically applying a bind on it so the render method does not have to do it each time.

    I hope i made myself clear (English's not my native language)

  6. Bruno Genaro said

    Another cool way to take off the ".bind(this)" is using the "autobind decorator" (https://github.com/andreypopp/autobind-decorator)

    Just add it as your npm dependency, import it and use before the class. Like this:

    import autobind from 'autobind-decorator';

    @autobind class AddFishForm extends React.Component {...

  7. Innku said

    Looks good @Bruno

  8. Robert Smith said

    @Jinal The spread operator also works on objects.

  9. Robert Smith said

    Also a great addition here would be adding unit tests using ReactTestUtils, or maybe even Enzyme?

  10. Robert Smith said

    Another post, but I thought I'd point out - if you just ditch the ES6 classes and roll with createClass it will autobind this to the component so you loose all the boilerplate. And if the component is stateless just use a function instead.

  11. Viktor said

    Hi Sergio and Carlos, thank you for the great tutorial! I am wondering whether it's better to use stateless functional components rather then classes to build the app? It is also solving the problem with this keyword.

  12. Gonzalo Andres Vergara said

    I just love when they do this kind of usefulls videos. Thanks.

About This Screencast

In the second episode of our React series, we’ll look at why the virtual DOM makes React applications faster and refactor our code to pass values to props using JavaScript's spread operator. Watch us build, and practice alongside us by downloading the source code below.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now