# Components

Components are the **core building block of React apps**. Actually, React really is just a library for creating components in its core.

A typical React app therefore could be depicted as a **component tree** - having one root component ("App") and then an potentially infinite amount of nested child components.

Each component needs to return/ render some **JSX** code - it defines which HTML code React should render to the real DOM in the end.

**JSX is NOT HTML** but it looks a lot like it. Differences can be seen when looking closely though (for example className in JSX vs class in "normal HTML"). JSX is just syntactic sugar for JavaScript, allowing you to write HTMLish code instead of nested React.createElement(...) calls.

When creating components, you have the choice between two different ways:

1. **Functional Components** (*stateless components*)

const Cmp = () => {
    return <div> Some JSX </div>;
}

2. **Class-based Components** (*stateful components*)

class Cmp extends Component {
    render() {
        return <div> Some JSX </div>
    }
}

It's best practice to use *functional components* as much as possible.