Антон Спирин

Математика в JavaScript

Вообще забудьте о таких способах вычисления состояния:

itemsAmount = itemsAmount - itemCoast; // из общей суммы корзины вычитаем стоимость товара

Храните модель состояния и пересчитывайте сумму по ней при каждом ее изменении. Округляйте числа только после вычислений.

Вообще использование в render конструкций типа:
{this.state.data[0].title}
очень плохой стиль. По возможности избегайте его.
Чтобы компонент рендерился поле загрузки данных:

render() {
  const { data } = this.state;
  const isAllDataReady = data && data.length > 0;

  return (
    <div>
       {!isAllDataReady && <Preloader />}
       {isAllDataReady && (
         <div>
           <h4>App component</h4>
           {data[0].title}
         </div>
       )}
    </div>
  );
}

Проблема в том, что в методах прототипа Date идет проверка на то, что передан экземпляр даты. Причем проверка идет не по цепочке прототипов.
Старый исходный код V8:

function DateGetTime() {
  CHECK_DATE(this);
  return UTC_DATE_VALUE(this);
}

Кто-то писал, что CHECK_DATE имеет следующую реализацию:

CHECK_DATE(arg) = (%_ClassOf(arg) === 'Date' ? %_ValueOf(arg) : ThrowDateTypeError());

Тем не менее, сейчас все это переписано на C++.

Если посмотреть спецификацию, то видно, что методы прототипа вызывают нативные функции, выполняющие все расчеты и тут важно, чтобы им предавали валидный объект даты. Поэтому, видимо, и идет строгая проверка.

Вариант решения этой проблемы, изменить цепочку прототипов экземпляра:

function SpaceDate(...args) {
  var date;
  date = new Date(...args);
  date.__proto__ = SpaceDate.prototype;
  return date;
}

SpaceDate.prototype.__proto__ = Date.prototype;

SpaceDate.prototype.test = function() {
  return this;
};

Возвращаться будет объект Date, а цепочка прототипов будет с вашими методами. На прототип оригинального объекта Date это никак не повлияет.

Если экспортируете кнопку c помощью export default:
import DefaultButton from '../../Buttons/Default';
Обратите внимание, что переход на директорию выше обозначается двумя точками, а не тремя.

Так все input с одинаковым name будут принимать значение измененного:

$(document).on('focusout', 'input', function(){
  var name = $(this).attr('name');
  var value = $(this).val();

  $('input[name=' + name + ']').val(value);
});

Демо.

var diff = Math.min(Math.abs(x - y), 360 - Math.abs(x - y));

Можно переписать в виде функции:

var getDiff = (x, y) => Math.min(Math.abs(x - y), 360 - Math.abs(x - y));

Демо.

Как минимум у вас при попытке вызова render выпадает ошибка:
Cannot convert undefined or null to object
Так как вы не передаете total в store.
Зачем вам вообще оборачивать компонент в connect при тестировании?
Попробуйте изменить файл компонента так:

import React from 'react';
import { connect } from 'react-redux';

export class Balance extends React.Component {
  // some code
}

const mapStateToProps = ({ total }) => ({ total });

export default connect(mapStateToProps)(Balance);

То, что вы назвали компонент BalanceCont, семантически неверно. Так как контейнер это HOС поверх вашего компонента, вызовом connect вы оборачиваете компонент в контейнер.

Теперь вы можете импортировать компонент для тестов, как:
import { Balance } from './Balance';
А контейнер в приложение как:
import Balance from './Balance';

Измененный тест:

import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import { Balance } from '../app/containers/balance/src/balance';

describe('<Balance />', () => {
  it('Balance test', function () {
    
    const mockTotal = { /* mock code */ };
    
    const wrapper = shallow(<Balance total={mockTotal} />);
    expect(wrapper.contains(<h3>Мои балансы</h3>)).to.equal(true);
  });
});

Простой пример

Эта библиотека.
Вообще если вбить в поиск traiding charts js, можно найти много готовых решений.

