Useful Modern JavaScript features when I code with React.js

After learning JavaScript ES6 (Modern JavaScript) almost 2 years. I think to understand how are features work is to see a real use case that I think in React there are a lot of Modern JavaScript feature out there.

Import/Export

Import and Export are the basic concepts of modern JavaScript that you see all the time in React world.

Export

You can use export default One per module, name export can use multiple times.

const MyComponent = () => <h1>Hello</h1>
export getTitle = () => 'My Component'
export isShow = () => false
export default MyComponent

Import

import React from 'react'
import { combineReducers } from 'redux'
import { routerReducer as router } from 'react-router-redux'

Destructuring Objects

These features are talked about by a lot of people, and I see a lot of people stuck on it. I think destructuring is not hard to understand it’s just like destruct a key/value from the object.

const player = {
 name: 'Lionel Messi',
 age: 30,
 club: 'Barcelona'
}

Instead of use dot notation to get value with a key

const name = player.name
const age = player.age
const club = player.club

You can use ES6 Destructuring like this

const { name, age, club } = player

Above is a basic example, you can use destructuring as a function pa

import React from 'react'
// 1. Not good :(
const MyComponent1 = props => (
  <div onClick={() => { props.dispatch() })}>
    <h1>{props.title}</h1>
  </div>
)
// 2. It's OK
const MyComponent2 = props => {
  const { title, dispatch } = props
return (
   <div onClick={() => { dispatch() })}>
     <h1>{title}</h1>
   </div>
  )
}
// 3. Better
const MyComponent3 = ({ title, dispatch }) => (
  <div onClick={() => { dispatch() })}>
    <h1>{title}</h1>
  </div>
)

Arrow Functions

Arrow function or (fat arrow) is a short hand version of function

// Instead of
const mapStateToProps = function(state) {
 return {
   currentUser: state.auth.currentUser,
   isLoading: state.page.isLoading
 }
}
// I usually use this method
const mapStateToProps = state => ({
 currentUser: state.auth.currentUser,
 isLoading: state.page.isLoading
})

Shorthand properties

This is cool and short when you have a name of the object and a key with the same name

// Instead of this
export const combineReducers({
 form: form,
 router: router,
 page: page,
 projects: projects
})
// It's better
export const combineReducers({
 form,
 router,
 page,
 projects
})

Spread Operator are take a value from an element (array literals) or object (object literals), You can concatenate array with Spread or clone an object

A syntax for function calls:

myFunction(...obj)

For array literals or strings:

[...arr]

For an object literals

let myNewObj = { ...obj }

Come back to React, Assume I have a render method that passed a props value to MyComponent component

// We can use this way instead.
return <MyComponent {...props} />

Conclusion

There are a lot of modern JavaScript features that found in React, When I started learning React I always got stuck at some point. I try to understand and figure it out what/how is this work? After I familiar with modern JavaScript I think I can code React with 100% confident even more 100% 😁