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

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 });
      });
  }

PreviousNPM basics:NextSQL

Last updated 5 years ago