Snippets

Artur Eshenbrener Замечания по testwork

Created by Artur Eshenbrener last modified

Ну поехали.

Общее

Переходи на использование typescript (в идеале), можно сначала попробовать javascript нового поколения. Назвается es2015. Для того чтобы заставить его работать в браузере надо подключить webpack, babel и кучу сопутствующих технологий. Также есть пакет react-bootstrap, который предоставляет набор готовых компонент для использования реакта. Есть ещё тулкит material-ui.com

По коду

.app.js.swp коммитить не надо было. Удали его из репозитория.

index.html: в нём должно быть только подключение скриптов и <div id="root />. Остальное всё должно создаваться реактом.

app.js

App.componentWillMount: используй whatwg-fetch, доступен в хроме по дефолту, апи сильно проще.

Table.getInitialState: здесь ты по сути копируешь props в локальный state. Для реакта это в принципе антипаттерн, состояние приложения должно быть в единственном экземпляре, то есть храниться в App. Чтобы его менять компонент Table должен принимать коллбеки, которые будет вызывать. Например addItem, deleteItem, editItem.

deleteItem, editItem и прочие. В данном случае ты мутируешь состояние компонента. Это можно делать, но не желательно, желательно вместо изменения массива создавать на его основе новый. Функции splice, push изменяют объект. Перед измененим массива бери его копию функцией slice().

ItemForm. Тут всё хуже :( Тебе не надо присваивать в инпуты значения руками. Реакт может это делать за тебя, всё что тебе надо сделать, это вынести значения инпутов в состояние компонента и изменять состояние. Вот как то так:

var Form = React.createClass({
  getInitialState: function() {
    return {
      name: "",
      lastName: ""
    }
  },

  onNameChange: function(event) {
    this.setState({name: event.target.value});
  },

  onLastNameChange: function(event) {
    this.setState({lastName: event.target.value});
  }

  saveItem: function() {
    this.onSave({
      name: this.state.name,
      lastName: this.state.lastName
    })
  }

  render: function() {
    return <div>
      <input value={this.state.name} onChange={this.onNameChange} />
      <input value={this.state.lastName} onChange={this.onLastNameChange} />
      <button onClick={this.saveItem}>Submit</button>
    </div>
  }
})

Ну вот как то так.

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.