Чему я научился, создав свое первое приложение React

1656592090 chemu ya nauchilsya sozdav svoe pervoe prilozhenie react

от ellereeeee

VlKAsDfxl3FeBX718opYqNH9mvSiADaAYqMW
анимация материала с помощью react-transition-group

Я собираюсь поделиться тем, что я хотел бы знал, хотел бы, что сделал или был рад, что сделал, когда создал свое первое приложение React. Это часы Pomodoro или таймер производительности. Я создал его для проекта freeCodeCamp и для практики React, который я научился когорте Chingu.

Вы можете проверить это в прямом эфире здесь, а код здесь.

Надеюсь, я смогу помочь некоторым новичкам React.

Прочитайте документы React

Если вы начинаете изучать React, начните с официальных документов. Что касается документов, то React просты для понимания и предоставляют много примеров.

Не делайте то, что я сделал, и начните с учебника React. Я начал с egghead.io Руководство для начинающих реагирования (“НачинающийПо-моему, это неправильное название), и это было грубо. Справедливости ради, я слышал, что egghead.io предназначена для более опытных разработчиков, которые хотят усовершенствовать новую структуру.

Я, безусловно, многому научился, но было много приостановки видео, возвращение на 10 секунд назад, чтобы снова и снова услышать объяснение, и просто глядя на код и чувствуя себя растерянным. Потом все наладилось, но я не могу не подумать, что лучше было бы начать с официальных документов, а не просмотреть учебник.

Я уверен, что вы можете найти учебник, более удобный для начинающих. Однако сначала ознакомиться с официальными документами является хорошей практикой, и я думаю, что вам будет лучше, если вы будете изучать React.

Хорошо знайте JavaScript или будьте готовы учиться

Посмотрите на этот краткий фрагмент кода:

class Counter extends React.Component {  constructor(props) {    super(props)    this.state = {count: 0}    this.handleClick = this.handleClick.bind(this)  }

Выше мы имеем объявление класса ES6 (который просто синтаксический сахар для прототипного наследования). Что такое прототипное наследование? Какие есть constructor и super функции? Почему мы жестко связываем handleClick к this? Знаете ли вы что-нибудь о области lex-time в JavaScript?

Теперь ты нет имеют чтобы знать ответы на эти вопросы, чтобы что-то сделать в React. Вы можете просто предположить, что вам нужен тот или иной фрагмент кода, чтобы все работало и оставить все на этом. Однако я думаю, что важно понимать вещи на более глубоком уровне.

Этот шаблон кода представляет собой хлеб и масло React. Вы не хотите знать, что происходит?

Это только пример в React, где вам понадобятся приличные знания JavaScript.

Знайте это хорошо или будьте готовы учиться.

Думайте в React

Создайте свое приложение как каркас или макет и разбейте его на компоненты. Это значительно облегчит процесс кодировки.

К примеру, я начал с этого макета.

gngLwubDKZ5fad4lRVQXmLdQUS48wzvPByqV

Я изменил некоторые вещи в моей окончательной программе, но, глядя на макет, вы можете увидеть:

  1. оранжевое приложение, охватывающее все

2. информационная кнопка в верхнем левом углу

3. кнопка истории выполненных задач в верхнем правом углу

4. сообщение/ввод в верхнем центре

5. радиальный таймер, часы и кнопки вверх и вниз по центру

6. кнопка воспроизведения в нижнем центре

Затем я разделил свой интерфейс на компоненты. Каждый фрагмент должен представлять какую-либо функцию или данные.

zdebvVFnZctVdhdofTvq-iCRy-bt767ovFgd

Благодаря этому я смог организовать свои компоненты в иерархию:

Y-83Lzbd2RRQkovtab-w-8WfVHImCByxG-lp

Достаточно просто. Все вложено в компонент PomodoroTimer. Важное, что это иллюстрирует – это то, где должно быть государство. Состояние должно быть в одном месте в React и «перетекать» к вложенным компонентам. Я решил, что это должно быть в компоненте PomodoroTimer.

я мог бы time состояние в компоненте таймера. Однако я хочу изменить цвет PomodoroTimer на синий, если пользователь делает перерыв. Это значит, что я буду иметь timerType состояние, изменяющее цвет фона, а также начальное время (25 минут для работы и 5 минут для отдыха).

Поток данных более простой, если у меня есть оба timerType состояние и time введите в PomodoroTimer и передайте вниз time в Таймер. timerType изменился бы с "Pomodoro" к "Rest" один раз time достигает 0. Легче понять, как перетекает состояние моей программы, если все это в одном месте. Это также облегчает отладку.

Просмотрите статью «Мышление в React» из официальных документов React для более подробного объяснения по созданию программы React от макета до готовой программы.

Проверьте консоль на наличие ошибок

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

Мне указали на ошибку после того, как я опубликовал свой код на форумах для просмотра:

./src/components/PomodoroTimer.jsx  Line 17:   Do not mutate state directly. Use setState()  react/no-direct-mutation-state  Line 21:   Do not mutate state directly. Use setState()  react/no-direct-mutation-state

Это означает, что я непосредственно изменял состояние, являющееся большим «нет-нет» в React.

Поэтому я изменил свой код из этого:

handleIncrementTime = () => {    this.setState({ state: (this.state.time += 300000) });  };  handleDecrementTime = () => {    if (this.state.time > 300000) {      this.setState({ time: (this.state.time -= 300000) });    }  };

до этого:

handleIncrementTime = () =>    this.setState(prevState => ({ time: (prevState.time + 300000) }));  handleDecrementTime = () => {    if (this.state.time > 300000) {      this.setState(prevState => ({ time: (prevState.time - 300000) }));    }  };

Мне нужно было использовать вторую форму setState обновить состояние. Передать функцию в setState что использует аргумент prevState обновить состояние. Вы можете прочитать о второй форме setState здесь.

TL; DR

  1. Если вы изучаете React, начните с документов React.
  2. Хорошо знайте JavaScript или будьте готовы учиться.
  3. Уделите время планированию программы. Разбейте свой интерфейс на компоненты и подумайте, где будет жить состояние.
  4. Проверьте консоль на наличие ошибок.

Мне было очень весело кодировать свое первое приложение React, и я надеюсь, что вы тоже. Удачи!

Спасибо сайту с кодом пользователя Reddit за то, что помог мне переработать мои операторы назначения обработчиков!

Добавить комментарий

Ваш адрес email не будет опубликован.