CSS
JavaScript
HTML
ReactJS
Comments 42
0
Там веселее было — в тексте упоминал разные теги, такие как <div> <App> <kbd> — они в итоге не показались, но съели закрывающий </b> — в итоге пришлось выискивать такие места и заменять < и > на соответствующие escape-последовательности)

Теперь исправил, вроде теперь всё корректно отображается :)
-1
Начать с React и Bootstrap за 2 дня
Вот за это большое спасибо — почитаем!
0

На этой неделе планирую 2ю часть опубликовать, где будет больше про Bootstrap, которого в 1й части лишт слегка коснулся.

+3
А без bootstrap-a никак все это не выровнять и размер шрифта не установить?
-4
Да всё можно и без Bootstrap. Просто с Bootstrap это удобнее и красивее:)
+1
Кому удобней? Пользователю, которому придется скачивать дополнительный код, размером больший, чем все остальное, и грузить свой браузер парсингом полутора тысяч ненужных ему css правил?
+1

Программисту для удобства разработки. Пользователю для удобства работы. Пользователи в отличие от программистов устроены так, что им важно, чтобы было красиво и приятно глазу и они не задумываются о производительности. Например, я часио наблюдаю, как у людей пользователей одновременно запущено более 10 приложений и открыто более 100 сайтов. Хотя в целях производительности надо было сократить их в идеале до 1, или хотя бы до 3-4.


Не отрицаю, что приведённый код можно (а для высоконагруженных приложений) нужно оптимизировать — про оптимизацию есть куча статей. Да то же кэширование может помочь. Статья не про это. А про то, как быстро узнать, что это за технология такая React, и можно ли сделать красиво с помощью Bootstrap?

-1
У пользователя ваш bootstrap и вытягиваемый им jquery отъедят лишние несколько мегабайт/десятков мегабайт с окна браузера и загрузят процессор. От всех пользователей говорю вам за это большое спасибо. За то, что вместо десятка простых css правил вы подключаете огромный css/js фреймворк, просто потому, что вам так удобно. Сразу же уча таких же как вы начинающих веб-девелоперов не мелочиться.
+1

Предлагаю решать проблемы по мере их поступления. У меня была задача за пару дней изучить React и сделать на его базе красивое Web-прмложение. В постановке задачи

0

В постановке задачи не было про производительность.


Если потребуется оптимизировать производительность — это уже отдельная задача. Возможно в этой задаче откажемся от Bootstrap, а может даже и от React. Может вообще о кажемся от сайта и будем делать нативное мобильное приложение с кусками кода на ассемблере)))

0
Внёс уточнение в начало статьи, чтобы не вводить людей в заблуждение.
0
вообще да, если открыть документацию бутстрапа это можно увидеть
+1

Зачем вам js-часть бутстрапа? Она же будет конфликтовать с React! При желании, конечно же, их можно подружить — но это требует куда более вдувчивого подхода к программированию чем тут продемонстрирован.

0
А можно подробнее? Где именно будет конфликтовать? Я лишь описываю свой первый опыт изучения React с Bootstrap и описать его максимально простыми словами, без глубокого погружения в ООП, производительность и т.д. И что понимаете под более вдумчивым подходом к программированию? Если что, в следующей статье планирую разобрать код на отдельные файлы-компоненты, добавить unit-тесты.
+1

Ну вот, например, решили вы сделать через бутстрап Collapse. И пишете:


<>
  <a className="btn btn-primary" data-toggle="collapse" href="#collapseExample" >Show/Hide</a>
  <div className="collapse" id="collapseExample">
     {this.props.text}
  </div>
</>

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

0

Спасибо за уточнение. Как лучше переписать такой код?

+1

Если анимации необязательны — то вот так:


<>
  <a className="btn btn-primary" onClick={this.toggle}>Show/Hide</a>
  <div className={this.state.show ? 'collapse show' : 'collapse'}>
     {this.props.text}
  </div>
</>

Если анимации нужны — то нужно либо искать готовое решение именно для React, либо начать с чего-то похожего на вот этот код (и быть готовым фиксить его баги):


class Collapse extends React.PureComponent {
    render() {
        return <div>{this.props.children}</div>
    }

