Учебник по созданию простого приложения Pomodoro с помощью React

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

Шаг 1: Настройка среды разработки

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

В этом руководстве мы будем использовать Visual Studio Code в качестве редактора кода и библиотеку JavaScript React для создания нашего приложения. Убедитесь, что они у вас установлены, прежде чем приступать к работе.

Шаг 2: Настройка проекта

Создайте новую папку проекта и откройте ее в редакторе кода. В терминале перейдите в эту папку и выполните следующую команду:

npx create-react-app pomodoro-app

Это создаст новый проект React в папке проекта.

Шаг 3: Добавьте функциональность Pomodoro

В папке /src вашего проекта создайте новый файл под названием Pomodoro.js. В этом файле мы определим логику для нашего приложения Pomodoro.

import React, { useState, useEffect } from 'react';
function Pomodoro() {
 const [timeLeft, setTimeLeft] = useState(1500);
 const [timerRunning, setTimerRunning] = useState(false);
 
 useEffect(() => {
 let countdownInterval;
 if (timerRunning && timeLeft > 0) {
 countdownInterval = setInterval(() => {
 setTimeLeft(timeLeft - 1);
 }, 1000);
 }
 return () => clearInterval(countdownInterval);
 }, [timerRunning, timeLeft]);
 
 const startTimer = () => {
 setTimerRunning(true);
 };
 
 const stopTimer = () => {
 setTimerRunning(false);
 };
 
 return (
 <div>
 <h1>Pomodoro Timer</h1>
 <div>Time Left: {timeLeft} seconds</div>
 {timerRunning ? (
 <button onClick = {stopTimer}>Stop Timer</button>
 ) : (
 <button onClick = {startTimer}>Start Timer</button>
 )}
 </div>
 );
}

export default Pomodoro;

Этот код определяет компонент Pomodoro, который использует React hooks для управления состоянием таймера. По умолчанию таймер установлен на 25 минут (1500 секунд) и начинает отсчет, когда пользователь нажимает кнопку "Start Timer". Кнопка "Stop Timer" останавливает таймер и устанавливает состояние timerRunning в false.

Шаг 4: Добавление стиля

Далее, давайте добавим несколько основных стилей к нашему компоненту Pomodoro. Создайте новый файл в папке src под названием Pomodoro.css и добавьте следующий код:

.timer-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 height: 100vh;
}
.timer {
 font-size: 5rem;
 margin-bottom: 2rem;
}

Этот код определяет контейнер и класс таймера, которые мы будем использовать для стилизации нашего компонента Pomodoro.

Шаг 5: Рендеринг компонента

Наш компонент Pomodoro в нашем приложении. Откройте файл src/index.js и замените код по умолчанию на следующий:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Pomodoro from './Pomodoro';
import './Pomodoro.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
 <Pomodoro />
 </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.info))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Этот код импортирует компонент Pomodoro и связанные с ним стили и отображает его внутри корневого элемента вашего приложения.

Шаг 6: Протестируйте приложение

Чтобы протестировать приложение, выполните следующую команду в терминале:Наконец, нам нужно отобразить

npm start

Это запустит сервер разработки и откроет ваше приложение в веб-браузере. Нажмите кнопку "Start Timer", чтобы запустить таймер Pomodoro. Таймер начнет отсчитывать 25 минут, после чего станет доступна кнопка "Stop Timer". Нажмите кнопку "Stop Timer", чтобы остановить таймер и сбросить его на 25 минут.

Шаг 7: Развертывание приложения

Для развертывания приложения можно воспользоваться услугами хостинга, например Netlify или GitHub Pages. Ниже описаны шаги по развертыванию вашего приложения на Netlify:

1. Создайте учетную запись на Netlify и войдите в систему.
2. Нажмите кнопку "Новый сайт из Git" на приборной панели.
3. Выберите провайдера Git и репозиторий, в котором находится ваш проект.
4. Настройте параметры сборки и каталог публикации. Для проекта create-react-app директория публикации - "build".
5. Нажмите кнопку "Развернуть сайт" и дождитесь окончания развертывания.
6. После завершения развертывания нажмите кнопку "Настройки сайта" и настройте имя домена и другие параметры по желанию.

Поздравляем, вы создали и развернули собственное приложение Pomodoro с помощью JavaScript! С помощью этого приложения вы сможете оставаться сосредоточенным и продуктивным в течение дня и с легкостью достигать поставленных целей.

Первоначально опубликовано на https://getupnote.com.

Нравится ли вам то, что вы читаете? Если да, пожалуйста, похлопайте мне 👏. Это много значит для меня. И не забывайте следить за мной, чтобы быть в курсе других советов, хитростей и новостей от меня 👍.