The Rules

Naming

React has built-in convention on how to name your components:

Capitalized — component names with first letter uppercase are treated as a React component (e.g. <Foo />);
Dot Notation — component names with a dot in the name, regardless of the case, are too treated as a React component (e.g. <foo.bar />, <Foo.Bar />, etc.) - But this is a bad idea, since this is also a syntax thing!
Lowercase — component names starting with lowercase letters are treated as DOM elements (e.g. <div>, <span>, etc.).

A component can only return 1 element:

tip

return(
    <div>
        <h1>Hello</h1>
    </div>
)

danger

return(
    <div>
        <h1>Hello</h1>
    </div>
    <h2>Howdy!</h2>
)

tip

import React from 'react' 
...
return(
    <React.Fragment>
        <h1>Hello</h1>
    </React.Fragment>
)

return(
    <>
        <h1>Hello</h1>
    </>
)