JSX

render() {
    return React.createElement( 'p', { className: 'hey' }, 'Heyyyooo' )
}

- first param - type of element you want to create
- second param - options
- third param - content

render() {
    return React.createElement( 'p', { className: 'hey' }, 
        React.createElement( 'p', { className: 'hey' }, 'Heyyyooo' )
    )
}

- the problem with this is you can end up with nested createElements()

render() {
    return <form action ="" className="store-selector"></form>
}

or this

render() {
    return ( 
    <form action ="" className="store-selector">
        <h2>Please enter a store</h2>
    </form> 
    )
}

render() {
    return ( 
    <p>text</p>
    <form action ="" className="store-selector">
        <h2>Please enter a store</h2>
    </form> 
    )
}

cannot return sibling elemnts

render() {
    return ( 
        <React.Fragment>
            <p>text</p>
            <form action ="" className="store-selector">
                <h2>Please enter a store</h2>
            </form> 
        </React.Fragment>    
    )
}

or

import React, { Fragment, Component } from 'react';
 
class StorePicker extends Component {
    render() {
        return (
            <Fragment>
                <p>text</p>
                <form action ="" className="store-selector">
                    <h2>Please enter a store</h2>
                </form> 
            </Fragment>  
        )
    }
}

- you can also import the fragment method and do it like this

import React, { Fragment, Component } from 'react';
 
class StorePicker extends Component {
    render() {
        return (
            <Fragment>
                <p>text</p>
                { /* comment or some other JS */ }
                { /* you cannot use double-slash // */ }
                { /* it need to be a comment block like this */ }
                <form action ="" className="store-selector">
                    <h2>Please enter a store</h2>
                </form> 
            </Fragment>  
        )
    }
}

import React, { Fragment, Component } from 'react';
 
class StorePicker extends Component {
    render() {
        return (
             { /* comment or some other JS */ }
            <Fragment>
                <p>text</p>
                <form action ="" className="store-selector">
                    <h2>Please enter a store</h2>
                </form> 
            </Fragment>  
        )
    }
}

- if you see error: Syntax error: Unexpected token, expected , (X:XX) it is due to having a comment like the above, which will break your component