    componentDidMount() {
        const $this = $(ReactDOM.findDOMNode(this));
        $this.css({ collapse: true, show: this.props.visible });
    }

    componentDidUpdate(prevProps) {
        const $this = $(ReactDOM.findDOMNode(this));
        if (this.props.visible && !prevProps.visible)
            $this.collapse('show');
        else if (!this.props.visible && prevProps.visible)
            $this.collapse('hide');
    }

    componentWillUnmount() {
        const $this = $(ReactDOM.findDOMNode(this));
        $this.collapse('dispose');
    }
}

// ...

<>
  <a className="btn btn-primary" onClick={this.toggle}>Show/Hide</a>
  <Collapse visible={this.state.visible}>
     {this.props.text}
  </Collapse>
</>

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


Кстати, именно из-за сложности последнего решения я и говорю, что js-часть бутстрапа начинающим лучше совместно с React не использовать: нужно понимать что этот код вообще делает, и быть готовым написать аналогичную обертку для любого бутстрап-компонента.

0

Благодарю. Как буду за компьютером попробую и обновлю статью.

0
Пересмотрел я код в статье, но так и не нашёл, использования Collapse и id. На будущее приму к сведению. Кстати, JS-часть Bootstrap отключил (обновил статью)
0
Ну разумеется вы его там не нашли! :-) Претензия-то была к js-части бутстрапа, которую вы подключили, но не использовали. Проблема была в самом факте подключения.
0

js-часть Bootstrap уже отключил, что и отметил в статье:)

+3
Вот этим меня бутстрап и не устраивает — то, что для него нужен jquery, что при наличии реактивного фреймворка как бы немного глупо. В этом плане больше bulma нравится.
0
Про bulma не слышал, посмотрю. Сейчас самый распиаренный именно Bootstrap, и в вакансиях именно он указывается — поэтому его и взял.

А по поводу jQuery пока в официальной документации обнаружил, что jQuery нужен только для JS-части Bootstrap. Сейчас думаю, как выпилить JS из Bootstrap и оставить только CSS от Bootstrap.
+1
Посмотрел React bootstrap — он основан на Bootstrap 3 и всё ещё находится в статусе беты (судя по номеру релиза). Мне хотелось изучить именно Bootstrap 4, где сетка реализована на FloatBox, а в следующей статье я как раз планирую активно использовать эту сетку. А так да, React bootstrap — интересный вариант для оптимизации.
0
Только сейчас заметил, что написал FloatBox. Конечно-же имел ввиду FlexBox.
+2
> 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, за счёт чего «лишний» рендер будет менее дорогим.
0
Благодарю, попробую заменить стрелочной функцией и перенести определение заголовка в componentDidUpdate. Если всё успешно получится — внесу коррективы в этот пост.
0
Но тут важно помнить, что стрелочные функции не дружат с наследованием.
0
Честно говоря, не могу придумать ни одного кейса, когда в Реакте необходимо наследование, кроме наследования от Component/PureComponent.
0
Тем не менее, в Реакте допустимо наследование — а значит, кто-то будет им пользоваться.
0
Цитата из learn-reactjs.ru/basics/composition-vs-inheritance:
«В Facebook React используется в тысячах компонентов, но не было обнаружено каких-либо ситуаций, где разработчики рекомендовали бы создавать иерархии наследования компонентов.»
0
Композиция хорошо работает с готовыми компонентами. А для полуфабрикатов с кучей точек расширения альтернатива только хоки (HOC), но от тех все уже так устали, что придумали хуки.
0
1.Добавил в статью вариант с использованием стрелочной функции для обработки событий
2.Перенёс установку заголовка в componentDidUpdate()
+1

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


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

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


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


this.setState(state => ({ value: state.value+1 }));
0
ИМХО, в 2к18 bootstrap не нужен. Тем более с reactJS. Пишем на реакте и тащим jQuery как зависимость(bootstrap), а смысл в этом какой? Хотите красоту? Ну возьмите современный UI-kit, вроде того же blueprintJS

Не стоит учить «плохому»
Only those users with full accounts are able to leave comments., please.