День 3: JSX продолжается

Изучим JSX и познакомимся с компонентами в React

Выражения JSX после компиляции становятся обычными функциями JS. И вы также можете указать атрибуты с помощью JSX.

Пример 1:

const photo = < img src={user.theUrl} />

мы можем использовать либо фигурные скобки для выражений, либо кавычки для строковых значений.

Дети

вы также можете указать детей в JSX. Однако все ваши дочерние элементы должны находиться под тегом div.

Пример 2:

const ele = (
  <div>
    <h1>Hey there!</h1>
    <p>wake up!!</p>  
  </div>
);

Отрисовка элементов

Как мы обсуждали элементы JSX, компоненты состоят из этих элементов. Элемент подобен отдельному кадру в фильме: он неизменяем и представляет пользовательский интерфейс в определенный момент времени.

Корневой DOM-узел

Все внутри нашего корневого тега управляется React. Корень — это весь компонент нашего приложения, который будет включать в себя другие компоненты.

<div id="root"></div>

Существует 2 типа компонентов: первый — это компонент без состояния ( функциональный ) и компоненты с состоянием (компонент класса с состоянием), и они возвращают JSX.

Пример 3:

Существует два типа компонентов:

Функциональный компонент без сохранения состояния

function Welcome(props) {
    return <p>hey, {props.name}</p> ;
}

Компонент класса с отслеживанием состояния

class Welcome extends React.Component {
    render () {
           return <p>Hey, {this.props.name}</p>;
}
}

На следующем уроке мы создадим первое приложение React и узнаем больше о компонентах.

Фото автора Норайр Григорян на Unsplash