Препроцессор JSX

Конструкция:

const elem = <h2>Hello, World!</h2>
ReactDOM.render(elem, document.getElementById('root'));

идентичная следующей:

const elem = React.createElement('h2', null, 'Hello, World!!!');
ReactDOM.render(elem, document.getElementById('root'));

Данное преобразование осуществляется при помощи Babel

Если элемент имеет многострочную структуру, его необходимо обернуть в круглые скобки

Также все теги в одном элементе обязетельно нужно во что-то обернуть (например div)

const elem = (
    <div>
        <h2>Hello, World!</h2>
        <input type="text" placeholder="Type here" />
        <button/>
    </div>
)

Но чтобы не создавать лишние блоки, можно воспользоваться конструкуией:

<React.Fragment>
    ...
</React.Fragment>

либо

<>
    ...
</>

Создание компонентов

Компоненты – это функции. Их название обязательно должно быть с большой буквы

const Header = () => {
    return <h2>Hello, World!</h2>
}
const Field = () => {
    return <input type="text" placeholder="Type here" />
}
const Button = () => {
    return <button />
}

Вызываются компоненты при помощи конструкцтт <имяКомпонента>

const App = () => {
    return (
        <div>
            <Header />
            <Field />
            <Button />
        </div>
    )
}

Использование переменных в компонентах

Чтобы использовать переменную в компоненте её необходемо вызвать следующим образом {имяПеременной}

const Button = () => {
    const text = "Log in";
    const logged = false;
    return <button>{logged ? "Enter" : text}</button>
}

Но мы не можем внутри React элементов помещать объекты