Use of curly braces in React

Question

I am trying to learn React. I am having trouble with the use of curly braces. Use of curly brace makes difference between JSX and JS In the code below, Curly Brace 1 says "now it is JS". Why is there curly brace 2 ? It is already inside a curly brace zone ?

var React = require('react');
var ReactDOM = require('react-dom');

var MyCompClass = React.createClass({ // open curly brace 1
  render: function () { // open curly brace 2
    return <h1>Hello</h1>;
  }
});

ReactDOM.render(
    <MyCompClass />, 
    document.getElementById('app')
);

A second quick question :

ReactDOM.render(
        <MyCompClass />, 
        document.getElementById('app')
    );

why do .render() need HTML marks around MyComponentClass ?

Thank you for your help !

burak · Answer 1 · 2017-05-26T07:07:12.387

1

You are calling React.createClass method with object parameter. The first curly braces is the syntax of standard javascript object. In this object there is a property called as 'render'. This render attribute could be a function, so the second curly braces are the scope of javascript function syntax.

Also, the HTML marks in your render method is your React component and this is JSX syntax.

So, the following documentations may be helpful:

Edit: Also, I realized that React props usage may cause confusion for you. In react, the syntax of props usage again with curly braces but this is used to provide dynamic binding for your components. By using this syntax, your component will be able to update your html, if the value of your prop is changed. The following is the example of this case:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

For more detailed information, please examine the related React document for Component and Props usage.

edited May 26 '17 at 07:07

answered May 25 '17 at 13:10

burak

3,839
1
15
20

Thank you for your 2 answers. The first curly brace is due to the syntax of createClass and the 2nd curly brace is also a syntax issue due to the use of a function ? Is that correct ? – droledenom May 25 '17 at 13:43
@droledenom yes true. First one is object parameter. Javascript objects are defined using curly braces such as {name: 'John', surname: 'Patrick'} . Moreover, inside of this object properties can be written as {name:'John', surname: 'Patrick', fullName: function(){ return this.name + this.surname} } . As you see the second one is for the definition of function. – burak May 25 '17 at 18:45
@droledenom I also advice you to cover javascript functions document on this page: https://www.w3schools.com/js/js_functions.asp . Beside of this, if this answer works for you, please mark as accepted answer :) thanks – burak May 26 '17 at 06:54

score 0 · Answer 2 · answered May 25 '17 at 13:11

Curly brace 2 contain the render() function's body.

Curly brace 1... actually also contains function's body, where the function is React.createClass(). This function takes as an argument an object, created with curly braces 1, containing functions and variables (in this case this object contains only render() method).

The truth is, that in this example the only JSX elements are<h1>Hello</h1>; and <MyCompClass />. They use JSX syntax, while with pure JS the createElement() and appendChild() DOM functions would be required.

Use of curly braces in React

2 Answers2

Linked