1. 8
    Redux: React Counter Example
    2m 18s

Redux: React Counter Example

InstructorDan Abramov

Share this video with your friends

Send Tweet

Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.

Steve Schwarz
~ 9 years ago

I can't find any description/explanation of this variant of arrow func syntax: ({ value, onIncrement, onDecrement }) =>

What does putting braces around the arguments signify?

Joel Hooks
~ 9 years ago

That will "destructure" the argument. Instead of receiving the full object this function will be passed its properties of the respective names.

It's a super useful es6 feature. See more here: https://egghead.io/lessons/ecmascript-6-destructuring-assignment

Dana White
~ 9 years ago

Is creating const's the preferred way to declare components as opposed to creating classes that extend React.Component? Or was this shorthand approach written for the purposes of the tutorial?

Dan Abramovinstructor
~ 9 years ago

Let’s first clarify that const is not the point here. It only enforces that this binding is not reassigned later, but we could’ve used let (or ES5 var) just as fine when declaring a functional component. In fact

const Counter = ({ value}) => <div>{value}</div>;

is pretty much the same as

function Counter({ value }) {
  return <div>{value}</div>;
}

Now, when should you use functional components instead of classes? I’d say every time it’s possible. Support for them was added in React 0.14 so most examples in the wild don’t use them yet, but it’s usually a better pattern. Functional components match React’s conceptual model more closely. Use classes when you need this.state or lifecycle hooks like componentDidMount, but in most cases, use functional components for simplicity.

Steven
~ 8 years ago

Hi :) Thanks for this course, it's very helpful ! I have one qestion, not about Redux... but more by curiosity !

Can you explain why in JSBin this kind of synthax can be written : => (

<div> <h1>{value}</h1> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> </div> );

There are no ' or " or ` ... at the first glance i thought "it's a great new feature of ES6 ... no need to put any symbols for templating..." But i tried, and it's crash.. of course...

Thanks for your time !

Jesse
~ 8 years ago

I would like to see an answer for this as well. Steven did you ever get it it working outside of pastebin?

Lars-m
~ 8 years ago

Hi Steven It is perfectly legal ES6 + React. The counter method receives the props and, using ES6 Object Destructuring Assignment, (see video refered by joel) fetches the three properties of interest.

This rewrite of the Counter method might make it a bit clearer?

const Counter = (props) => { 
  let {value,onIncrement, onDecrement} = props;
  return (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
  )
}```
Guillermo Timón
~ 8 years ago

Hi, I am not a React developer, but a quick search I found this. Hope it helps you https://facebook.github.io/react/docs/react-without-jsx.html

Janis
~ 5 years ago

The files don't work for me and display blank. How do I set up the environment to make the files work outside Plunker, please?