5 ES6 useful syntax for developing React apps.

Currently working on an React app, which is mainly for editing the articles content and products’ details of my company’s official website. After implement some new syntax from ES6, I just can’t live without it anymore, it’s just so intuitive and can’t even image how we JS developers survive without these new features before.

This article is mainly for someone who develops in Javascript but not really familiar in ES6. They are not necessary in your Javascript development but it’s always good to know something new which can save your time as well. I hope they will help you at some points ; )

Here are some tricks which are so useful when I develop my React Apps:

Template literals

Before actually implement template literals I just feel it’s a weird syntax, but when I need to insert some variables to make AJAX call with different URL, it’s a worthy to learn it.

Say I need to build a simple helper function to get a URL to query different tables and id of items.

// Before ES6:
var getQueryURL = function(table, id){
return '/' + table '/' + id;
}
// With ES6:
const getQueryURL = (table, id) => `/${table}/${id}`

Actually here we use const and arrow function from ES6 as well, I will mention arrow function later.


Object Destructuring

Whenever we have to deal with the props and states in the components, it’s much more elegant to use destructuring assignment to make the codes readable, especially you don’t need to write a lot of this.props.propName or this.state.stateName for just passing all these stuff.

Say I just want to pass some props in the render() to render a Button.

// Before ES6 in a really bad way to write:
render(){
  var name = props.name;
var value = props.value;
var disabled = props.disabled;
  return (    
<button
name={props.name}
value={props.value}
disabled={props.disabled}
/>
)
}

// Before ES6 in a better way:
render(){
  var value = props.value;
var name = props.name;
var disabled = props.disabled;
return (    
<button name={name} value={value} disabled={disabled} />
)
}

// With ES6 there is a much more better way
render(){
  const { value, name, disabled } =  props;   
  return (    
<button name={name} value={value} disabled={disabled} />
)
}

Even more, we deep matching the properties of the objects.

Say we use react-router, and want to get the query string from URL and fetch table from props as well to update the form.

// Before ES6:
updateForm(){
var search= this.props.location.search;
var table = this.props.fetchTable;
...
}

// With ES6:
updateForm(){
const { location:{ search }, fetchTable: table } = this.props;
}

In this example above also we rename fetchTable to table which is another useful trick .


Arrow Functions

This is the first syntax I learned from ES6 which should be world known. It’s quite confusing in the beginning but you will get used to it at some point. It’s makes a big difference without writing function for every function.

Say I want to creating a pure function component of button:

// Before ES6:
function Button(props){
  var name = props.name;
var value = props.value;
var disabled = props.disabled;
  return <button name={name} value={value} disabled={disabled}/>
}

// With ES6:
const Button = (props) => {
const { value, name, disabled } = props;
return <button name={name} value={value} disabled={disabled}/>
}

// Or without object deconstructing, the curly brackets will be replaced by parentheses and the return will be omitted.
const Button = props => (
<button
name={props.name}
value={props.value}
disabled={props.disabled} />
)


Default Parameter Values

I was quite surprised that Javascript doesn’t provide the default parameter syntax before ES6. This feature helps me to avoid typeError when ever the data fetch is asynchronous and has not been fetched completely, which is quite useful.

Say I need to get the titles from all the articles data:

// Before ES6:
function getTitles(articles){
if (articles === undefined){
articles = [];
}
return articles.map(function(article){ return article.title })
}

// With ES6:
const getTitles = (articles = []) => articles.map( a => a.title )

With arrow function we can use one line instead of five lines which is so lovely ❤

Enhanced Object Properties

The last but not least, sometimes I need to construct the data or add properties to objects with customise keys, computed property names will come in handy :)

Say I need to add data to a object list, and the key is based on table’s name in database:

// Before ES6:
function updateData(dataList, table, update){
var newDataList = dataList;
newDataList[table] = update;
...
}

// With ES6:
const updateData = (dataList, table, update) => {
const newDataList = { ...dataList, [table]: update }
...
}

We use spread operator here as well which is also really handy for assigning new properties to a new object or array!


Above are the features I use a lot in React development. I hope you have picked up something haven’t tried before and can’t wait to improve your Javascript application. Some of the syntax might be quite confusing at the beginning but you will find that they are so useful and necessary in Javascript at some point.

If you’re quite familiar with these syntax and want to know more features in ES6, this website ES6-features is what your need.

Thank you for your reading and if there is any suggestions or typo in this article, welcome to leave your comments :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.