Как вы можете спланировать на три дня вперед с помощью React

1656558733 kak vy mozhete splanirovat na tri dnya vpered s pomoshhyu

автор Мохит Джайн

1*MEInIgK_vlkZg3b0v-WPHg

Сегодня мы создадим сайт «to-do»… с некоторыми разными функциями.

Вы можете проверить живую демонстрацию того, что мы будем делать здесь.

Для интерфейса мы будем использовать React.js. React.js – это библиотека на основе компонентов, которая используется для разработки интерактивных пользовательских интерфейсов (UI).

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

Приложение Create-React

Давайте начнем. Сначала вам нужно настроить Node (межплатформенная среда выполнения JavaScript) и реагировать.

Вы можете загрузить и установить Node с веб-сайта node.js. После этого откройте терминал и cd в каталог, где нужно сохранить проект. Далее выполните эти две команды:

npm install -g create-react-app
create-react-app next-3-days-planner

npm install это команда для установки пакетов npm, а также -g флажок помогает установить пакет глобально в нашей системе.

create-react-app создаст новый каталог проекта. Он также занимается всем необходимым React, таким как webpack, babel и JSX, чтобы новичкам не пришлось возиться с настройкой первоначального проекта.

Я называю этот проект next-3-day-planner но вы можете называть это сколь угодно.

Откройте каталог проекта в любимом редакторе кода.

Родительский компонент

Теперь давайте создадим наш родительский компонент. Откройте App.js файл и удалить все. Добавьте этот фрагмент кода:

В первых двух строчках мы импортируем React класс, помогающий нам создавать компоненты. Мы также импортируем ReactDOM помогающий отображать компоненты в DOM (объектная модель документа).

Мы также импортировали Header компонент, который будет использоваться для отображения панели заголовка сайта.

The Textbox компонент будет содержать раздел ввода, куда пользователь введет свой элемент «todo».

Затем мы импортируем еще несколько дочерних компонентов. Это такие DisplayToday, DisplayTomorrow, DisplayDayAfterTomorrow. Эти три компонента помогают нам отображать наш список задач.

Если вы видите ошибку, не беспокойтесь. Мы еще не определили эти компоненты!

Затем определяем нашу App компонент, являющийся нашим родительским компонентом.

Этот компонент имеет состояние, которое будет использоваться для хранения данных. The ‘Today’ ключ будет использоваться для сохранения списка задач, которые должны быть завершены по сей день. То же самое касается ‘Tomorrow’ и ‘Day_After_Tomorrow’ ключи.

updateEntry(), deleteEntry() — две функции, которые используются для добавления элементов в списки и удаления элемента из списков. Теперь мы их определим.

Обновление записей в списке

The updateEntry() функция принимает два параметра.

term это новый пункт задачи, который нам нужно сохранить, и day это «день», в который мы хотим добавить этот пункт задачи.

У нас есть блок if-else, проверяющий значение day и добавляет этот элемент задачу в этот конкретный массив.

Три точки ... раньше this.state.Today помогите нам объединить массив с новыми значениями.

Удаление записей

Давайте закодируем функцию удаления:

The deleteEntry() Функция будет запускаться каждый раз, когда пользователь нажимает кнопку «удалить элемент» на странице

The deleteEntry() функция принимает два параметра.

index является индексом расположения элемента в массиве, который нужно удалить. Вторым параметром является day, это день, с которого мы хотим удалить запись.

Чтобы реализовать логику удаления записи из массива, мы будем использовать JavaScript filter() функция.

Эта функция выполняет итерацию по каждому элементу массива и возвращает элемент, если определенная логика соответствует истине.

Затем обновляем значение state используя setState() метод повторно воспроизводит DOM по умолчанию.

Функция визуализации

Давайте закодируем render функция нашей App компонент.

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

The Header получает атрибут nam который относится к this.state.username. Это имя пользователя, которое мы определили в состоянии.

Textbox получает атрибут updateEntry который относится к this.updateEntry функция, которую мы определили выше.

Не забудьте добавить эту строчку в конце App.js чтобы мы могли увидеть наш результат на экране браузера:

export default App;

Дочерние компоненты

Создайте внутри новый каталог src и назовите его Components.

Далее создайте три новых файла с именем Display.js , Header.js и Textbox.js внутри Components каталог.

1*_fE56JXq7GVv6qgHb_Ko6A

Начнем с src/Components/Header.js файл:

Наш заголовок очень прост. Он просто отображает имя пользователя, которое мы передали в качестве атрибута. Он получает доступ к этому атрибуту с помощью this.props.nam.

Удивительный className атрибуты, которые вы видите, не что иное, как атрибуты класса HTML. className это ключевое слово, специфическое для JSX для классов HTML. Эти названия классов помогут нам создать наш веб-сайт с помощью CSS.

1*j59S60efTIR-6qMss59Obg

Компонент текстового поля

Теперь давайте закодируем Textbox компонент. Это покажет форму, в которой пользователи могут выбрать день из раскрывающегося меню и добавить элемент в свой список дел на этот день, используя поле ввода HTML.

ОТКРЫТО src/Component/Textbox.js и закодировать следующее:

The Textbox Класс компонента имеет объект состояния. The term будет использоваться для сохранения записи, которую вводит пользователь, и day инициализирован по умолчанию на сегодня. Но его значение может измениться, если пользователь выберет любой другой день, например Tomorrow или Day After Tomorrow.

The render функция воспроизводит простую форму, имеющую два набора полей.

