> For the complete documentation index, see [llms.txt](https://lesha.gitbook.io/react-js-for-dummies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lesha.gitbook.io/react-js-for-dummies/master.md).

# 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>
  )
}
```