Начать с React и Bootstrap за 2 дня. День №1

Кажется, вы забыли закрывающий тэг

</b>

или так надо?)

А без bootstrap-a никак все это не выровнять и размер шрифта не установить?

Вот этим меня бутстрап и не устраивает — то, что для него нужен jquery, что при наличии реактивного фреймворка как бы немного глупо. В этом плане больше bulma нравится.

Можно попробовать использовать React bootstrap . При беглом просмотре я не нашел в зависимостях пакета JQuery.

Перенёс комментарий выше habr.com/post/431826/#comment_19446472

> this.stopTimer = this.stopTimer.bind(this);
> this.resetTimer = this.resetTimer.bind(this);

Чтобы таким не заниматься, можно определять методы как стрелочные функции

class MyComponent extends PureComponent {
  state = {
    stopped: false,
  };

  stopTimer = () => this.setState({ stopped: true });

  render() {
    return (
      <button onClick={this.stopTimer}>Астанавитесь!</button>
    );
  }
}

> для этого добавим установку document.title в метод render():

Какой ужас :)

Здесь лучше подойдёт componentDidUpdate, потому что рендер может вызываться бесчисленное количество раз в зависимости от различных условий и всё, что он должен делать — возвращать новый VDom, за счёт чего «лишний» рендер будет менее дорогим.

Нашел у вас в коде вот такую строчку:

this.setState({value: this.state.value + 1})

Здесь вы неявно предполагаете, что между вызовами setState состояние успеет обновиться.
Так делать опасно: если на странице будет происходить что-нибудь "тяжелое", то ваш таймер начнет пропускать секунды. Казалось бы, это маловероятно, целая секунда же в периоде… Вот только тот сайт, где вы это читаете, умудряется тормозить на страницах с кучей комментариев даже без скриптов, на чистом css.

Рекомендуемый документацией React вариант выглядит вот так:

this.setState(state => ({ value: state.value+1 }));

ИМХО, в 2к18 bootstrap не нужен. Тем более с reactJS. Пишем на реакте и тащим jQuery как зависимость(bootstrap), а смысл в этом какой? Хотите красоту? Ну возьмите современный UI-kit, вроде того же blueprintJS

Не стоит учить «плохому»

Ваше желание поделиться новыми для Вас знаниями можно понять, но почему хабр? Не достаточно ли было показать это своим друзьям или выложить на каком-нибудь форуме? Мало того, что статья на уровне «объясню как понял» (с примером из документации), так еще и код в ней, как говорится, с душком — учить такому совершенно не стоит торопиться:

Для начала нам нужен менеджер пакетов. Я выбрал npm, а он есть в Node.js

На самом деле для запуска Вам нужен Node.js, а без менеджера пакетов даже можно обойтись. Но судя по статье — нода, это просто что-то, где есть npm.

this – текущий класс

this не текущий класс, а контекст. В Вашем случае — экземпляр класса.

Далее стандартная обработка конструктора родительского класса super(props)

Конструктор не обрабатывается, а вызывается.

Ну и по коду.

const INTERVAL = 100;

На самом деле это не интервал, интервал в Вашем случае — 1000/INTERVAL (в описании Вы и сами пишете, что это частота).

this.stopTimer = this.stopTimer.bind(this);

В комментариях уже упоминались стрелочные функции и proposal class properties.

this.setState({value: this.state.value + 1})

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

stopTimer(){
	this.setState({stopped: !this.state.stopped});
		if(this.state.stopped){
			clearInterval(this.timerID);
		}
		else
		{
			this.timerID = setInterval(() => this.increment(), 1000/INTERVAL);
		};
	}
}

Судя по названию метод должен останавливать таймер, но он его и запускает. Не должен ли он тогда называться toggleTimer()?

this.timerID = setInterval(() => this.increment(), 1000/INTERVAL);

и

clearInterval(this.timerID);

Повторяющийся код в данном случае можно вынести в отдельную функцию.

if (this.state.stopped) document.title = "Таймер";

Вы выносите в отдельную переменную value, но не stopped. Подобные обращения на несколько уровней вложенности тяжело читать. Сделать код читабельнее и короче Вам поможет деструктуризация.

Math.floor(value/INTERVAL/60/60)+":"+Math.floor(value/INTERVAL/60) % 60+":"+Math.floor(value/INTERVAL) % 60;

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

{value % INTERVAL < 10 ? '0' : ''}{value % INTERVAL}

Для добавления ведущих нулей обычно используется padStart(), преимущества которого особенно заметны в тех случаях, когда ведущих нулей больше одного. Интересно, что ведущие нули есть только у децисекунд. Если Вам было лень дублировать ту же логику для секунд/минут/и т.д. могли бы выделить ее в отдельную функцию.

Также надо исправить метод increment(), чтобы он останавливался, когда stopped = true:

Разве не для этого был остановлен таймер?

<div class="container-fluid align-items-center">

Оф. документация любезно просит использовать className вместо class, о чем React сигнализирует в консоли разработчика своими warning'ами.

 

Совместно с flexbox'ом выглядит очень прогрессивно =)

Даже после исправления всех этих упрощений и ошибок (в т.ч. орфографических) статья все еще не сможет называться «Изучаем реакт», скорее «Изучаем еще один способ сделать таймер с применением реакта». Пожалуйста, не торопитесь делиться тем, в чем еще сами не до конца разобрались, тем более на ресурсе такого уровня. Подобных статей на хабре итак много, что превращает его в помойку из выброшенных велосипедов.

Для тех же, кому действительно хотелось бы изучить реакт за один день, могу посоветовать данный материал, в котором все по порядку объясняется на доступном языке и наглядном примере (есть продолжения про redux и router). И да, дня вполне хватит, чтобы его прочитать и попрактиковаться. повторив все действия автора.