У одного есть HTML <select>, чтобы пользователь мог выбрать день.

Этот тег выбора имеет a onChange событие, связанное с ним. Это событие будет запускаться каждый раз, когда будет выбран новый параметр. The handleSelect будет вызвана функция, и она обновит значение day в состоянии компонента.

У нас также есть еще один входящий тэг, где пользователь будет вводить свою цель «задачи», которую они хотят достичь. Это также должно onChange событие, которое будет называть handleChange функция. Эта функция обновит значение term в состоянии компонента.

Тег формы обертывания имеет onSubmit событие, которое будет инициировано, когда форма будет подана, и она будет вызывать handleSubmit функция.

The handleSubmit функция вызывает updateEntry функцию и передает значение term и day. Теперь updateEntry функция добавит term и day в состоянии родительского компонента и он будет сохранен там.

The handleSubmit функция также устанавливает значение term пустым, чтобы в нем можно было сохранить следующее значение.

Примечание: здесь речь идет о двух состояниях. Одним из них является компонент программы state которую мы будем считать своим основным государством. Его данные будут сохранены навсегда даже после закрытия веб-сайта и сервера. Другое состояние, на которое мы ссылаемся, – это конкретный компонент state. Это используется для временного хранения данных. Например, здесь компонент текстового поля state является временным состоянием.

1*qkkouycB868dZydeRVbIbA

Компоненты дисплея

Давайте закодируем наши компоненты дисплея.

Мы разделили логику дисплея на три компонента, отображающих список задач Today, Tomorrow и Day_After_Tomorrow Государственные объекты.

ОТКРЫТО src/Components/Display.js и вставьте следующий код:

Файл Display.js содержит три класса с идентичным кодом.

Давайте рассмотрим class DisplayToday для объяснения:

Помните, что в App класс компонентов внутри render функцию, когда мы вызываем:

/* App.js file */
<DisplayToday items={this.state.Today} deleteItem={this.deleteEntry} />

…мы имеем в виду это DisplayToday класс файла Display.js

Мы передали два атрибута. item указывает на Today массив, определенный в состоянии App.js файл, и deleteItem относится к deleteEntry функцию, которую мы написали в App.js файл.

The DisplayToday класс внутри Display.js файл воспроизводит DisplayToday компонент и перебирает список элементов, которые мы передали в атрибуте.

Это строка, которая выполняет задачу итерации каждого элемента:

this.props.items.map((item, index)=> return ( /* item here */ )) 

Здесь item является каждым элементом массива и index является индексом расположения этого элемента в массиве.

У нас тоже есть а <button> тег, который has an oСлушатель событий nClick, связанный с местным развлечениемction removeThis.

Когда пользователь нажимает кнопку onClick инициируется событие и removeThis функция вызывается. Эта функция получает значение индекса элемента в массиве как параметр и вызывает deleteEntry функцию и передает индекс массива и имя массива в качестве параметров.

removeThis(e){        this.props.deleteEntry(e, 'Today');  }

Затем deleteEntry функция удалит это конкретное расположение индекса из массива.

Вы можете подойти выше и посмотреть на deleteEntry функцию, закодированную в файле App.js.

Работа DisplayTomorrow класс и DisplayDayAfterTomorrow класс то же, что DisplayToday класс.

Итак, мы почти закончили – теперь добавим последние штрихи.

CSS

Для CSS я решил использовать фреймворк CSS вместо кодировки всего.

После маленьких поисков я отыскал Hack.css. Мне очень понравились его моноширинные шрифты и классическая хакерская тема.

Настроить CSS с проектом – очень простая задача. Просто запустите следующую команду:

npm install --save hack

Добавьте эту строку в верхней части вместе с другими операторами импорта в файл App.js:

import 'hack';

Если вы хотите добавить свой стиль CSS, создайте новый файл под названием src/style.css

Напишите свой CSS в этом файле и импортируйте его App.js вверху вместе с другими операторами импорта.

Хранение

Настроим хранилище.

Мы будем использовать локальное хранилище обозревателя как основное хранилище нашего веб-сайта.

То, что мы будем делать дальше это просто магия.

Интегрировать наш сайт с хранилищем браузера было бы не так просто без React Simple Storage.

Просто запустите такую ​​команду в терминале:

npm install --save react-simple-storage

Откройте файл App.js и добавьте эту строку в верхней части файла:

import SimpleStorage from 'react-simple-storage'

Теперь в вашем классе App Component прокрутите вниз к функции визуализации и добавьте эту строку после первой <div> тег:

<SimpleStorage parent={this} />

И вуаля! Теперь наши данные будут сохранены в браузере, и они будут получены из браузера, когда мы снова откроем наш веб-сайт.

Результат!

Чтобы проверить, чего мы добились, откройте свой терминал и введите:

npm start

Теперь в браузере перейдите к localhost:3000.

Надеюсь, вам это понравилось!

Добавьте несколько вещей в качестве домашнего задания.

  • Функции проверки кода. Сейчас даже пустая запись также обновляется, но наше приложение должно выдавать ошибку, что пользователю нужно сначала что-нибудь написать.
  • Отображение даты и времени
  • Добавление опции для редактирования имени пользователя

Если вы застряли, вы можете перейти на мою страницу GitHub, где вы найдете полный код.

Если вы хотите использовать этот веб-сайт каждый день, чтобы повысить свою производительность, вы можете установить эту страницу как домашнюю страницу своего браузера (до нее добавлены дополнительные функции).

…до следующего раза, друг, счастливого кодирования!

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

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