2.1.1 Building Your First React App

React Component

At the bare minimum, a React component is simply a JavaScript class with a render method that returns a description of the component’s UI:

class Hello extends React.Component {
    render() {
        return (
          <h1>Hello World</h1>
        )
    }
}

JSX

You probably noticed the HTML tags in the middle of the JavaScript code. As mentioned, React has a syntax extension to JavaScript called JSX that lets us write XML (and consequently HTML) inline with code. JSX is optional but it has been widely accepted as the standard way of defining UIs in React components because of its declarative syntax, expressiveness, and the fact that it gets converted to plain JavaScript function calls, means that it doesn’t alter the language semantics.

The important thing to consider now is that React requires a “transformation” step (or transpilation, if you will) where JSX gets transformed into JavaScript.