В первую очередь в директории проекта выполняете:
npm install
этой командой вы установите все зависимости проекта. Они перечислены в package.json в свойствах dependencies и devDependencies.
Затем выполните:
npm run build:example
или:
npm run build:browser
эти скрипты вы можете найти в package.json в свойстве scripts

imagesLoaded(document.body, { background: true }, () =>
  document.body.classList.remove('loading'));

const piecesObj = new Pieces(document.querySelector('.slideshow > .pieces'), {
  pieces: {rows: 22, columns: 20},
  delay: [0,60],
  hasTilt: true,
  tilt: {
    maxRotationX: -1, 
    maxRotationY: -1, 
    maxTranslationX: -5, 
    maxTranslationY: -2
  }
});

let isAnimating = false;

const openImage = () => {
  isAnimating = true;

  piecesObj.animate({
    duration: 400,
    easing: 'easeOutQuad',
    autoplay: true,
    delay: (t,i,l) => {
      return parseInt(t.dataset.row) * parseInt(t.dataset.delay);
    },
    translateX: (t,i) => {
      return anime.random(-500,500)+'px';
    },
    translateY: (t,i) => { 
      return anime.random(-800,-200)+'px';
    },
    rotateZ: (t,i) => { 
      return anime.random(-45,45)+'deg';
    },
    opacity: 0,
    complete: () => {
      piecesObj.setImage(imgsrc);

      piecesObj.animate({
        duration: 500,
        easing: [0.3,1,0.3,1],
        delay: (t,i,l) => {
          return parseInt(t.dataset.row) * parseInt(t.dataset.delay);
        },
        translateX: 0,
        translateY: () => {
          return [anime.random(200,800)+'px','0px'];
        },
        rotateZ: 0,
        opacity: {
          value: 1,
          duration: 500,
          easing: 'linear'
        },
        complete: () => {
          isAnimating = false;
        }
      });
    }
  });
};

document.addEventListener('DOMContentLoaded', openImage);

Смею предположить, что ошибка во вложенных объектах в массиве anotherData. Все ключи должны быть в кавычках и не должно быть лишних запятых. Валидатор вам в помощь.

Вы в методе render не передаете метод getData, а вызываете его и передаете результат, который метод даже не возвращает. Исправить можно так:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tweets: []
    };
  }

  getData = () => { 
    axios.post('/', {
      username: this.state.username
    })
    .then(({data: tweets}) => {
      console.log(tweets)
      this.setState({ tweets });
    })
    .catch(console.error);
  };

  render () {
    const { tweets } = this.state;
    console.log(tweets.length);

    if (tweets.length > 0 && tweets[0].user) {
      console.log(tweets.length);
      return (
        <div>
          <header>
            <Form getData={this.getData} />
          </header>
          <main>
            <User user={tweets[0].user} />
            {tweets.map((tweet, i) => <Tweet key={i} tweet={tweet} />)}
          </main>
        </div>
      );
    } else {
      return (
        <Form getData={this.getData} /> 
      );
    }
  }
}

Заметьте что я пределал getData из метода класса в свойство класса. Теперь когда getData стрелочная функция, она не потеряет контекст при передаче в другой компонент. Альтернативным решением проблемы с потерей контекста при передаче метода, будет бинд этого метода в конструкторе:

constructor(props) {
    super(props);
    this.state = {
      tweets: []
    };

    this.getData = this.getData.bind(this);
  }

Что могу сказать, плохо пробовали.
через маргины
через flex
через text-align
через position: relative

И есть еще целая куча способов, как это можно сделать.

В самом простом варианте:

