Автор оригинала: FreeCodeCamp Community Member.
Mohit Jain
Сегодня мы сделаем сайт «To-Do» … с некоторыми различными функциями.
Вы можете проверить живую демонстрацию того, что мы будем делать здесь Отказ
Для переднего конца мы будем использовать rest.js. React.js – это компонентная библиотека, которая используется для разработки интерактивных пользовательских интерфейсов (UIS).
Для заднего конца и хранения мы будем использовать локальное хранилище браузера. Это позволяет нам сохранять данные, чтобы в следующий раз мы открываем наш сайт, мы можем получить доступ к данным, которые мы сохранены ранее.
Create-React-App
Давайте начнем. Во-первых, вам нужно установить узел (кроссплатформенная среда выполнения JavaScript) и реагировать.
Вы можете скачать и установить узел из Настройка Node.js Отказ После этого открытый терминал и CD в каталог, где вы хотите сохранить проект. Далее запустите эти две команды:
npm install -g create-react-app
create-react-app next-3-days-planner
NPM установить это команда для установки пакетов NPM и -G Флаг помогает установить пакет глобально в нашей системе.
Create-React-App установит новый каталог проекта. Это также заботится обо всех вещах, необходимых, как реагирует, как WebPack, Babel и JSX, чтобы начинающие не приходилось связываться с настройкой их первоначального проекта.
Я называю этот проект Следующий 3-дневный планировщик Но вы можете назвать это все, что вам нравится.
Откройте каталог проекта в вашем любимом редакторе кода.
Родительский компонент
Теперь давайте сделаем наш родительский компонент. Открыть App.js файл и удалить все. Добавить этот код Snippet:
В первой две линии мы импортируем Реагировать Класс, который помогает нам делать компоненты. Мы также импортируем Реагировать который помогает рендерировать компоненты до DOM (модель объекта документа).
Мы также импортировали Заголовок Компонент, который будет использоваться для отображения панели заголовка сайта.
Текстовое поле Компонент будет содержать раздел ввода, в который пользователь будет ввести свой элемент «TODO».
Затем мы импортируем еще несколько дочерних компонентов. Это DisplayToday , DisplayToMrore , DisplayDayaftertomror. Эти три компонента помогают нам отобразить наш список Todo.
Если вы видите ошибку, не волнуйтесь. Мы еще не определили эти компоненты!
Тогда мы определяем нашу Приложение Компонент, который является нашим родительским компонентом.
Этот компонент имеет состояние, которое будет использоваться для хранения данных. «Сегодня» Ключ будет использоваться для хранения списка товаров TODO, которые должны быть завершены сегодня. То же самое относится и к «Завтра» и 'Day_after_tomOrr' Ключи.
updateentry () , DELETEENTRY () Две функции используются для добавления элементов в список списков и удалить элемент из списков. Мы определим их сейчас.
Обновление записей списка
updateentry () Функция принимает два параметра.
Срок Новый товар Todo, который нам нужно сохранить, и день это «день», в котором мы хотим добавить этот товар TODO.
У нас есть блок If-else, который проверяет значение день и добавляет, что товар TODO к этому конкретному массиву.
Три точки ... до this.state.today Помогите нам объединить массив новыми значениями.
Удаление записей
Давайте код удаления функции:
DELETEENTRY () Функция будет запущена всякий раз, когда пользователь нажимает кнопку «Удалить элемент» на странице
DELETEENTRY () Функция принимает два параметра.
индекс Является ли местоположение элемента в массиве, который должен быть удален. Второй параметр – день , Какой день, от которого мы хотим удалить запись.
Для реализации логики удаления записи из массива мы будем использовать JavaScript Фильтр () функция.
Эта функция передает каждый элемент массива и возвращает элемент, если логика, которую мы определяем, соответствует true.
Затем мы обновляем значение Государство используя setState () Способ, который повторно редит дому по умолчанию.
Рендер функции
Давайте код оказывать Функция нашего Приложение составная часть.
Здесь мы упомянули все наши детские компоненты ( которые мы будем кодировать позже …) и передали какой-то атрибут каждому мету.
Заголовок Получает атрибут Нам который относится к this.state.username Отказ Это имя пользователя, которое мы определили в состоянии.
Текстовое поле Получает атрибут Центр обновления который относится к this.updateentry Функция, которую мы определены выше.
Не забудьте добавить эту одну строку в конце App.js Так что мы можем увидеть наш выход на экране браузера:
export default App;
Дочерние компоненты
Создайте новый каталог внутри SRC и назвать это Компоненты Отказ
Далее создайте три новых файла с именем Display.js , Header.js и TextBox.js внутри Компоненты каталог.
Компонент заголовка
Давайте начнем с SRC/Компоненты/Header.js файл:
Наш заголовок очень прост. Он просто отображает имя пользователя, которое мы передали как атрибут. Доступ к этому атрибуту, используя This.props.nam Отказ
Странный классное значение Атрибуты, которые вы видите, это не что иное, как атрибуты класса HTML. классное значение Это ключевое слово для HTML-класса. Эти классы помогут нам в разработке нашего веб-сайта с помощью CSS.
Компонент TextBox.
Теперь давайте код Текстовое поле составная часть. Это покажет форму, где пользователи могут выбрать день из раскрывающегося меню и добавить элемент в свой список TODO в этот день, используя поле ввода HTML.
Открыть SRC/Компонент/TextBox.js и код следующего:
Текстовое поле Компонентный класс имеет государственный объект. Срок Будет использоваться для хранения записи, которые типы пользователей и день инициализируется по умолчанию сегодня. Но его значение может измениться, если пользователь выбирает любой другой день, как Завтра или День после завтрашнего дня Отказ
оказывать Функция оказывает простую форму, которая имеет два постели.
У одного есть HTML
Этот выбор тега имеет Onchange событие связано с ним. Это событие будет запущено всякий раз, когда выбран новый вариант. Ручной отделение Функция будет вызываться, и она обновит значение день в состоянии компонента.
У нас также есть еще один входной тег, где пользователь вводит их «Цель ToDo», они хотят достичь. Это также имеет Onchange событие, которое назовет HandleChange функция. Эта функция обновит значение Срок в состоянии компонента.
Tag Tag Tag The Formate Form имеет OnsUbmit Событие, которое будет срабатывать, когда представлена форма, и это позвонит Handlesubmit функция.
Handlesubmit Функция вызывает Центр обновления функция и передает значение Срок и день Отказ Теперь Центр обновления Функция добавит Срок и день В штате родительского компонента, и он будет сохранен там.
Handlesubmit Функция также устанавливает значение Срок Чтобы пробел, чтобы следующее значение можно было сохранить в нем.
Примечание: здесь мы говорим о двух государствах. Один – это компонент приложений Государство Что мы рассмотрим наше главное государство. Его данные будут сохранены навсегда даже после закрытия веб-сайта и сервера. Другое состояние, которое мы ссылаемся, это конкретный компонент Государство Отказ Это используется для временного хранения данных. Например, здесь текстовое поле компонента Государство это временное состояние.
Отображать компоненты
Давайте код нашего отображения компонентов.
Мы разделили логику отображения в трех компонентах, что отображает список Todo Сегодня , Завтра и Day_after_tomore Государственные объекты.
Открыть SRC/Компоненты/Display.js и вставить следующий код:
Файл display.js содержит три класса, которые имеют идентичный код.
Давайте рассмотрим Класс DisplayToday Для объяснения:
Помните, что в Приложение Компонентный класс внутри оказывать Функция, когда мы называем:
/* App.js file */
… Мы ссылаемся на это DisplayToday Класс Display.js файл.
Мы прошли в двух атрибутах. Предмет Указывает на Сегодня массив определен в состоянии App.js Файл и Делитейтем относится к DelteEntry Функция, которую мы написали в App.js файл.
DisplayToday класс внутри Display.js Файл отображает DisplayToday Компонент и ITERATE через список элементов, которые мы передали в атрибуте.
Это линия, которая делает задачу итерацию через каждый элемент:
this.props.items.map((item, index)=> return ( /* item here */ ))
Здесь Предмет каждый элемент массива и индекс это местоположение того предмета в массиве.
У нас также есть <Прицвета на> тег, который h как о Слушатель событий NClick связан с локальным веселым Cline Remo Ветис.
Когда пользователь нажимает на кнопку, OnClick событие срабатывает и Removethis Функция называется. Эта функция получает индексное значение элемента в массиве в качестве параметра, и он вызывает DelteEntry Функция и передает индекс массива и имя массива в качестве параметров.
removeThis(e){ this.props.deleteEntry(e, 'Today'); }Тогда DelteEntry Функция удалит это конкретное местоположение индекса из массива.
Вы можете пойти выше и посмотреть на DelteEntry Функция, которую мы закодировали в файле App.js.
Работа DisplayToMrore класс и DisplayDayaftertomrore класс такой же, как DisplayToday класс.
Поэтому мы почти закончили – теперь давайте добавим некоторые последние штрихи.
CSS.
Для CSS я решил использовать каркас CSS вместо кодирования всей вещи.
После небольшого поиска я нашел Hack.css Отказ Мне очень понравились свои моноспущенные шрифты и его классический «хакерский» тема.
Настройка CSS с проектом – очень простая задача. Просто запустите следующую команду:
npm install --save hack
Добавьте эту строку в верхней части вместе с другими операторами импорта в вашем файле App.js:
import 'hack';
Я хочу добавить несколько пользовательских стилей CSS, создать новый файл под названием SRC/style.css.
Напишите свои CSS в этом файле и импортируйте его в App.js в верхней части вместе с другими отчетными операторами.
Место хранения
Давайте настроим хранение.
Мы будем использовать локальное хранилище браузера в качестве основного хранения нашего веб-сайта.
То, что мы собираемся делать дальше, это просто магия.
Интеграция нашего веб-сайта с хранилищем браузера не будет так легко без Реагировать простое хранение Отказ
Просто запустите следующую команду в терминале:
npm install --save react-simple-storage
Откройте файл App.js и в верхней части файла добавьте эту строку:
import SimpleStorage from 'react-simple-storage'
Теперь в классе компонентов приложения прокрутите вниз до функции Render и добавьте эту строку после первого
И VUILà! Теперь наши данные будут сохранены в браузере, и он будет выбран из браузера, когда мы открываем наш сайт.
Результат!
Чтобы проверить, что мы достигли, откройте свой терминал и введите:
npm start
Теперь в браузере перейдите к localhost: 3000 Отказ
Я надеюсь, тебе понравилось это!
Несколько вещей как домашнее задание для вас, чтобы добавить …
- Функции проверки кода. Сейчас даже обновляется даже пустая запись, но наше приложение должно бросить ошибку, которую пользователь должен написать что-то первое.
- Показывая дату и время
- Добавление возможности для редактирования имени пользователя
Если вы не застряли где угодно, вы можете пойти на мой Страница GitHub Где вы найдете полный код.
Если вы хотите использовать этот веб-сайт на ежедневной основе, чтобы увеличить производительность, вы можете установить Эта страница В качестве домашней страницы вашего браузера (в нем есть еще несколько функций).
… До следующего раза приятель, счастливое кодирование!