JSX is JavaScript syntax extension.

1. JSX is a pre-processor step that adds XML syntax to JavaScript.

2. It isn't necessary to use JSX in React development, but it is recommended.

3. It makes React more elegant.

4. JSX tags have a tag name, attributes, and children which is similar to XML.

5. If an attribute value is enclosed in quotes, the value would be a string.

6. If the value wrapped in braces, the value would be an enclosed JavaScript expression.

    

JSX Syntax Needs Some Attention

1. Nested Element

    These need to wrap it in one container element to return multiple elements.   

var NestedComponent = React.createClass({
    render: function () {
        return (
            <div>
                <h1>Hello,</h1>
               <h1>Hi,</h1>
               <h2>how r u</h2>
            </div>
            );
    }
});
ReactDOM.render(<NestedComponent />, document.getElementById('divNestedContent'))

2. JavaScript Expressions

    JavaScript expressions can be used inside of JSX. You just need to wrap it with curly brackets {}.
    We cannot use if-else in jsx instead of ternary or conditional expression.

var JSExpression = React.createClass({
    render: function () {
        var i = 2;
        return (
            <div>
                <p>1+1</p>
                <p>{1 + 1}</p>
                <p>{i == 1 ? 'True' : 'False'}</p>
            </div>
            );
    }
});
ReactDOM.render(<JSExpression />, document.getElementById('divJSExpression'))

    
3. Styling
    React recommends using inline styles for this camelCase syntax is used. The other way of doing styling is to set "className" with style.

4. Comments
    Comments are need to put in curly brackets {}.
   
5. Naming Convention
    React components starts with Uppercase. For  defining class and for, you should use "className" and "htmlFor"

var Hello = React.createClass({
    render: function () {
        var MyStyle = {
            fontSize: 40,
            color: 'blue',
        }
        return (
            <div>
              <h1 className='header'>ReactJS </h1>
              <h1 style={MyStyle}>ReactJS </h1>
                
        {/*Multi line comment...*/}
              
        </div>
        );
    }
});
ReactDOM.render(<Hello />, document.getElementById('divMyStyle'))*/

Hope, it will help you.