class Capture extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: '',
      },
      tweets: [],
    }

    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onFormSubmit(e) {
    e.preventDefault()

    axios.post('/', {
      username: this.state.form.username
    })
    .then(({data: tweets}) => {
      this.setState({ tweets });
    })
    .catch(console.error);
  }

  handleChange(event) {
    const { form } = this.state;

    form.username = event.target.value;

    this.setState({ form });
  }

  render () {
    const { tweets } = this.state;

    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <p className="leadform-component-container">
            <input
              type="text"
              placeholder="Username"
              required
              onChange={this.handleChange}
            />
          </p>
          <p className="leadform-component-container">
            <input type="submit" value="Press me" />
          </p>
        </form>
        <div>
          {tweets.map((tweet, i) => <Tweet key={i} tweet={tweet} />)}
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Capture />, document.getElementById("app"));

Если у твита есть id или любое другое уникальное поле, то следует передавать его в свойство key вместо индекса массива.

Используйте flex.
Демо.

Изучайте React. Приложения на ванильном JS писать не надо, не повторяйте ошибки разработчиков из 2014 года.

Вы передаете метод clickHandle в колбек слушателя события click, при вызове метод теряет контекст, так как вызывается не на вашем объекте. this в таком случае ссылается не на ваш объект, а на undefined. Так как babel при трансляции добавляет 'use strict' (иначе, при выполнении в браузере, ссылался бы на window). Исправить это можно несколькими способами:
1. переделать обработчик из метода класса в class field arrow function:
было:

clickHandle(e) {
  // some code
}

стало:

clickHandle = e => {
  // some code
};

class field arrow function получает контекстом экземпляр класса при инициализации и всегда ссылается на него, куда бы вы ее не передали. Это экспериментальная возможность JavaScript и в спецификации ее пока нет. За трансляцию этой конструкции в валидный код отвечает babel.
Результат, который будет получен после трансляции, можно посмотреть тут. Строки с 23 по 28.

2.забиндить его в конструкторе на экземпляр класса:

constructor(props) {
  super(props);
  this.clickHandle = this.clickHandle.bind(this);
}

Вызов bind возвращает обертку, которая вызывает ваш метод, испльзуя переданный аргумент как контекст, в нашем случае это экземпляр класса.

3. обернуть в стрелочную функцию в render:

<SomeComponent onClick={() => this.сlickHandle()} /> // контекст не будет потерян

При оборачивании в стрелочную функцию происходит следующее: сама функция использует как контекст ваш объект, поэтому при вызове метод будет вызван на вашем объекте и this в самом методе будет ссылаться на объект. Этот вариант разумно использовать, только тогда, когда в хандлер необходимо передать свои аргументы, помимо event:

<ListItem
  key={item.id}
  onClick={e => this.сlickHandle(item.id, e)}
>
  {item.name}
</ListItem>

так как движок вынужден определять контекст для стрелочной функции каждый рендер, а на это уходит дополнительное процессорное время.

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

var john = {
  firstName: 'John',
  getName() {
    return this.firstName;  // this - контекст вызова и это не всегда наш объект
  }
}

Сценарий 1:
console.log(john.getName()); // john
Тут мы вызываем метод на объекте. Контекстом будет наш объект.

Сценарий 2:

var foo = {
  firstName: 'foo',
};
var foo.getName = john.getName;
console.log(foo.getName()); // foo

Тут мы передаем метод объекта john в свойство объекта foo без вызова и следующей строкой вызываем его на нем. Контекстом в этот раз будет объект foo. Ошибки не будет только потому, что у объекта foo есть свойство fullName

Сценарий 3:

var bar = john.getName;
console.log(bar()); // undefined

В данном случае в стандартном режиме контекстом будет window, а в строгом режиме вылетит исключение:
Cannot read property 'firstName' of undefined
так как this в строгом режиме будет ссылаться на undefined

Когда вы передаете метод в колбек onClick или в любой другой колбек события, вызов идет подобно третьему сценарию. Поэтому вы должны позаботиться о том, чтобы ваш метод не терял контекст, используя один из способов приведенных выше.

Используйте route с параметром:
<Route path="/stories/:slug" component={Stories}/>
где slug это поле записи новости в БД, основанная ее имени. Подробнее о slug.

Вариант без делегирования.