> For the complete documentation index, see [llms.txt](https://dotnetweb30-ke.gitbook.io/ke/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dotnetweb30-ke.gitbook.io/ke/construction-web/javascript-frameworks/react-basics.md).

# React basics

### JSX

`JSX` - это синтаксическое расширение для JavaScript (функции **CreateElement**)

```
<MyButton color="blue" shadowSize={2} action={this.action}>
  Click Me
</MyButton>
```

```
React.createElement(
  MyButton,
  { color: 'blue', shadowSize: 2 },
  'Click Me'
)
```

* `Babel` компилирует `JSX` в вызовы `React.createElement()`
* Теги начинаются с заглавной буквы (чтобы отличить React-компоненты от html тегов)
* т.к. неявно вызывается функция `React.createElement`, в файле должен быть `import React from 'react'`
* атрибуты: class === `className`, for === `htmlFor`
* встраивание пользовательского ввода в JSX является безопасным (не допускает XSS-атак) - потому что все преобразуется в строку, а не выполняется

### Presentation vs Container components

* `Container`
  * делают API запросы
  * подключены к Store,
  * часто созданы через `class`
  * используют lifecycle hooks
* `Presentation`
  * получают данные через `props` и отрисовывают
  * редко могут иметь свой локальный state, но это состояние UI, а не бизнес-данных (например, выбран ли checkbox)
  * часто созданны через `function`

### Lifecycle

![](/files/-LkQ1dYtUWCLh00c0khX)

* Mounting
  * `constructor(props)` - (не обязательный,, если не нужно инициализировать там state)
  * static `getDerrivedStateFromProps(props, state)` (возвращает объект, который и будет this.state)
  * render()
  * `componentDidMount()` (хорошее место для API-запросов, подписок на события)
* Updating
  * static `getDerrivedStateFromProps(props, state)`
  * `shouldComponentUpdate()` (если вернет false, render и все нижние хуки не вызовутся)
  * render()
  * `getSnapshotBeforeUpdate()` - перед коммитом изменений в реальный DOM, возвращенное из метода значение станет 3-м аргументом
  * `componentDidUpdate(prevProps, prevState, snapshot)`
* Unmounting
  * `componentWillUnmount()` - (отписаться от событий, удалить таймеры, ...)
* Error Handling
  * static `getDerivedStateFromError(error)` - возвращает значение для изменения state (тут не должно быть side-effects)
  * `componentDidCatch(error, info)` - можно использовать для side-effects, например залогировать ошибку в логгер

### State vs Props

* Props

  * передаются в компонент из-вне
  * так ще компонент может иметь дефолтные props

  ```
  static defaultProps = {
    theme: "secondary",
    label: "Button Text"
  };
  ```

  * props нельзя изменить (однонаправленный поток данных, сверху-вниз)
* State
  * хранит внутреннее состояние компонента
  * для того, чтобы хранить информацию между рендерами
  * при изменении состояния происходит render
  * setState() асинхронный, иммутабельный, можно внутрь передавать функцию или объект (если не зависим от прошлого состояния)

### Refs

> Refs provide a way to access DOM nodes or React elements created in the render method.

```
class Component extends React.Component {
  constructor() {
    this.inputRef = React.createRef();
  }

  handleSubmit = () => {
    this.inputWrapper.current.focus();
  }

  render() {
    return (
      <div onClick={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
      </div>
    )
  }
}
```

**#forwarding Refs**

> Ref forwarding is a technique for automatically passing a ref through a component to one of its children

### Events

* React events are named using camelCase, rather than lowercase.
* with JSX you pass a function as the event handler, rather than a string.
* React uses a synthetic event. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility

```
function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
```

**#SyntheticEvent**

> SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers.

### Forms

* uncontrolled input - will use `ref` to get the form values.

```
submitFormHandler = event => {
  event.preventDefault();
  console.dir(this.refs.name.value); //will give us the name value
}

render() {
  return (
      <div>

        <form onSubmit={this.submitFormHandler}>
          <div>
            <input type="text" name="name" ref="name" />
          </div>
        </form>

      </div>
  );
}
```

* controlled input (+ validation, notifications)

```
import React, { Component } from 'react';

class FormComponent extends Component {
  constructor () {
    this.state = {
      email: ''
    }
  }
  
  changeHandler = event => {
    this.setState({
      email: event.target.value
    });
  }

  render () {
    return (
      <form>
          <input type="email" 
                 name="email"   
                 value={this.state.email} 
                 onChange={this.changeHandler} 
          />
      </form>
    );        
  }
}

export default FormComponent;
```

### Data fetching

> React itself doesn’t have any allegiance to any particular way of fetching data.

* axios (promises)
* fetch (browser api)

```
componentDidMount() {
    axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
      .then(res => {
        const posts = res.data.data.children.map(obj => obj.data);
        this.setState({ posts });
      });
  }
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dotnetweb30-ke.gitbook.io/ke/construction-web/javascript-frameworks/react-basics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.