ECMA2015/ES6 With React, Redux(1)

ES6 With React, Redux

Destructuring Assignment

1. Destructuring Props(1) — ES6

When destructuring props with react component

Example 1

Before :

const foo = (props) => {
...
return <div>{props.foo}</div>
}

After :

const Foo = ({foo}) => {
...
return <div>{foo}</div> 
}

Example 2

Before :

const profileUpdate = (profileData) => {
  
  const { name, age, nationality, location } = profileData;
  
  // do something with these variables
};

After :

const profileUpdate = ({ name, age, nationality, location }) => {
  
  /* do something with these fields */
};

2. Destructuring Props(2) — ES6

When destructuring props in rendering

Before :

render() {
  return (
     
    <div>{this.props.fooList}</div> 
  )
};

After :

render() {
  const { fooList } = this.props  
  return (
    
    <div>{fooList}</div>
  )
};

Reference :

• https://bytearcher.com/articles/es6-vs-es2015-name/
• https://www.w3schools.com/js/js_es6.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals