React.js для чайников

Это руководство по созданию веб-приложений с использованием React.js для тех, кто слышит про все это впервые. Мы с вами напишем несколько приложений: сначала будет несколько простых, в которых мы познакомимся с основами React.js (и JavaScript в целом), после них будет несколько сложных, в которых мы углубим эти знания.

Основы React.js

Основной сущностью в Реакте является компонент. Представь себе ленту постов в своей любимой соцсеточке. Это компонент. В ленте есть посты, каждый пост — это тоже компонент, растиражированный сотню раз. В каждом посте есть кнопка лайка и блок комментариев — это всё тоже компоненты. Каждый комментарий в блоке комментариев — тоже компонент, у которого тоже есть кнопка лайка — тот же компонент, что и у самого поста. Когда ты пишешь приложение, нужно думать о том, на какие составные части ты можешь его разбить, а потом собрать из них свое приложение, как лего.

Каждый компонент в Реакте — это функция, принимающая некоторые параметры (props, от "properties" — "свойства") и возвращающая содержимое этого компонента.

function Field(props) {
  return <p>Hello, World!</p>
}

Свойств может и не быть, в таком случае указывать props при объявлении функции не требуется.

То, что ты видишь после ключевого слова return — называется JSX. JSX — это расширение языка JavaScript, которое позволяет нам описывать элементы интерфейсов. JSX выглядит очень похоже на HTML, однако не является им.

Важно! Функция компонента может возвращать ровно один элемент JSX. Если ты хочешь вернуть два или более, то их надо во что-то обернуть.

Нельзя:

function Field(props) {
  return (
    <p>Привет!</p>
    <p>Как дела?</p>
  )
}

Можно:

function Field(props) {
  return (
    <div>
      <p>Привет!</p>
      <p>Как дела?</p>
    </div>
  )
}