JSX Syntax

Curly braces { } versus parenthesis ( ) in ReactJS

How braces { } are used?

1. Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.

Let’s take an example. Evaluating a JavaScript variable

const yellowStyle={color: 'yellow'} 
<Star style={yellowStyle} />

which is same as

<Star style={{color: 'yellow'}} />

2. This is not be confused with Class methods in ES6 which also uses curly braces { }

How parenthesis ( ) are used?

1. Parenthesis are used in an arrow function to return an object.

() => ({ name: 'Amanda' })  // Shorthand to return an object

That is equivalent to

() => {
   return { name : 'Amanda' }
}

2. Parenthesis are used to group multiline of codes on JavaScript return statement so to prevent semicolon inserted automatically in the wrong place.

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  render() {
    return (<div> 
            *
            </div>) // <--JavaScript engine inserts semicolon here
  }
}