Smuzzzzzi

<%= t('nav.hello') %>
или же проще
<%= t(:hello) %>

Перечитайте внимательно, что вы там у себя понаписали - если значение больше нуля, то пустая строка, иначе 'positive'. Вам вроде бы наоборот надо. То же самое и со вторым условием.

А вообще, можно и без условий:

['negative', '', 'positive'][Math.sign(article.total_comments.length) + 1]

Вы хотите вызвать сабмит на загрузке фотографии? Вы можете передать любой хэндлер в коллбэк функции setState.

onChangePicture = e =>
    this.setState(
        { data: { ...this.state.data, [e.target.name]: e.target.files[0] } },
        this.onSubmit
    );

onSubmit = e => {
    if (e) e.preventDefault();
    const errors = this.validate(this.state.data);
    this.setState({ errors });
    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props.submit(this.state.data);
    }
  };

Хранить в стейте компонента флаг и на основе этого флага применять стили. К примеру:

import React from 'react';
import classnames from 'classnames';

class SomeComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      show: false,
    };
  }

  onClick() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    return <div onClick={this.onClick} className={classnames('some-class', { 'change-class': show })} />;
  }
}

export default SomeComponent;

1. Выбрать эмулятор
2. CTRL + M (CMD + M on MacOS)
3. Enable Live Reload
4. После чего, каждое сохранение вашего кода будет обновлять приложение в эмуляторе.

В React-Native-web нужно настраивать webpack или взять готовое решение, где горячая перезагрузка уже настроена.
Например в Next или Reframe

Что делаю не так?

Пытаетесь изнасиловать труп - компонент не обновлялся уже три года. Либо найдите что-нибудь посвежее, либо перепишите его самостоятельно (там работы минут на пять, не больше).

Попробуйте навесить инициализацию на событие после монтирования данных в DOM

...
componentDidMount() {
  const { editorArea } = this.refs;
  const editor = new SirTrevor.Editor({
      el: editorArea,
      defaultType: 'Text',
      iconUrl: 'build/sir-trevor-icons.svg'
  });
}
  
render() {
  return (
      <div>
        <textarea className="js-st-instance" ref="editorArea"></textarea>
      </div>
    )
}
...

Как правильно использовать this.props.children?

import React from 'react';
import ReactDOM from 'react-dom';

const SomeComponent = ({ name }) => (
  <span>{name}</span>
);

const SomeContainer = ({ children }) => (
  <div>{children}</div>
);

const Example = () => (
  <SomeContainer>
    <SomeComponent name="John" />
  </SomeContainer>
);

ReactDOM.render(
  <Example />,
  document.getElementById('root');
);

Результат:

<div id="root">
  <div>
    <span>John</span>
  </div>
</div>