Snippets

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

Updated by Artur Eshenbrener
View revision

File testwork-marks Deleted

  • Ignore whitespace
  • Hide word diff 
-# Ну поехали.
-
-## Общее
-
-Переходи на использование 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>
-  }
-})
-```
-
-Ну вот как то так.

File testwork-marks.md Added

  • Ignore whitespace
  • Hide word diff 
+# Ну поехали.
+
+## Общее
+
+Переходи на использование 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>
+  }
+})
+```
+
+Ну вот как то так.
Created by Artur Eshenbrener
View revision

File testwork-marks Added

  • Ignore whitespace
  • Hide word diff 
+# Ну поехали.
+
+## Общее
+
+Переходи на использование 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>
+  }
+})
+```
+
+Ну вот как то так.
HTTPS SSH

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