Как сформулировать вопрос, чтобы найти инфу об основах разработки приложений на js?

Question

[sergemin]

Изучаю react. И вроде бы все нормально, но у меня нет глобального понимания происходящего.
Я привык верстать под wordpress, modx и т.п. Там в шаблонах данные выводятся сниппетами php. Все предельно ясно, нужно только стили дописать, чтобы красиво было

В приложениях же все строится на js. Мне не понятно, как подгружаются данные с сервера. То есть они изначально как-то вытягиваются и записываются в стейт компонентов или как вообще все это происходит?

Comments

[Петр Мухуров]

не вижу проблемы в компоненте в методе componentDidMount() ходить на сервер за данными и обновлять state
а еще лучше юзать сторы: react mobx/redux/flux

[sergemin]

pterodaktil, single page application

[Петр Мухуров]

sergemin ну на этапе инициализации приложения сходить на сервер, воткнуть все данные в стор (mobx/redux/flux) и на основе этого стора рисовать контент через stateless components

[sergemin]

pterodaktil, а когда я меняю данные в стейте, не важно, использую redux или просто react. Как данные отправляются на сервер?
Допустим, удалил я элемент из списка и т.п.

[Петр Мухуров]

для этого, например, в mobx, есть такая штука как autorun(), которая вызывается всякий раз, когда изменились @observable поля в сторе. Описать autorun(), где мы будем ловить изменения, проверять, валидировать или что нам еще нужно и делать post-запрос на сервер

[Петр Мухуров]

react+mobx

[sergemin]

pterodaktil, спасибо за помощь!

Answer 1

[Warden]

Да, данные подгружаются отдельно с помощью xmlhttprequest. После загрузки данные прокидываются в state.
https://learn.javascript.ru/ - хороший старт по JS здесь.

Comments

[sergemin]

Читаю эту книгу, как христиане Библию. Просто не было понимания того, как изначально все рендерятся данные. Теперь понял, что при инициализации все данные загружаются с сервера и лежат в стейте.
Мне бы еще с rest api разобраться

[Warden]

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      users: [],
    };
  }

  componentDidMount() {
    fetch('https://myhost.com/users/get/')
      .then(response => response.json())
      .then(data => this.setState({ users: data.users }));
  }
  
  ...

}

Вот пример, который можно брать за основу.

1) componentDidMount вызовется автоматически, кода компонент уже будет создан и с ним можно что-то делать.
2) внутри метода componentDidMount происходит запрос к 'https://myhost.com/users/get/', который вернет данные в json формате.
3) Конструкция .then(response => response.json()) получает на вход ответ (response), перегоняет его в JS-объект и кидает на вход следующему then.
4) .then(data => this.setState({ users: data.users })) берет из JS-объекта поле users и помещает его в state.
5) вызов this.setState обновляет state, затем вызывает render и компонент перерисовывается с полученными данными.

Итого - внутри componentDidMount пишем код, который получит данные с сервера и поместит их в state. Дальше react все сделает сам.

[sergemin]

Спасибо за хороший пример!

Answer 2

[Владимир]

https://www.books.ru/books/javascript-podrobnoe-ru...
Второй этап
https://github.com/getify/You-Dont-Know-JS

Comments

[sergemin]

Владимир, спасибо, все по полочкам разложили! Я и не думал, что все так просто